Ella theme - Size filters not working - HELP! ;)

Hi all!

I’m having a really hard time getting help from the Ella theme support team (anyone else having this experience?).

They dynamic size filters are not working. I know some code, but I’m not savvy enough to figure this one out.

User issue: As a user, when I click on size 2XG (Spanish site), the product grid still shows me styles that are not available in size 2XG. In fact, it still shows me all products.

Backend notes: It seems like the issue is that {{ value.count }} is the same (counts all products, not products available in the particular sizes) for all sizes. The interesting thing is that this code work for other filters. Only does not work for sizes.

Our variant is custom “talla”. I also tried using the Shopify variant “size” but that did not solve it.

Inspect screenshot:

Code:


  {% if settings.category_layout == "right_sidebar" or settings.category_layout == "express_order" or template.suffix == 'express-order' or settings.category_layout == "mansory" or template.suffix == 'mansory' or settings.category_layout == "full_with" or template.suffix == 'fullwidth' or template.suffix == 'right-sidebar' or settings.category_layout == "with_banner" or template.suffix == 'with-banner' %}
  
    {% render 'icon-close' %}    
  
  {% endif %}

  

    {% liquid
                      for filter in collection.filters
                        assign total_active_values = total_active_values | plus: filter.active_values.size
                        if filter.min_value.value != blank or filter.max_value.value != blank
                          if filter.min_value.value > 0 or filter.max_value.value < filter.range_max
                            assign total_active_values = 1
                            break
                          endif
                        endif
                      endfor
                    %}
    {% if total_active_values > 0 %}
    

      ### 
        
          {{ 'collections.sidebar.refined_by' | t }}           
        
        
          {{ 'collections.sidebar.clear_all' | t }}
        
      
    

    
      

        {%- for filter in collection.filters -%}
        {%- for value in filter.active_values -%}
        - {{ value.label | escape }}
            
          
        

        {%- endfor -%}

        {% if filter.type == "price_range" %}

        {% if filter.min_value.value > 0 or filter.max_value.value < filter.range_max %}
        {%- if filter.min_value.value != nil and filter.max_value.value != nil -%}
        - {%- if filter.min_value.value -%}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{%- endif -%}-{%- if filter.max_value.value -%}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{%- endif -%}
            
          
        
        {%- endif -%}
        {%- endif -%}

        {% endif %}
        {%- endfor -%}
      

    

    {% endif %}           
  

  {% if collection.current_vendor or collection.current_type %}
  
  {% endif %}
  {%- for filter in collection.filters -%}
  {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
  {% case filter.type %}
  {% when 'list' %}
  

    

      ### 
        {{ filter.label | escape }}
      
    

    
      

        {%- for value in filter.values -%}
        {% assign tag = value.value | strip %}
        {% assign tag_value = tag | handleize %} 
        - 10 %}style="display: none"{% endif %}>
          
            {% if style_color contains filter.label %}
          
            {% else %}
          
            {% endif %}
        

        {% if forloop.index == 11 %}
        - {{ 'general.sidebar.more' | t }}
        

        {% endif %}

        {% endfor %}

        {%- for option in collection.sort_options -%}
        {% if option.value == sort_by %}
        
        {% endif %}
        {% endfor %}

      

    

  

  {% when 'price_range' %}
  {% liquid
    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
  %}
  
    

      ### 
        {{ filter.label | escape }}
      
    

    
      

{% endcase %}
{%- endfor -%}

Where you can see live: https://acid.com.mx/collections/playeras-anime-videojuegos Try with size 2XG which we have less of. The 104 total t-shirt is correct.

Can someone save the day? :wink:

I appreciate any and all help. this is pretty time-sensitive.

Thanks!

Melissa

Hi @melpno7 ,

Seems like hello.js is causing some script error.

Hi @made4Uo ,

Interesting, I don’t see these errors on my end. Can you see more details as to what exactly is causing these errors? You’re seeing these from the console, right?

Melissa

Yes, when I click the buttons eye buttons. I am not sure if those buttons are written in the same group with the size button

I seem to have fixed the halo.js errors that you were seeing. Same behavior for the filters.

@melpno7 ,

You have me thinking the whole time. So that code you have filters by option. I do not think it filters by availability. I do not see this in your url “filter.v.availability=1”. So if you search this link below, it filters, availability.

https://acid.com.mx/collections/playeras-anime-videojuegos?filter.v.option.talla=2XG&sort_by=manual&filter.v.availability=1

@made4Uo

That link doesn’t filter for me (I get the same result). I think that’s the correct direction though. It is showing all products that have that sizing as a variant, regardless of the availability.

Just have to find how to make that URL work.

Hi @melpno7

The link filters the 2X and also the unavailability. It sort manually. You can check the params of the url. You just need to add the filter.v.availability=1 in one of your button or default url search

I think that will work. Thanks @made4Uo !

1 Like