Collection Tags filter on non Collection Pages.

Shopify Partner
3 0 0

I may have just overlooked it but I can seem to find  (if any) a way to add a collection filter to my search page.

I just want to give my customers additional ways they may decide they want after searching a product.

using

{% include 'collection-tags' %} 

doesn't show anything but

{% include 'collection-sorting' %} 

will show the collection sorting with  newest to oldest and a -z etc .

Can anyone tell me why the tag's filter wont work ?

0 Likes
Shopify Expert
354 0 34

on each page you have access to only certain variables.  For example, on a collection page, you have access to {{ collection.products }}  and on that page the 'collection' means the collection of that page.  On a product page, you have access to {{ product.title }} and on that page the 'product' means the product of that page.  If you think about it... it's too magical, surely there are some steps being shortcutted.  This is basically true.

On any page you can acccess any collection, and set it as a variable for that page, by using the {{ collections[handle].products }}  (note plural collections instead of collection).... So on a page like Product, which does not have a magical {{ collection.foo }} object to tap into, you can create one like this:

{% assign collection = collections["summer-dresses"] %}

{% for prod in collection.products %}
this should be a loop having things like {{ prod.type }} and {{ prod.vendor }}
{% endfor %}

Because our example was on the product page, we use "prod" in our forloop instead of "product" since we have a global {{ product }} already on that page.

See what the global/default obejct for search is here https://docs.shopify.com/themes/development/templates/search-liquid

{% for item in search.results %}

See here at the top of the collections and products columns the access to storewide object

http://cheat.markdunkley.com/

0 Likes
Shopify Expert
354 0 34

Now, you have to be conscious of variable assignment -- because the {% include %}s that you mention above probably have liquid tags and depend on things like {{ product. }} or  {{collection. }}.  So if you assign the global collection to the variable "coll" then you would access it by {{ coll. }} and in the include when it tried to find {{ collection. }} it wouldn't be able to find anything.  You can see about passing a variable into your include, or you can simply be careful about your variable assignment so that if you're going to use the 'collection-listing' include, and that snippet looks for things like {{ collection. }} then you should be sure before that include to assign your collections["some-hand"] to "collection"

0 Likes
Shopify Partner
3 0 0

Thank you for your in depth reply I will apply this and report back .

 

0 Likes
Highlighted
New Member
5 0 0

Hi,

Please help me on this.

Collection Tags not working on the index page.

here is the code:

{% include 'banner1' %}

{% assign collection = collections.advanced-themes %}

<!--Filter product tags-->

<div class="clearfix page-width">
<ul class="subnav">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>
  
</div>

<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a {
    background: #f7f7f7;
    margin: 0 7px 7px 0;
    display: block;
    padding: 25px 20px 25px 20px;
    text-decoration: none;
    color: #454545;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Conv_ProximaNova-Reg', Arial;
    letter-spacing: .5px;
    cursor: pointer;
}
.subnav li a:hover, .subnav li.active a {
  background: #1c5089;
  color: #fff;
}
</style>


{% paginate collection.products by 100 %}


<div class="page-width">

  <header class="grid medium-up--grid--table section-header small--text-center">
    <div class="grid__item medium-up--one-half section-header__item">
      <h1 class="section-header__title">
        
        {% if current_tags %}
          &ndash; {% assign title_tags = current_tags | join: ', ' %}
          {{ title_tags }}
        {% endif %}
      </h1>
      {% if collection.description != blank %}
        <div class="section-header__subtext rte">
        </div>
      {% endif %}
    </div>
    <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
      {% section 'collection-filters' %}
    </div>
  </header>

  <div class="grid grid--no-gutters grid--uniform">

    {% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-fifth">
        {% include 'product-card', product: product %}
      </div>
    {% 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 shop.products_count == 0 %}
        <div class="grid__item">
          <div class="grid grid--no-gutters grid--uniform">
            {% assign collection_index = 1 %}
            {% for i in (1..10) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_index = 1 %}
                {% when 8 %}
                  {% assign collection_index = 2 %}
                {% when 9 %}
                  {% assign collection_index = 3 %}
                {% when 10 %}
                  {% assign collection_index = 4 %}
              {% endcase %}
              <div class="grid__item small--one-half medium-up--one-fifth">
                <a href="/admin/products" class="product-card">
                  <div class="product-card__image-wrapper">
                    <div class="product-card__image">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                    </div>
                  </div>
                  <div class="product-card__info">
                    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                    <div class="product-card__price">
                      $19.99
                    </div>
                  </div>
                  <div class="product-card__overlay">
                    {% assign view_string_length = 'products.product.view' | t | size %}
                    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                  </div>
                </a>
              </div>
              {% assign collection_index = collection_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        {% comment %}
          If collection exists but is empty, display message
        {% endcomment %}
        <div class="grid__item small--text-center">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}


    {% if settings.collections_tags_enable %}
      {% include 'collection-tags' %}
    {% endif %}
    {% if settings.collections_sort_enable %}
      {% include 'collection-sorting' %}
    {% endif %}
       
 {{ content_for_index }}

 

 

0 Likes