Preset Bundles: Automatically Ensure All Products in an Upsell Block Are Added to Cart

In this tutorial, we’ll guide you through automatically adding all products in an upsell block to the cart, hiding the upsell block from view, and displaying the bundled price in real-time.

This method serves as a workaround for preset bundles, similar to Shopify’s Bundles app.

Step 1: Duplicate Your Live Theme

Always work on a duplicated development theme to ensure your live store remains unaffected by changes.

Step 2: Create and Upload the Snippet

1. Navigate to the Assets folder of your theme.
2. Create a new JavaScript file named giftship-auto-bundle.js.
3. Copy and paste the following code into the file:

/* 
 * Giftship | Auto Bundle & Hide
 * 
 * This script automatically processes upsell bundle checkboxes within the Giftship app.
 * When any upsell block's input `name` attribute is set to "_bundle", this script will:
 * - Automatically check all associated checkboxes.
 * - Trigger the `change` event for each checkbox to ensure our total bundle function fires.
 * - Disable the checkboxes to prevent users from unchecking them manually.
 * 
 * To use:
 * 1. Ensure upsell block inputs have the `name="_bundle"` attribute.
 * 2. Include this script on your page.
 * 
 * Compatibility: Works with the `giftship.loaded` event.
 */

(() => {

    const MODULE = {

        checkbox_selector: '[data-child-name="_bundle"] input[type="checkbox"][name="_gs_bundle_ids[]"]',
        app_container: '#gsAppContainer',

        init: function () {
            this.registerEventHandlers();
        },

        registerEventHandlers: function () {
            document.addEventListener('giftship.loaded', this.handleGiftshipLoaded.bind(this));
        },

        handleGiftshipLoaded: function () {
            const appContainer = document.querySelector(this.app_container);
            if (!appContainer) {
                console.error('#gsAppContainer not found.');
                return;
            }

            this.processCheckboxes(appContainer);
        },

        processCheckboxes: function (appContainer) {
            const checkboxes = appContainer.querySelectorAll(this.checkbox_selector);
            if (!checkboxes.length) {
                console.warn('No checkboxes found with the specified selector.');
                return;
            }

            checkboxes.forEach(checkbox => this.processSingleCheckbox(checkbox));
        },

        processSingleCheckbox: function (checkbox) {
            // Check the checkbox and dispatch a change event
            checkbox.checked = true;
            this.triggerChangeEvent(checkbox);

            // Disable the checkbox and prevent user interaction
            checkbox.disabled = true;
            checkbox.addEventListener('click', this.preventClick);
        },

        triggerChangeEvent: function (checkbox) {
            const changeEvent = document.createEvent('HTMLEvents');
            changeEvent.initEvent('change', true, false);
            checkbox.dispatchEvent(changeEvent);
        },

        preventClick: function (event) {
            event.preventDefault(); // Prevent interaction
        }
    };

    MODULE.init();

})();

Step 3: Edit theme.liquid to Include the Snippet

1. Open theme.liquid in your theme editor.
2. Scroll to the bottom of the file, just above the closing </body> tag.
3. Paste the following code:

  {% if template.name == 'product' %}
  <script src="{{ 'giftship-auto-bundle.js' | asset_url }}"></script>
  {% style %}[data-child-name="_bundle"] {display:none !important;} {% endstyle %}
  {% endif %}

Step 4: Update the Bundle Price

Step 5: Update the Upsell Block Input Name

Ensure the input name for the product option upsell block is updated to “_bundle” to match the script.

With these steps completed, your upsell block will automatically add all products to the cart, hide the block, and present the bundled price in real-time.