Add variant selectors and update state

gil-- commented 5 years ago

Lots more work needs to be done here:

Add option to show as radio buttons (boxes) instead of a select
Auto render color as hexcolor?
Look into potential load perf issue. Selecting select has lag

Most of this code was ripped from Shopify graphql example: https://github.com/Shopify/storefront-api-examples/tree/master/react-graphql-client

gil-- commented 5 years ago

Merging since preview builds successfully. Still more work to be done per PR comment but like everything, WIP.

tijsluitse commented 5 years ago

Hi @gil-- , I'm trying to get this variant selector working with multiple product options. All options can be combined and have different prices and images. I'm struggling to set the state based on the first options and handling the option change with finding the right variant. Do you have a good suggestion? The first two are custom radio buttons and the third is a textual option select input.

options = [{ name: "Frame", values: ["Black", "White"] }, { name: "Saddle", values: ["Brown", "Black"] }, { name: "Accu", values: ["Standard", "Extended"] }]

gil-- / gatsby-starter-shopifypwa

Add variant selectors and update state #26