Need help with a little coding for collection filtering

DaisyMae
Tourist
5 0 6

Hello! My name is Lori, I am familiar with reading various coding languages as well as development in general, but I'm not familiar enough with writing Ruby and Liquid to know how to fix this thing that's happening with our theme. (Most of my developer experience is with WordPress.)

So here's the scenario. On our collection pages, our theme allows us to set up filters based on various fields. We can set up filters for the fields Vendor, Type, Color, and then "other" (note that the Price field is not a filterable option in this theme). This "other" is the tag field, so basically we can set up and filter by any tags we want.

The problem is that the theme is taking all selected tags from the filtering box and stringing them all together and then returning the results, rather than looping through the selected tags one by one to display one set of results at a time. For example, we have used this to set up a filter by price field with values like $1-$200, $201-$500 etc.. If you select just one value, the products with that tag will show. If you select a 2nd value, no products will show because no products have more than one price-based tag on them.

We are also using the filter by vendor feature (we're calling it 'filter by brands'). In this filter, the products returned will change based on what filter is selected, and only one filter can be selected at a time. We would like it if the filter by tags option would do the same thing. Or, if that's not possible, we'd like it if the system would return results based on this tag OR that tag OR that tag, so that if more than one price is selected, more than one set of price ranges will show.

Here is a link where you can view the behavior I'm referring to - https://tmc.redemsong.org/collections/acoustic-guitars

Click around the 'Filter by Brands' and the 'Filter by Price' options to see what I mean.

Here are the applicable code snippets from the snippets/collection-filter.liquid file:

Filter by Vendor

 

{%- elsif block.settings.type == "vendor" -%}
      <div class="layout-sidebar-content-inner ">
        <ul class="{{ block.settings.type }} no-bullet">
          {%- for product_vendor in collection.all_vendors -%}
            {%- assign product_vendor_downcase = product_vendor | downcase -%}
            <li class="collection-filter-list{% if collection.current_vendor == product_vendor or collection.current_vendor == product_vendor_downcase %} active{% endif %}" data-collection-query-value="{{ product_vendor }}" data-collection-query="{{ product_vendor_downcase | remove: '"' }}">
              <div class="collection-filter-checker">
                <svg>
                  <use xlink:href="#icon-checker"/>
                </svg>
              </div>
              {{ product_vendor | link_to_vendor }}
            </li>
          {%- endfor -%}
        </ul>
      </div>

 

Filter by Price (tag):

    {%- else -%}
      <ul class="{{ block.settings.type }} no-bullet">
        {%- for tag in tags -%}
          {%- assign tag1 = tag | strip | strip_newlines -%}
          {%- if collection.tags contains tag1 -%}
          <li class="collection-filter-list{% if current_tags contains tag1 %} active{% endif %}" data-collection-filter-value="{{ tag1 }}" data-collection-filter="{{ tag | handle }}">
            <div class="collection-filter-checker">
              <svg>
                <use xlink:href="#icon-checker"/>
              </svg>
            </div>
            {{ tag | link_to_add_tag: tag }}
          </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
    {%- endif -%}

 

Is there anyone out there who can help me tweak this code so that the filter by price field works as described above? I'm not sure if there is another file I need to start with or if all work can be done right here. I appreciate anyone who can/will assist!

Thanks!

0 Likes