Why custom script not being loaded when cart is updated

Shopify Discussion
,

Topic summary

A Shopify developer implemented a custom upsell product carousel in their cart drawer using Swiper.js, but the JavaScript stopped functioning after cart updates (quantity changes or item removals).

Root Cause:
When the cart updates, Shopify’s theme JavaScript completely replaces the cart drawer’s innerHTML. This process:

  • Removes all existing DOM elements and their event listeners
  • Does not execute <script> tags inserted via innerHTML replacement
  • Prevents the original DOMContentLoaded event listener from firing again

Solutions Offered:

  1. Event-based approach: Subscribe to PUB_SUB_EVENTS.cartUpdate to reinitialize Swiper after each cart update

  2. Custom elements approach: Wrap the HTML in a custom element that automatically initializes when added to the document

  3. Code modification: A working code snippet was provided that addresses the reinitialization issue

Resolution:
The original poster confirmed the provided solution resolved their issue.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hello I added this cart to my cart-drawer.liquid and it works until I click a remove button or quantity button in my cart, which causes the cart to reset and the javascript not to be used anymore I think. URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows


  {% if settings.cart_upsell_products != blank %}
    {% assign cart_product_ids = cart.items | map: 'product_id' %}
    {% assign upsell_count = 0 %}

    {% for product in settings.cart_upsell_products %}
      {% unless cart_product_ids contains product.id %}
        {% assign upsell_count = upsell_count | plus: 1 %}
      {% endunless %}
    {% endfor %}

    {% if upsell_count > 0 %}
      

        ### Je kunt dit ook leuk vinden

        {% if upsell_count > 1 %}
          
            

              

                {% for product in settings.cart_upsell_products %}
                  {% unless cart_product_ids contains product.id %}
                    

                      

                        

                          
                            
                          
                        

                        
                          

                            {{ product.title }}
                          

                          

{{ product.price | money }}

                          
                        

                      

                    

                  {% endunless %}
                {% endfor %}
              

            

            ‹

            ›

          

        {% else %}
          
            {% for product in settings.cart_upsell_products %}
              {% unless cart_product_ids contains product.id %}
                

                  

                    

                      
                        
                      
                    

                    
                      

                        {{ product.title }}
                      

                      

{{ product.price | money }}

                      
                    

                  

                

              {% endunless %}
            {% endfor %}
          

        {% endif %}
      

    {% endif %}
  {% endif %}
2

When page is loaded initially, your JS code runs and initializes swiper, etc. Swiper works.

On each cart change theme Javascript completely replaces content of the cart drawer. This means that any elements which existed there are no longer there and any event listeners attached to them are no longer functional.

This is done by replacing innerHTML of the drawer wrapper element. Note, that any code added this way is not executed.

And on top of that, your code is inside event listener which listens to “DOMContentLoaded” which has already fired and would not fire again.

So you need to make sure your that your JS runs after cart drawer update.

One way to do this is to subscribe to PUB_SUB_EVENTS.cartUpdate which is fired upon cart drawer update and run your swiper init code there.

Another option is to define a custom element and put your html inside this custom element. The beauty of custom elements is that the browser will automatically initialize them with your code as soon as they added to the document, so you do not need to watch for events, etc.

1 Like
3

Hi @TrendBlend
Replace your code with this code, and If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!


  {% if settings.cart_upsell_products != blank %}
    {% assign cart_product_ids = cart.items | map: 'product_id' %}
    {% assign upsell_count = 0 %}

    {% for product in settings.cart_upsell_products %}
      {% unless cart_product_ids contains product.id %}
        {% assign upsell_count = upsell_count | plus: 1 %}
      {% endunless %}
    {% endfor %}

    {% if upsell_count > 0 %}
      

        ### Je kunt dit ook leuk vinden

        {% if upsell_count > 1 %}
          
            

              

                {% for product in settings.cart_upsell_products %}
                  {% unless cart_product_ids contains product.id %}
                    

                      

                        

                          
                            
                          
                        

                        
                          

                            {{ product.title }}
                          

                          

{{ product.price | money }}

                          
                        

                      

                    

                  {% endunless %}
                {% endfor %}
              

            

            ‹

            ›

          

        {% else %}
          
            {% for product in settings.cart_upsell_products %}
              {% unless cart_product_ids contains product.id %}
                

                  

                    

                      
                        
                      
                    

                    
                      

                        {{ product.title }}
                      

                      

{{ product.price | money }}

                      
                    

                  

                

              {% endunless %}
            {% endfor %}
          

        {% endif %}
      

    {% endif %}
  {% endif %}
1 Like
4

thank you so much!