MAKEBECOOL_BUNDLES is the storefront global the app publishes on window. It carries the data the widget is built from, a small number of methods you can call, and the events the app fires when it changes the cart.
Check that it exists before you use it
The object is created by the app's theme extension, so it only exists on a page where the MBC Bundles App embed is enabled and has loaded. Some of it — allBundles and the methods listed under App methods below — is filled in later still, once the app's main script has run.
Feature-detect before you call anything:
if (typeof window.MAKEBECOOL_BUNDLES?.getBundlesByProductId === 'function') {
const bundles = window.MAKEBECOOL_BUNDLES.getBundlesByProductId(productId);
}
Properties
shop — the current shop: its settings, domain, locale, country, currency and plan context.
product — the product on the page being viewed, with its id, handle, featured image and variants. It is null on a page with no product.
allBundles — the bundles the app loaded for this page. It is null until the app's data has arrived.
applicableCombos — the bundle combinations the app found in the current cart.
templateName — the name of the Shopify template being rendered.
integrations — the third-party integrations enabled for the shop.
dataVersion — the app's data version, used to invalidate its client-side caches.
selectors — the CSS selectors the app uses to find your theme's Add to cart controls, both inside the product form and in out-of-form sticky bars.
App methods
These are added by the app's main script.
initWidget() — initialises the product-page widget.
updateCart() — re-runs the app's pass over the current cart.
openPopup(bundle) — opens the bundle pop-up for the bundle you pass in.
getBundlesByProductId(productId) — returns the bundles that apply to that product.
getVolumeDiscountBundlesForProduct(productId) — the same, narrowed to volume-discount bundles.
Theme-extension helpers
These three come from the theme extension itself, so they are available earlier than the methods above.
getProductForm() — finds the theme's add-to-cart form for the current product.
getFormVariantId(form) — reads the selected variant id out of a form.
disableProductAtc(form) — disables the theme's Add to cart controls belonging to that form.
Events
Two public events are dispatched on window, each with its payload in event.detail:
mbcb:cart-updated— the app added a bundle to the cart, or updated a free gift.mbcb:discount-applied— the app applied its discount.
window.addEventListener('mbcb:cart-updated', event => {
console.log(event.detail);
});
The same two events are also dispatched on document under their old names, MAKEBECOOL_BUNDLES.updateCart and MAKEBECOOL_BUNDLES.applyShopifyDiscount, so code written against the older API keeps working. Those are legacy aliases — write new code against the mbcb: names on window.
The widget's Custom button
Each product card in the widget can carry a secondary button that dispatches a JavaScript event name of your choosing, set in the widget's Custom button settings. Listen for it the same way you would any custom event, for example:
document.addEventListener("MAKEBECOOL_BUNDLES.showSizeGuide", callback)
Methods this article used to document
If you have code copied from an earlier version of this page, these are gone and calling them will throw: loadWidgetScript(), initWidgetOnCollectionPage(), changeLanguage(code) and cartDataFix(cart). The bundlesForCurrentProduct property and the pricingCalculated event no longer exist either.
For the current equivalents: use getBundlesByProductId(productId) in place of bundlesForCurrentProduct, and listen for mbcb:discount-applied in place of pricingCalculated.
Need Help?
If you have any questions, please contact our support team.
📩 Contact Support: Reach out to us via live chat or send an email to [email protected].