Side Cart Drawer Not Opening or Updating After Add to Cart (Code fix: Advanced)

Advanced

Applies to: Shopify themes using AJAX side cart drawers • SellUp On-Page Offers

The Problem

When a customer clicks "Add" on a SellUp on-page upsell offer (e.g. a gift box add-on), one of two things typically goes wrong:

1. The side cart drawer doesn't open at all. The page does a full form submission or silently adds the item with no visual feedback. The customer has no idea the product was added.
2. The drawer opens but appears empty. The item has been added to the cart on the server, but the drawer is showing stale HTML from before the addition. A full page refresh reveals the item is actually in the cart.

Why This Happens

Most modern Shopify themes intercept the native product form's submit event, send the request via fetch or XMLHttpRequest to /cart/add.js, then re-render and open the cart drawer using the Shopify Section Rendering API. 

This is how the main "Add to Cart" button works seamlessly with the drawer.

SellUp injects its own <form> element with its own submit button. 

This form is outside the theme's event listener scope, so when it submits:

• The theme's AJAX interception never fires.
• The form either does a standard full-page POST (breaking the experience) or SellUp handles it with its own AJAX call that doesn't know how to talk to your theme's cart drawer.
• Even if the item lands in the cart, the drawer HTML is never refreshed, so it shows empty or stale content.

The Solution

We intercept clicks on SellUp's add-to-cart button, prevent the default form behaviour, manually post to /cart/add.js, fetch the freshly rendered cart drawer HTML via the Section Rendering API, inject it into the DOM, and then open the drawer.

Implementation Steps

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(e) {
    var sellupBtn = e.target.closest('.launchtip_add_to_cart');
    if (!sellupBtn) return;

    e.preventDefault();
    e.stopPropagation();

    var form = sellupBtn.closest('form');
    if (!form) return;

    var formData = new FormData(form);

    // Step 1: Add the item to the cart via AJAX
    fetch('/cart/add.js', {
      method: 'POST',
      body: formData
    })
    .then(function(res) { return res.json(); })
    .then(function() {
      // Step 2: Fetch the updated cart drawer HTML
      return fetch('/?sections=cart-drawer');
    })
    .then(function(res) { return res.json(); })
    .then(function(sections) {
      var cartDrawerHTML = sections['cart-drawer'];
      if (cartDrawerHTML) {
        var cartDrawer = document.querySelector('cart-drawer');
        if (cartDrawer) {
          // Step 3: Replace drawer contents with fresh HTML
          var parser = new DOMParser();
          var doc = parser.parseFromString(cartDrawerHTML, 'text/html');
          var newDrawerContent = doc.querySelector('cart-drawer');
          if (newDrawerContent) {
            cartDrawer.innerHTML = newDrawerContent.innerHTML;
          }
        }
      }

      // Step 4: Open the drawer
      var drawer = document.querySelector('cart-drawer');
      if (drawer) {
        if (typeof drawer.open === 'function') {
          drawer.open();
        } else {
          var cartTrigger = document.querySelector(
            '[data-cart-toggle], .header__icon--cart a, cart-icon-bubble a'
          );
          if (cartTrigger) cartTrigger.click();
        }
      }
    })
    .catch(function(err) {
      console.error('SellUp cart drawer error:', err);
    });
  }, true);
});

<script src="{{ 'sellup-cart-drawer.js' | asset_url }}" defer></script>

Theme-Specific Adjustments

The script above targets the most common Shopify drawer pattern (a <cart-drawer> custom element with a section called cart-drawer). If your theme uses a different structure, you'll need to adjust two things:

How It Works (Technical Summary)

The script follows a four-stage process that mirrors what the theme does natively for its own add-to-cart button:

1. Intercept — A delegated click listener on document catches clicks on any element with the class .launchtip_add_to_cart and prevents the default form submission.
2. Add to cart — The form data (variant ID, quantity, properties) is posted to /cart/add.js via fetch, ensuring the item is added without a page reload.
3. Refresh the drawer — A second fetch call hits /?sections=cart-drawer (Shopify's Section Rendering API), which returns the fully rendered HTML of the cart drawer section reflecting the updated cart. This HTML is parsed and injected into the existing drawer element in the DOM.
4. Open the drawer — The drawer's .open() method is called (or the cart icon is programmatically clicked as a fallback), presenting the customer with the updated cart.

Difficulty: Advanced • Tested with: SellUp On-Page Offers, Shopify 2.0 themes with AJAX cart drawers