Integrations with drawer carts and Infinite Option bundles
This article applies to Simple Bundles 1.0 and 2.0.
If an infinite options bundle doesn't break down correctly when customers add it through a drawer cart, the cart drawer is probably not sending the bundle option properties to Shopify. This article explains why this happens and how to add the properties to your cart drawer code.
Why do drawer carts break infinite options bundles?
The infinite options selector sits on the product page, in the same section as the product title, description, and add-to-cart button. Those elements usually live inside an HTML <form> that sends the product to the cart.
When a customer picks options, Simple Bundles adds them to the add-to-cart form as hidden line item properties: one for each option, plus a combined properties[_bundle_selection] field. Simple Bundles 1.0 reads the option properties, and Simple Bundles 2.0 reads _bundle_selection. A standard form submit (HTTP POST) sends every input in the form, so the properties reach the cart.
Drawer carts use AJAX instead. AJAX adds products with JavaScript without reloading the page, and the theme developer decides which product data to send to Shopify's /cart/add.js endpoint. Some cart drawers don't send product properties, as in the example below.
Without these properties, Simple Bundles can't tell which options your customer chose, so it can't add the bundle items to the order.
How do I fix a drawer cart that doesn't send bundle properties?
The best fix is to contact your theme developer, or the cart drawer app's support if it's an app, and ask them to include the product properties in the AJAX add-to-cart request. If you're comfortable with code, you can add it yourself.
Warning: Duplicate your theme before you edit code, and test the change on the copy with all your bundle products before you publish it.
- In your Shopify admin, go to Online Store > Themes, open the menu on your theme copy, and click Edit code.
- Find the JavaScript file that controls the cart drawer, for example theme.js, global.js, or cartDrawer.js. File names vary by theme.
- Add the following snippet before the AJAX call's variable declarations. It collects every bundle option property from the product form into a properties variable, including the hidden properties[_bundle_selection] field. If your page has more than one product form, use the form your cart drawer code submits.
const properties = {};
const productForm = document.querySelector('form[action*="/cart/add" i]');
if (productForm) {
new FormData(productForm).forEach((value, name) => {
const match = name.match(/^properties\[(.*)\]$/);
if (match && value) properties[match[1]] = value;
});
}
- Add the properties variable to the object sent in the AJAX request, as in the image below.
- Save the file, add an infinite options bundle to the cart from your theme copy's preview, and place a test order to check that the bundle breaks down.
If you need technical help with this, contact our support team.
Does Simple Bundles 2.0 handle this differently?
The fix is the same. In Simple Bundles 2.0, the cart transform needs _bundle_selection to break the bundle down at checkout, so a cart drawer that drops properties stops the breakdown there. Quick "Add to cart" buttons on collection pages can cause the same problem. See Quick "Add to cart" for BYOB and Infinite Options bundles: What you need to know.
Related articles
Why didn't my bundle break down into individual SKUs?
Example: Creating an infinite options bundle
Set up infinite options on Online Store 2.0
Why are some bundle items missing or not breaking down into line items in orders?