Brooklyn tamplate tag issue: collections/all/ vs. ?constraint=

Highlighted
New Member
11 0 0

Hi,

My issue relates to the way tags work on Brooklyn template with my design (with {% assign collection = collections.all %}
{% include 'collection-template' %} as an index page). The tags ceased to work and insteat of refering to collection/all/... that use ?constraint=, which gives no result after clicking. Strangely, when you click "All" first, they start working properly!

 

Any suggestions?

Best,

Bartek

http://sklep.acephalafashion.com/ ;

 

0 Likes
Highlighted
Shopify Expert
195 0 25

This a little strange. The link on your homepage is wrong but the same link on your collections page is correct.

Here are the two links (ALL and SPODNIE) on the home page. 

Here they are on the collections page. 

Look in your theme and see what the collections page is doing right. One issue might be certain variables are not avilable on the home page that are avilable on the collections page. 

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
New Member
11 0 0

Now with more tags added, the same happens. And you are right it works well on Collection page but not on the homepage!

0 Likes
Highlighted
Shopify Expert
195 0 25

Please post the code that displays all of these collections. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
New Member
11 0 0

This is the collection.liquid

<!-- /templates/collection.liquid -->

{% include 'collection-template' %}

 

And the collection-template.liquid

{% comment %}
  Collection template, used on collection.liquid and collection.image.liquid
{% endcomment %}

{% paginate collection.products by 50 %}

<header class="section-header text-center">
  <h1>{{ collection.title }}</h1>
  <hr class="hr--small">
  {% if collection.description != blank %}
    <div class="grid">
      <div class="grid__item">
        <div class="rte">
          {{ collection.description }}
        </div>
      </div>
    </div>
  {% endif %}

  {% if settings.collection_tags_enable %}
    {% if collection.all_tags.size > 0 %}
      {% comment %}
        To provide a 'catch-all' link at the top of the list,
        check against the collection.handle, product type, and vendor.
      {% endcomment %}
      <ul class="tags tags--collection inline-list">
        <li{% unless current_tags %} class="tag--active"{% endunless %}>
          {% comment %}
            Good for /collections/all collection and regular collections
          {% endcomment %}
          {% if collection.handle %}
            <a href="/collections/{{ collection.handle }}">
              {{ 'collections.general.all_of_collection' | t }}
            </a>

          {% comment %}
            Good for automatic type collections
          {% endcomment %}
          {% elsif collection.current_type %}
            <a href="{{ collection.current_type | url_for_type }}">
              {{ 'collections.general.all_of_collection' | t }}
            </a>

          {% comment %}
            Good for automatic vendor collections
          {% endcomment %}
          {% elsif collection.current_vendor %}
            <a href="{{ collection.current_vendor | url_for_vendor }}">
              {{ 'collections.general.all_of_collection' | t }}
            </a>
          {% endif %}
        </li>

        {% for tag in collection.all_tags %}
          {% if current_tags contains tag %}
            <li class="tag--active">
              {{ tag | link_to_remove_tag: tag }}
            </li>
          {% else %}
            <li>
              {% comment %}
                Use link_to_add_tag if you want to allow filtering
                by multiple tags
              {% endcomment %}
              {{ tag | link_to_tag: tag }}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  {% endif %}

  {% if settings.collection_tags_enable %}
    <hr class="hr--small hr--clear">
  {% endif %}
</header>

{% if settings.collection_products_grid == 'collage' %}
  <div class="grid grid-collage">
    {% comment %}
      Loop through our products in the current collection.
      See the snippet 'snippets/product-grid-collage.liquid'.

      `is_reverse_row__product`, `three_row_index__product`, `collection_product_count`, and `divisible_by_three__product` are
      all used by 'snippets/product-grid-collage.liquid'
    {% endcomment %}
    {% assign is_reverse_row__product = false %}
    {% assign three_row_index__product = 0 %}
    {% assign collection_product_count__product = collection.products_count %}
    {% assign divisible_by_three__product = collection_product_count__product | modulo:3 %}
    {% for product in collection.products %}
      {% include 'product-grid-collage' %}
    {% else %}

      {% if collection.handle == 'all' %}

        {% comment %}
          Add default products to help with onboarding for collections/all only
        {% endcomment %}
        {% unless emptyState %}
          {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
          {% assign emptyState = true %}
        {% endunless %}

        {% include 'onboarding-empty-collection' %}

      {% 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>
{% elsif settings.collection_products_grid == 'grid' %}
  <div class="grid-uniform">
    {% assign grid_item_width = 'medium--one-half large--one-third' %}
    {% for product in collection.products %}
      {% include 'product-grid-item' %}
    {% else %}
      {% if collection.handle == 'all' %}
        {% comment %}
          Add default products to help with onboarding for collections/all only
        {% endcomment %}
        {% unless emptyState %}
          {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
          {% assign emptyState = true %}
        {% endunless %}

        {% include 'onboarding-empty-collection' %}

      {% 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>
{% endif %}


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

{% endpaginate %}

 

Finally

index.liquid

<!-- /templates/index.liquid -->
{% assign collection = collections.all %}
{% include 'collection-template' %}

 

0 Likes
Highlighted
Shopify Expert
195 0 25

Alright I think you are getting the ?constraint=sometag because this is how tags are used on non collection pages. I have two options for you.

1. Redirect you home page to /collections/all. This way you will always be on the all collection page which is pretty much what your homepage is. 

2. Hard code the tag links. The liquid filter link_to_tag is being too clever for us so replace this

        {% for tag in collection.all_tags %}
          {% if current_tags contains tag %}
            <li class="tag--active">
              {{ tag | link_to_remove_tag: tag }}
            </li>
          {% else %}
            <li>
              {% comment %}
                Use link_to_add_tag if you want to allow filtering
                by multiple tags
              {% endcomment %}
              {{ tag | link_to_tag: tag }}
            </li>
          {% endif %}
        {% endfor %}

With this

        {% for tag in collection.all_tags %}
          {% if current_tags contains tag %}
            <li class="tag--active">
              <a title="Remove tag {{ tag }}" href="/collections/all/{{ tag | downcase}}">{{ tag }}</a>
            </li>
          {% else %}
            <li>
              <a title="Show products matching tag {{ tag }}" href="/collections/all/{{ tag | downcase}}">{{ tag }}</a>
            </li>
          {% endif %}
        {% endfor %}

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
1 Like
Highlighted
New Member
11 0 0

Looking forward to try the second solution! Yet where do I find this tag links code fragment?

0 Likes
Highlighted
Shopify Expert
195 0 25

It is in the collection-template.liquid​ code you posted. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
New Member
11 0 0

Sure! 

It works as it should. Thanks a lot for your support!

0 Likes
Highlighted
Shopify Expert
195 0 25

No Problem.

Looks like you are missign a translation. Update the translation or change your theme by replacing these lines in collection-template.liquid

{{ 'collections.general.all_of_collection' | t }}

With this

{{ collection.title }}
Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes