Skip to main content

​
Default Bundle JavaScript

The JavaScript template contains the lifecycle hooks that power bundle interactivity. Each hook is called at a specific point in the bundle’s lifecycle and receives the bundle data along with utility functions. 
"use strict";

return {
    OnBundleRender: function OnBundleRender(bundle, utils, states) {
        const totalPrice = utils.currencyFormatter(
            bundle.products.reduce((acc, product) => {
                return (
                    acc +
                    parseFloat(
                        utils.getComponentPrice(product.id, states.selectedProductOptions, bundle)
                    )
                )
            }, 0)
        )
        const translations = utils.getTranslations({
            data: bundle,
            productsCount: utils.getTotalProductsInbundles(bundle),
            totalPrice,
        })
        const products =
            (bundle?.products ?? []).map((product) => ({
                title: product.title,
                options: [
                    {
                        name: 'Type',
                        value: utils.getProductOptions(product.id, bundle)
                            .map((option) => option.value)
                            .join(', '),
                    },
                ],
                variants: utils.getProductOptions(product.id, bundle),
                image: product?.featuredImage?.url,
                dropdownPlaceholder: 'Select product',
                handle: product.handle,
                id: product.id,
            })) ?? []
        return {
            products: products,
            translations
        }
    },
    OnConfigLoad: function OnConfigLoad(bundle, utils) {
        return bundle
    },
    OnVariantChange: function OnVariantChange(variantId, utils) {
        function changeVariantId(variantId) {
            const url = new URL(window.location);
            url.searchParams.set('variant', variantId);
            window.history.replaceState({}, '', url);
        }
        changeVariantId(variantId)
    },
    OnAddToCart: function OnAddToCart(variantId, utils) {
        console.log('added', utils);
    },
    OnAddedToCart: function OnAddedToCart(variantId, utils) {
        console.log('added to cart', utils);
    }
};

​
Hook Functions

​
OnBundleRender

The primary rendering hook. Transforms raw bundle data into the format consumed by the Liquid template. Calculates total price, resolves translations, and maps products with their options and variants.

​
OnConfigLoad

Called when bundle configuration is first loaded. Use this to modify or enrich the bundle data before any rendering occurs. By default, returns the bundle unchanged.

​
OnVariantChange

Fired when a customer selects a different variant. By default, updates the URL query parameter to reflect the selected variant ID.

​
OnAddToCart

Called immediately when the add-to-cart action is triggered, before the cart API request. Use this for pre-cart validation or UI updates.

​
OnAddedToCart

Called after a successful add-to-cart API response. Use this for post-cart actions like showing confirmation messages or triggering analytics.
See the Hooks page for detailed parameter documentation and use cases for each hook.