How to make Add to cart button add 2 products to the cart

Store Design
, ,

Topic summary

A developer is trying to implement functionality where clicking the “Add to Cart” button adds two products simultaneously: the main product and an optional upsell item (controlled by a checkbox).

Current Approach:

  • Using an event listener on the ATC button that triggers when the upsell checkbox is checked
  • Attempting to use a fetch request to add the upsell product to the cart

The Problem:

  • The fetch function works when triggered directly by the checkbox click
  • However, when triggered by the actual product ATC button, it fails with a TypeError: “Cannot read properties of null (reading ‘innerHTML’)”
  • Interestingly, the function works correctly when tested with a dummy button

Technical Details:

  • The developer is familiar with custom code and has shared their JavaScript implementation
  • The error suggests an issue with accessing DOM elements when the function is triggered by the product page’s native ATC button

Status: The issue remains unresolved, with the developer seeking guidance on why the behavior differs between the dummy button and the actual ATC button.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Is there a simple way of making the add to cart button on a product page add 2 items? I have a checkbox on my product page, and when it is checked, I want to add the main product as well as the upsell (the checkbox product) to the cart. I am familiar with adding custom code.

I tried adding an event listener to the add to cart button when the upsell checkbox is clicked, which then listens for the ATC button click, then does a fetch to add the upsell product to the cart, but it is not working and I am unsure why.

The fetch within the function does work if I do it when the checkbox is clicked, rather than when ATC is clicked, which I found strange. Optimally I would like to do it when ATC is clicked, as shown below in the function:

EDIT: the function works but only when I created a dummy button to test it with, when I use the product ATC button to trigger the function on click, I get this error in console:

TypeError: Cannot read properties of null (reading 'innerHTML')
    at CartNotification.getSectionInnerHTML

Function:

function watchATC() {
      var button = document.getElementById("button");
      button.addEventListener("click", function(event){
        const cartNotification = new CartNotification();
        if (document.getElementById('screen-protector-upsell').checked) {
        const config = fetchConfig('javascript');
        config.headers['X-Requested-With'] = 'XMLHttpRequest';
        config.body = JSON.stringify({
          id: protector,
          sections: cartNotification.getSectionsToRender().map((section) => section.id),
          sections_url: window.location.pathname
        });     
        fetch(`${routes.cart_add_url}`, config)
          .then((response) => response.json())
          .then((response) => {
            cartNotification.renderContents(response);
            this.window.SLIDECART_UPDATE(response);
        })
        .catch((e) => {
          console.error(e);
        });
        } 
      });  
    }
1 Like