> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glood.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Default JavaScript

> Default bundle JavaScript hooks code reference

# 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.

```js theme={null}
"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.

<Note>
  See the [Hooks](/for-developers/bundles/hooks) page for detailed parameter documentation and use cases for each hook.
</Note>