Script not executing after cart update

[TrendBlend]

Hello, I added this script to my cart-drawer.liquid and it works until I remove an item from cart or change the quantity of an item in my cart-drawer. After that the ^ Savings button is not clickable anymore. How can I keep it clickable?

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const toggle = document.getElementById("savings-toggle");
    const details = document.getElementById("savings-details");
    const icon = toggle.querySelector(".caret-icon");

    toggle.addEventListener("click", function () {
      details.classList.toggle("hidden");
      icon.style.transform = details.classList.contains("hidden") ? "rotate(0deg)" : "rotate(180deg)";
    });
  });
</script>

[topnewyork]

Hi @TrendBlend,

When you remove an item or change the quantity in the cart drawer, Shopify re-renders the cart content dynamically using JavaScript. As a result, your <script> (which runs only once on page load using DOMContentLoaded) stops working because the #savings-toggle element is replaced with a new one — and the event listener is lost.

Solution: Re-attach the event listener after the cart drawer updates
You can listen to custom Shopify events like shopify:cart:updated or shopify:section:load to re-run your event binding function after updates.

Here’s the updated script:

<script>
  function attachSavingsToggle() {
    const toggle = document.getElementById("savings-toggle");
    const details = document.getElementById("savings-details");
    if (!toggle || !details) return;

    const icon = toggle.querySelector(".caret-icon");

    toggle.addEventListener("click", function () {
      details.classList.toggle("hidden");
      icon.style.transform = details.classList.contains("hidden") ? "rotate(0deg)" : "rotate(180deg)";
    });
  }

  // Initial setup on page load
  document.addEventListener("DOMContentLoaded", attachSavingsToggle);

  // Reattach toggle after cart drawer updates
  document.addEventListener("shopify:section:load", attachSavingsToggle);
  document.addEventListener("shopify:cart:updated", attachSavingsToggle);
</script>

Thanks!

[websensepro · Accepted solution]

Hi @TrendBlend ,

The issue you're describing likely occurs because the cart drawer's DOM is being dynamically updated when you remove an item or change the quantity, causing the event listener to be detached from the updated elements. This is common in dynamic interfaces, such as those using AJAX or JavaScript to update the cart without a full page reload. To keep the "Savings" button clickable, you can use event delegation or reattach the event listener after the cart updates.

Here are a few approaches to fix this, starting with the most recommended:

Solution 1: Use Event Delegation

Instead of attaching the event listener directly to the toggle element, attach it to a parent element that persists in the DOM (e.g.   document or a container like the cart drawer). This way, the listener will catch events from the toggle button even if it's replaced during a cart update.

Update your script like this:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("click", function (event) {
      const toggle = event.target.closest("#savings-toggle");
      if (toggle) {
        const details = document.getElementById("savings-details");
        const icon = toggle.querySelector(".caret-icon");
        details.classList.toggle("hidden");
        icon.style.transform = details.classList.contains("hidden") ? "rotate(0deg)" : "rotate(180deg)";
      }
    });
  });
</script>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!