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. 

When this happens the app cannot work correctly, since as it can be seen, it needs these properties to actually know which options your customer chooses to then add the bundle items to the order.

The best way to address and fix this is to contact the developer of the theme or cart drawer app support (if it is an app) to help you include the product properties in the AJAX post methods. Also If you have confidence in coding, you can add it yourself by following the steps 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 =;
    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.

Important: Before testing please create a copy of the file as a backup. Also, it is always a good idea to test in a draft theme copy to see how it goes with all products before you publish it.

Anyways, if you need technical assistance with this you can contact our support. we will be happy to help.

Still need help? Contact Us Contact Us