Why custom script not being loaded when cart is updated

Shopify Discussion
,
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.

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 %}
4

thank you so much!