This demo uses Dopple's Visual API — be sure to check the "Use Visual API instead of Visual Component" setting within the Shopify app. This will give you greater control over switching between products (i.e. destroying one product before loading a new one).
The key thing demonstrated here is how you can use JavaScript to parse the data output by the Shopify app to control the UI on your page.
This is only meant to be a basic demo of how to work with the data output by Dopple's Shopify app. You are free to change how you input the data within the Shopify dashboard, how you layout and style the UI, and how you write the JavaScript logic to handle showing/interacting with the UI to fit your needs.
Check the code comments within the scripts.js file for more detailed info on each step.
You can access the 3D product's instance directly on the window.doppleShopify.product object. This makes it easy to call the setValue() method on the product to update its configuration.
The full UI handoff spreadsheet (link) has notes about which options are available/unavailable for which products. This demo includes a few examples of how to implement the conditional logic for the mouthpieces and Santa Barbara Finishes, and the rest of the conditional logic can be built out in similar ways.
One thing this demo does not include is the conditional logic for automatically updating the mouthpieces according to the shank/snaffle selection. You will notice that if a baseline shank/snaffle is selected, but a non-baseline mouthpiece is selected (or vice versa), then the product will not display correctly. A valid combo of shank/snaffle and mouthpiece must be selected in order for the product to be displayed.
Table of contents within the scripts.js file:
Line 9 — Mock data of the window.doppleShopify object. This will automatically be created for you by the Dopple app block on your page. Specifically, the map of all your product options and values are available within window.doppleShopify.productConfig.doppleAttributeMap.
Line 987 — A function to apply default values to a product when that product is loaded.
Line 996 — The map of default values for each product (you could set this data up as a new category within the Shopify app if you prefer, but it may be easier to just hardcode it in your JavaScript here).
Line 1242 — Generating the list of products based on the data from the Shopify app.
Line 1254 — Conditional logic for which shanks are available for which products.
Line 1329 — A function to generate the list of shanks available for a certain product, based on the conditional logic above.
Line 1362 — A function to generate the list of mouthpieces available for a certain product.
Line 1393 — Generating the list of Santa Barbara finishes based on the data in the doppleShopify.productConfig.doppleAttributeMap.
Line 1415 — Load Dopple on the page using Dopple's Visual API, apply default values to the currently selected product, and generate the shank and mouthpiece menus.
Line 1460 — A function to load a new 3D product after destroying the current 3D product, once a user selects a new base product.