Integrations with drawer carts and Infinite Option bundles

Sometimes infinite options bundles need intetegrations with theme's cart drawer, let us explain why.

If you install infinite options in the theme, you will notice that the app inserts option selectors inside the same section that usually contains the title, description, and also add to cart and checkout buttons.

These elements are generally contained within an HTML element called <form> which is responsible for executing the sending of information to the store servers. In this case information about the product being added to the cart. 

Forms work by natively executing the HTTP POST method which works with no issues to gather all the data of inputs inside it including the app selector's product properties names and values.

However, drawer carts make use of  AJAX, which is a technique that dynamically adds the products without reloading the page by using JavaScript instead of the native form method. When AJAX comes into action theme developers have now complete control of what product data they want to pass to the Shopify API endpoint (/cart/add.js). And sometimes, for some reason, they decide to not send product properties as you can see in the example in the image below. 

1) First you need to know the theme JavaScript file controlling the cart drawer. something like theme.js, global.js, cartDrawer.js.

2) Then add the following snippet before the ajax call variable declarations, which will collect the chosen selectors' property names and values in the 'properties' variable. 

const properties = {};
const ioSelectors = document.querySelectorAll('#simple-bundles-options select[name*="properties"]');
ioSelectors.forEach((ioSelector) => {
    if (!ioSelector) return;
    const ioSelectorName = ioSelector.name;
    if (!ioSelectorName) return;
    const optionKey = ioSelectorName.match(/\[(.*?)\]/)[1];
    const optionValue = ioSelector.value;
    if (!optionKey || !optionValue) return;
    properties[optionKey] = optionValue;
})	

3) Then make sure to add the properties variable just created to the object sent in the ajax POST method as in the image below.