Change option val to click when using tag-filters

New Member
5 0 0

I have a piece of code that allows me to filter using tags with option value.

I would like to change to a list item and not use

the default select menu.

What I have works but returns all my tags when clicking the list item button:

"white+white+grey+grey+blue+blue+black+black"

This is the code I had for using option value.

 

<div class="clearfix filter">
                {% assign tags = 'White, Grey, Tan, Neutral, Blue, Black' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
                <p>Filter Color</p>
                 <div id="dd" class="mywrap-dropdown-2" tabindex="2">Select
                        <select class="coll-filter special-select">
                  <option value="">All</option>
                  {% for tag in tags %}
                  {% if current_tags contains tag %}
                  <option value="{{ tag | handle }}" selected>{{ tag }}</option>
                  {% elsif collection.all_tags contains tag %}
                  <option value="{{ tag | handle }}">{{ tag }}</option>
                  {% endif %}
                  {% endfor %}
                </select>
                    </div>   
            </div>


var allFilters = jQuery('.coll-filter');
 allFilters.change(function() {
 var newTags = [];
jQuery('.coll-filter').each(function() { 
  if (jQuery(this).val()) {
    newTags.push(jQuery(this).val());
  }
});
if (newTags.length) {
  var query = newTags.join('+');
  window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', 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 %}

}
 });

 

 

0 Likes
New Member
5 0 0

Bump! Anyone???

0 Likes
Shopify Staff
Shopify Staff
5826 0 274

You grab all tags, not just the selected ones. Seems like you need something like this:

jQuery('#coll-filter li a.selected').each(function() { 
  if (jQuery(this).attr('href')) {
  newTags.push(jQuery(this).attr('href'));
}
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

Thanks for the response Caroline :) That returns just the tag after the collection I am in, which results to "page not found"

Here is the output of the url for using the "selected" class

http://mydomain.com/collections/white

Essientially, I'm just using what you wrote and configuring for "click" instead of using the option val()

 

0 Likes
Shopify Staff
Shopify Staff
5826 0 274

That code can only work on collection pages. Have you placed it on collection pages only?

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

Yes, It's only on my collection pages. The option val block you wrote works great!!! My situation requires a custom menu using click instead of option val

<div id="dd" class="mywrap-dropdown-2" tabindex="2">Select
                        <ul class="dropdowner" id="coll-filter">
                            <li><a href="">All</a></li>
                            {% for tag in tags %}
                          {% if current_tags contains tag %}
                          <li><a href="{{ tag | handle }}" class="selected">{{ tag }}</li>
                          {% elsif collection.all_tags contains tag %}
                          <li><a href="{{ tag | handle }}">{{ tag }}</li>
                          {% endif %}
                          {% endfor %}
                        </ul>
                    </div>  

0 Likes
New Member
5 0 0

NM

0 Likes
Highlighted
Shopify Partner
22 0 3

i'm trying to do something similar, but using 'data-value' in my li elements (instead of href).  using the .selected class just gets me the currently selected.  when i drop the each() function, it seems to clear out the array, so it doesn't do any joining... 

 

  /* Product Tag Filters - Good for any number of filters on any type of collection pages */

  /* Brought to you by Caroline Schnapp */

  var collFilters = jQuery('.coll-filter').find('li');

  collFilters.click(function() {

    var newTags = [];

    collFilters.find('.selected').each(function() { 

    if (jQuery(this).data('value')) {

      newTags.push(jQuery(this).data('value'));

    }

    });

    if (newTags.length) {

      var query = newTags.join('+');

      window.location.href = jQuery('{{ '0my-tag0' | link_to_tag: '0my-tag0' }}').attr('href').replace('0my-tag0', 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 %}

    }

  });

 

0 Likes