Creating a set of variations from a group bundle in Shopify.

27 06 2017

The idea it is though a tag to create a bundle, handled through a shopify script on the backend to allow for variation on product bundles.
What we can do it is to let the normal DOM to be created through Shopify liquid templating because it is good for SEO and then rebuild the whole thing with JS.

First: identify each single item that is a variation of the same item.
Second: group these items in order to be able to create a carousel of variations.
Third: create a carosuel.

To identify each single item I tagged each single item with a data-product-group-index.
This has allowed me to create a carousel made of products with the same ID.
At this point we can listen for a select event on the carousel of our choice and update the form each time.

What is going to happen next? When the customer selects a certain variation Shopify.OptionSelectors is going to fire an update event which is asyncronous, causing the wrong size to be selected sometime.
What we need to do then it is to update the cart with the new items within the callback from Shopify own variation update event.