Hi,
I'm in the process of opening a shop that sells spectacle lenses and I need help for my product page. Each lens product will have 2 variant categories: sphere and cylinder. I would like to have a matrix which shows all of the variants of that particular product. Please see the image in the link below.
Here are my requirements:
- This matrix will be configured automatically as per product variants uploaded to shopify. i.e. the matrix is not hardcoded. I need to be able to add/subtract variants and the matrix would re-configure automatically.
- As the mouse cursor hovers over each column/row, the associated heading will highlight to help user see which variant he/she is currently on.
- When the user clicks on a particular box in the matrix, the qty to be added to cart will increment by 1. This number will be shown inside the box. Clicking a box does not automatically add them to cart. It simply increments the "to be added" amount by 1.
- Once finished choosing qtys, the user clicks on the Add to Cart button and all product variants with qty defined will be added to cart.
- If variant qty in inventory is 0, then the box needs to be shown as greyed out and qty cannot be incremented.
- Page will have a "reset form" button which clears all selections
Image for illustration: https://drive.google.com/file/d/0B7PJsitCbXgkcGxod1BzY3drWlE/edit?usp=sharing
Please contact me at felix(at)felixwong.ca to provide a quote and also samples of previous work. Thanks.