Location Tag Filtering on Brooklyn Theme

Solved
nicots
Excursionist
15 0 4

Hi there,

 

I'm trying to add a dropdown menu for the tag filtering on my Brooklyn theme.

I've added the below code (found on this link https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags) into the collection.liquid.

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %} {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %} {% endfor %}
  </select>
</div>

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  const collFilters = document.querySelectorAll('.coll-filter');

  if (collFilters.length > 0) {
    collFilters.forEach((collFilter) => {
      collFilter.addEventListener('change', function(){
        var newTags = [];
        collFilters.forEach((collFilter) => {
          for(var i = 0; i <= collFilter.length-1; i++){
            if(collFilter[i].selected == true && collFilter[i].value != "") {
              newTags.push(collFilter[i].value);
            }
          }
        });

        if (newTags.length) {
          var query = newTags.join('+');
          window.location.href = '/collections/{{ collection.handle }}/' + query;
        }
        else {
          {% if collection.handle %}
          window.location.href = '/collections/{{ collection.handle }}';
          {% elsif collection.products.first.type == collection.title %}
          window.location.href = '{{ collection.title | url_for_type }}';
          {% elsif collection.products.first.vendor == collection.title %}
          window.location.href = '{{ collection.title | url_for_vendor }}';
          {% endif %}
        }
      });
    });
  }
</script>

 

It works, but it appears under the products collection:

nicots_0-1614770959148.png

 

How can I move it to the top and put it next to the Sort by (and have everything on one line)?

nicots_1-1614771083434.png

 

Thanks in advnce

 

dmwwebartisan
Shopify Partner
5372 1238 1585

@nicots 

Please provide theme zip. I will check and give you solution here.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
nicots
Excursionist
15 0 4

Sent as PM, thanks

dmwwebartisan
Shopify Partner
5372 1238 1585

@nicots 

I will check and get back to you with a solution.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
nicots
Excursionist
15 0 4

Thank you so much

0 Likes
dmwwebartisan
Shopify Partner
5372 1238 1585

@nicots 

1] Remove following code in templates/collection.liquid file.

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %} {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %} {% endfor %}
  </select>
</div>

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  const collFilters = document.querySelectorAll('.coll-filter');

  if (collFilters.length > 0) {
    collFilters.forEach((collFilter) => {
      collFilter.addEventListener('change', function(){
        var newTags = [];
        collFilters.forEach((collFilter) => {
          for(var i = 0; i <= collFilter.length-1; i++){
            if(collFilter[i].selected == true && collFilter[i].value != "") {
              newTags.push(collFilter[i].value);
            }
          }
        });

        if (newTags.length) {
          var query = newTags.join('+');
          window.location.href = '/collections/{{ collection.handle }}/' + query;
        }
        else {
          {% if collection.handle %}
          window.location.href = '/collections/{{ collection.handle }}';
          {% elsif collection.products.first.type == collection.title %}
          window.location.href = '{{ collection.title | url_for_type }}';
          {% elsif collection.products.first.vendor == collection.title %}
          window.location.href = '{{ collection.title | url_for_vendor }}';
          {% endif %}
        }
      });
    });
  }
</script>

 

2] add following new code Snippets/collection-sorting.liquid file but before backup your file.

 

<div class="grid__item filter-dropdown__wrapper text-center collection-filters medium--one-whole large--one-whole" style="float:left;">
  <div class="grid__item filter-dropdown medium--one-half large--one-half">
    <label class="filter-dropdown__label" for="sortBy">
      <span class="filter-dropdown__label--title">{{ 'collections.sorting.title' | t }}</span>
      <span class="filter-dropdown__label--active"></span>
    </label>
    {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
    <select name="sort_by" id="sortBy" aria-describedby="a11y-refresh-page-message a11y-selection-message" class="filter-dropdown__select">
      {% for option in collection.sort_options %}
        <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
      {% endfor %}
    </select>
  </div>
  
  
  <div class="grid__item filter-dropdown medium--one-half large--one-half" style="float:right;">  
  <label class="filter-dropdown__label" for="sortBy">
      <span class="filter-dropdown__label--title">Filter by Category:</span>
      <span class="filter-dropdown__label--active"></span>
  </label>  
  <select class="filter-dropdown__select">
    <option value="">All</option>
    {% for tag in collection.all_tags %} {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %} {% endfor %}
  </select>
  </div> 
  
  
  
</div>


<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  const collFilters = document.querySelectorAll('.coll-filter');

  if (collFilters.length > 0) {
    collFilters.forEach((collFilter) => {
      collFilter.addEventListener('change', function(){
        var newTags = [];
        collFilters.forEach((collFilter) => {
          for(var i = 0; i <= collFilter.length-1; i++){
            if(collFilter[i].selected == true && collFilter[i].value != "") {
              newTags.push(collFilter[i].value);
            }
          }
        });

        if (newTags.length) {
          var query = newTags.join('+');
          window.location.href = '/collections/{{ collection.handle }}/' + query;
        }
        else {
          {% if collection.handle %}
          window.location.href = '/collections/{{ collection.handle }}';
          {% elsif collection.products.first.type == collection.title %}
          window.location.href = '{{ collection.title | url_for_type }}';
          {% elsif collection.products.first.vendor == collection.title %}
          window.location.href = '{{ collection.title | url_for_vendor }}';
          {% endif %}
        }
      });
    });
  }
</script>

Hope this works.


Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
nicots
Excursionist
15 0 4

Hi,

Wow my friend! Thanks!

It does look exactly the way I wanted, however, when I select the tag in the dropdown menu, it does not filter the items (basically it does nothing).

I tried the sort by and it works though...

 

Thanks again

0 Likes
dmwwebartisan
Shopify Partner
5372 1238 1585

This is an accepted solution.

@nicots 

Please remove previous code and add following  new code Snippets/collection-sorting.liquid file.

<div class="grid__item filter-dropdown__wrapper text-center collection-filters medium--one-whole large--one-whole" style="float:left;">
  <div class="grid__item filter-dropdown medium--one-half large--one-half">
    <label class="filter-dropdown__label" for="sortBy">
      <span class="filter-dropdown__label--title">{{ 'collections.sorting.title' | t }}</span>
      <span class="filter-dropdown__label--active"></span>
    </label>
    {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
    <select name="sort_by" id="sortBy" aria-describedby="a11y-refresh-page-message a11y-selection-message" class="filter-dropdown__select">
      {% for option in collection.sort_options %}
        <option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
      {% endfor %}
    </select>
  </div>
  
  
  <div class="grid__item filter-dropdown medium--one-half large--one-half" style="float:right;">  
  <label class="filter-dropdown__label" for="sortBy">
      <span class="filter-dropdown__label--title">Filter by Category:</span>
      <span class="filter-dropdown__label--active"></span>
  </label>  
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %} {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %} {% endfor %}
  </select>
  </div> 
  
  
  
</div>


<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  const collFilters = document.querySelectorAll('.coll-filter');

  if (collFilters.length > 0) {
    collFilters.forEach((collFilter) => {
      collFilter.addEventListener('change', function(){
        var newTags = [];
        collFilters.forEach((collFilter) => {
          for(var i = 0; i <= collFilter.length-1; i++){
            if(collFilter[i].selected == true && collFilter[i].value != "") {
              newTags.push(collFilter[i].value);
            }
          }
        });

        if (newTags.length) {
          var query = newTags.join('+');
          window.location.href = '/collections/{{ collection.handle }}/' + query;
        }
        else {
          {% if collection.handle %}
          window.location.href = '/collections/{{ collection.handle }}';
          {% elsif collection.products.first.type == collection.title %}
          window.location.href = '{{ collection.title | url_for_type }}';
          {% elsif collection.products.first.vendor == collection.title %}
          window.location.href = '{{ collection.title | url_for_vendor }}';
          {% endif %}
        }
      });
    });
  }
</script>

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
nicots
Excursionist
15 0 4

My friend, it works like a charm! Thank you so much!