Standalone code for collection filter in Shopify 2.0

[alexmorris]

I want to build a totally bespoke (clean) theme for 2.0, but would be great to tap into the new collection filtering without having to write it all from scratch. Does anyone know of any barebones 2.0 themes or even liquid snippets to handle this? 

[Anonymous]

Hey you're in luck @alexmorris :

<form class="filter-form">
  {%- for filter in collection.filters -%}
    <details class="filter-group">
      <summary class="filter-group-summary">
        <div>
          <span>{{ filter.label }}</span>

          {%- if filter.active_values.size > 0 -%}
            <span>({{ filter.active_values.size }})</span>
          {%- endif -%}
        </div>
      </summary>

      <div class="filter-group-display">
        <div class="filter-group-display__header">
          <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>

          {%- if filter.active_values.size > 0 -%}
            <a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
          {%- endif -%}
        </div>

        {%- case filter.type -%}
          {%- when 'boolean' or 'list' -%}
            <ul class="filter-group-display__list">
              {%- for filter_value in filter.values -%}
                <li class="filter-group-display__list-item">
                  <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                  <input type="checkbox"
                    name="{{ filter_value.param_name }}"
                    value="{{ filter_value.value }}"
                    id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                    {% if filter_value.active -%}checked{%- endif %}
                    {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                  >{{ filter_value.label }}</label>
                </li>
              {%- endfor -%}
            </ul>

            <div class="filter-group-display__submit">
              <input type="submit" value="Apply">
            </div>
          {%- when 'price_range' -%}
            <div class="filter-group-display__price-range">
              <div class="filter-group-display__price-range-from">
                <span>{{ cart.currency.symbol }}</span>

                <input name="{{ filter.min_value.param_name }}"
                  id="Filter-{{ filter.min_value.param_name }}"
                  {% if filter.min_value.value -%}
                    value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
                  {%- endif %}
                  type="number"
                  placeholder="0"
                  min="0"
                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                >

                <label for="Filter-{{ filter.min_value.param_name }}">From</label>
              </div>
              <div class="filter-group-display__price-range-to">
                <span>{{ cart.currency.symbol }}</span>

                <input name="{{ filter.max_value.param_name }}"
                  id="Filter-{{ filter.max_value.param_name }}"
                  {% if filter.max_value.value -%}
                    value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
                  {%- endif %}
                  type="number"
                  placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                  min="0"
                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                >

                <label for="Filter-{{ filter.max_value.param_name }}">To</label>
              </div>
            </div>

            <div class="filter-group-display__submit">
              <input type="submit" value="Apply">
            </div>
        {%- endcase -%}
      </div>
    </details>
  {%- endfor -%}

  <div class="active-filters">
    <a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="active-filters__clear">Clear all</a>

    {%- for filter in collection.filters -%}
      {%- if filter.type == "price_range" -%}
        {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
          <a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
            {%- assign min_value = filter.min_value.value | default: 0 -%}
            {%- assign max_value = filter.max_value.value | default: filter.range_max -%}
            {{ min_value | money }} - {{ max_value | money }} X
          </a>
        {%- endif -%}
      {%- else -%}
        {%- for filter_value in filter.active_values -%}
          <a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
            {{ filter.label }}: {{ filter_value.label }} X
          </a>
        {%- endfor -%}
      {%- endif- %}
    {%- endfor -%}
  </div>
</form>

 That should work when adding it to a collection page.

I got this from the Shopify dev docs. Search "Support storefront filtering" on the Shopify dev docs. There you will find 2 examples of storefront filtering code - this is the first 1.

Hope this helps

[alexmorris]

Thats awesome! do you happen to have the link to that dev page? Searching isn't showing any example code 😞 

[Anonymous]

Hey @alexmorris I would have sent the link but not sure whether the community mods are against sending link. But to be fair it is only to the shopify docs so here you go: https://shopify.dev/docs/themes/navigation-search/filtering/storefront-filtering/support-storefront-...

[dangkhiem]

Thanks for your sharing, it helped me a lot.
My theme has built-in filters by price, product type, and brand. However, the price filter on my theme uses a slider, I don't like that so I found a way to replace the slider with an input box.
I was able to do that thanks to the documentation you shared, however I wanted the filter to work as soon as the customer enters the amount in the "from" box without having to click the "Apply" button. Can you help me do it? Thank!

[SanrieW]

Hey guys, I wonder if you can help me.

I am using Craft version 13.0.1 on my Shopify store and have the Search and Desicover app installed.

All works fine except for the availability filter. On my store all the products are available, but not all are in stock. Thus I need to filter on in-stock items and not available items. Is there anyway around the availability? I have contacted Shopify, which reffered me to thirdparty developers, which seems to be all in a Asian country and does not understand what I am in need of. 

Any help would be apreciated.