Custom product filtering is not working properly.

kyorae
New Member
1 0 0

I've been trying to build this custom product filter without using an app. However, it hasn't been working properly. I use Boundless theme for the store. This is what I got so far. 

Screen Shot 2563-09-29 at 14.46.10.png

 The filters are by 'tags', 'product type' and 'vendor' respectively. The last box is product sorting.

1. How do I make this all three filters connected to one another? (Maybe make the first box filtered by collection?) Right now it seems like only filtered by 'product type' and 'vendor' are connected to each other.

2. When I use the filter, I can't go back to the the collection page where it displays all products. Is there anyway to fix it or maybe have a 'clear filter' button to start over?

3. About sorting, originally from the theme, they have so many options but how do I cut it down to only 2 options (sort by price 'Low to High' and 'High to Low')?

 

This is my code:

 

{% paginate collection.products by 25 %}

{%- if section.settings.collection_sort_enable or section.settings.collection_tags_enable -%}
  <div class="filter-bar action-bar-secondary">
    <div class="row">
        <div class="sort--by-tags col-3">
            <div class="wrap">
                {%- if section.settings.collection_tags_enable -%}
                <div class="action-bar-secondary__dropdown action-bar-secondary">
                    <label for="SortTags" class="label--hidden"></label>
                    <select name="SortTags" id="SortTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
                    {%- if current_tags -%}
                        <option value="{{ collection.url }}">{{ 'collections.general.all_tags' | t }}</option>
                    {%- else -%}
                        <option value="">{{ 'collections.general.all_tags' | t }}</option>
                    {%- endif -%}
                    {%- for tag in collection.all_tags -%}
                        {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
                        <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                    {%- endfor -%}
                    </select>
                </div>
                {%- endif -%}
            </div>
        </div>
        <div class="sort--by-types col-2">
            <div class="wrap">
                <h3>{{ 'collections.general.sort_type' | t }}</h3>
                <div class="action-bar-secondary__dropdown action-bar-secondary">
                    <select onchange="window.location = this.options[this.selectedIndex].value;">
                        {% assign typeList = '' %}
                        {% for product in collection.all_products %}
                        {% capture compareType %}{{ product.type }}{% endcapture %}
                        {% if typeList contains compareType %}{% else %}
                        <option value="{{ product.type | url_for_type }}">{{ product.type }}</option>
                        {% capture tempList %}{{ typeList }}{{product.type}}{% endcapture %}
                        {% assign typeList = tempList %}
                        {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        <div class="sort--by-brands col-2">
            <div class="wrap">
                <h3>{{ 'collections.general.sort_brands' | t }}</h3>
                <div class="action-bar-secondary__dropdown action-bar-secondary">
                    <select onchange="window.location = this.options[this.selectedIndex].value;">
                        {% assign vendorList = '' %}
                        {% for product in collection.all_products %}
                        {% capture compareVendor %}{{ product.vendor }}{% endcapture %}
                        {% if vendorList contains compareVendor %}{% else %}
                        <option value="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</option>
                        {% capture tempList %}{{ vendorList }}{{product.vendor}}{% endcapture %}
                        {% assign vendorList = tempList %}
                        {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
        <div class="sort--by-price col-2">
            <div class="wrap">
                <h3>{{ 'collections.general.sort_price' | t }}</h3>
                {%- if section.settings.collection_sort_enable and collection.products.size > 1 -%}
                <div class="action-bar-secondary__dropdown action-bar-secondary">
                    <label for="SortBy" class="label--hidden">{{ 'collections.sorting.title' | t }}</label>
                    <select name="sort_by" id="SortBy" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-value="{{ collection.sort_by | default: collection.default_sort_by | escape }}">
                    {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
                    {%- endfor -%}
                    </select>
                </div>
                {%- endif -%}
            </div>
        </div>
        <div class="sort--item-count col-3">
            <div class="wrap">
                <div>{{ 'collections.general.showing' | t }}</div>
                <h3>{{ collection.all_products_count }} products</h3>
            </div>
        </div>
    </div>
  </div>
{%- endif -%}

{% comment %}
  Set grid item widths based on settings
{% endcomment %}

{% include 'product-grid-width' with product_image_type: section.settings.product_image_type, product_image_size: section.settings.product_image_size %}

<div class="grid collection-grid grid--uniform" data-section-id="{{ section.id }}" data-section-type="collection-template-section" data-sort-enabled="{{ section.settings.collection_sort_enable }}" data-tags-enabled="{{ section.settings.collection_tags_enable }}">
  {% for product in collection.products %}
    {% assign price = product.price | money_without_trailing_zeros %}
    {% include 'product-grid-item' with product_image_spacing: section.settings.product_image_spacing, vendor_enable: section.settings.vendor_enable %}
  {% else %}
    {% comment %}
      Add default products to help with onboarding for collections/all only.

      The onboarding styles and products are only loaded if the
      store has no products.
    {% endcomment %}
    {% if collection.handle == 'all' %}
      <div class="grid__item">
        <div class="helper-section">
          <div class="grid grid--uniform grid--no-gutters helper-content">
            {% assign collection_onboarding_index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_onboarding_index = 1 %}
                {% when 8 %}
                  {% assign collection_onboarding_index = 2 %}
              {% endcase %}
              <div class="product-item grid__item {{ grid_item_width }}">
                <a class="product-item__link" href="/admin/products">
                  {{ 'product-' | append: collection_onboarding_index | placeholder_svg_tag: 'product-item__image icon icon--placeholder' }}
                  <span class="product-item__meta">
                    <span class="product-item__meta__inner">
                      <p class="product-item__title">{{ 'homepage.onboarding.product_title' | t }}</p>
                      <p>$19.99</p>
                    </span>
                  </span>
                </a>
              </div>
              {% assign collection_onboarding_index = collection_onboarding_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      {% comment %}
        If collection exists but is empty, display message
      {% endcomment %}
      <div class="grid__item text-center">
        <p>{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}
  {% endfor %}
</div>

{% if paginate.pages > 1 %}
  {% if section.settings.pagination_type == 'numbers' %}
    {% include 'pagination' %}
  {% else %}
    <div class="pagination--infinite">
      <a href="{{ paginate.next.url }}" class="btn js-show-more">{{ 'collections.general.show_more' | t }}</a>
    </div>
  {% endif %}
{% endif %}

{% endpaginate %}

 

Thanks in advance!

0 Likes