Why isn't my sort label updating automatically in Javascript?

Technical Q&A
1

Hi all!

I know close to nothing when it comes to Javascript, and I feel like JS is part of the issue I’m having.

I’m using an existing theme. I need to add sorting to a collection (product listing) layout which didn’t come with sorting. I copied the sorting bar from one collection layout to this one.

The sorting feature functions well, but, the label (which says at top after sorting) doesn’t update. If I refresh, the proper label does show. My issue is how to make the label update on change.

Current code:

{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% assign product_per_page = cart.attributes.pagination %}
{% else %}
{% assign product_per_page = section.settings.collection_results_per_page %}
{% endif %}

{% paginate collection.products by product_per_page %}

{% comment %} START OF SORT {% endcomment %} 

{%- liquid
  assign blocks = section.blocks | where: 'type', 'sidebar'
    assign block = blocks[0]
    assign currencies_using_comma_decimals = 'ANG,ARS,BRL,BYN,BYR,CLF,CLP,COP,CRC,CZK,DKK,EUR,HRK,HUF,IDR,ISK,MZN,NOK,PLN,RON,RUB,SEK,TRY,UYU,VES,VND' | split: ','
    assign uses_comma_decimals = false
    if currencies_using_comma_decimals contains cart.currency.iso_code
      assign uses_comma_decimals = true
    endif
-%}
       
  

    
    

      
        
      
      
        {{ 'collections.sidebar.sidebar_more' | t }}
      
    

    {% if section.settings.view_as_enable %}
    
      

      

        
        
        
        
        
      
 
    

    {% endif %}
  

       
  {% if section.settings.sort_enable or section.settings.limited_view %}
  
    {% if section.settings.limited_view %}
    
    

      

      

        

            
            {% if cart.attributes.pagination != blank and cart.attributes.pagination %}
                {{ cart.attributes.pagination }}
            {% else %}
                {{ section.settings.collection_results_per_page }}
            {% endif %}
            

            
                
            
        

        
          - 12
            
          

          - 16
            
          

          - 20
            
          

          - 24
            
          

          - 30
            
          

          - 50
            
          
        

      

    

    {% endif %}
        
    {% if section.settings.sort_enable %}
    
      
          {% if settings.layout_style == 'layout_style_fullwidth' and settings.category_layout == 'no_sidebar' %}
          
            
          
          {% endif %}
          {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
         
          

            {% if block.settings.filter_option == 'tag' %}
              {% render 'toolbar-tag', block: block, sort_by: sort_by %}
            {% else %}
              {% render 'toolbar-dynamic', block: block, sort_by: sort_by, uses_comma_decimals: uses_comma_decimals %}
            {% endif %}
          

    

    {% endif %}
  

  {% endif %}

{% comment %}END OF SORT {% endcomment %} 

    

        
  
            

                {% if collection.products_count > 0 %}  
                

                    #### 
                        {% render 'multilang' with section.settings.pro_image %}
                            

                    #### 
                        {% render 'multilang' with section.settings.pro_name %}
                    

                    #### 
                        {% render 'multilang' with section.settings.pro_price %}
                    

                    #### 
                        {% render 'multilang' with section.settings.pro_quantity %}
                    

                    #### 
                        {% render 'multilang' with section.settings.pro_variant_options %}
                    
                

                
                
                    {% for product in collection.products %}
                    
   
                        {% render 'product-express-order-item', product: product %}
                    

                    {% endfor %}
                

                {% else %}
                    

                        {{ 'collections.general.no_matches' | t }}
                    

                {% endif %}
            

            {% if paginate.pages > 1 %}
            
                {% render 'pagination-page' paginate: paginate %}
            

            {% endif %}
        

    

     
 
{% endpaginate %}

I tried playing with the position of the code as well, without any luck. Please help! :slightly_smiling_face:

Melissa