Checkbox Filtering

Solved
New Member
3 0 0

I'm working on our filter feature on our store but I am having trouble having the filter feature work with a checkbox. I've found that our current theme uses the {{ tag | link_to_add_tag: tag }} and {{ tag | link_to_remove_tag: tag }} in which adds and removes filters using Shopify's URL filters. However, because of this, when I added the checkbox, there is no real way to link it to those tags (which will load as an anchor tag). Does anyone have any idea of how to go about connecting the checkbox with the tag?

 

I thought about having JS that loads the new page onClick of the checkbox, however, having trouble pulling the href link from the URL filters to have it work properly.

Here is the snippet of code I have currently:

{% if current_tags contains tag %}
             <li data-variant-image="{{ variant_image_url }}" class="current">
               <label>
                 <input  class="filter_checkbox coll-filter" id="checked" type="checkbox" checked onClick="">
                   {% if is_color %}
                     <span style="background-color: {{ css_color }}; background-image: url('{{ swatch_image_url }}');" class="color_filter"></span>
                   {% endif %}
                   {{ tag | link_to_remove_tag: tag }}
               </label>
            </li>
          {% elsif collection.all_tags contains tag %}
            <li data-variant-image="{{ variant_image_url }}">
              <label>
                <input  class="filter_checkbox coll-filter" id="unchecked" type="checkbox" onClick="">
                {% if is_color %}
                  <span style="background-color: {{ css_color }}; background-image: url('{{ swatch_image_url }}');" class="color_filter"></span>
                {% endif %}
                {{ tag | link_to_add_tag: tag }}
              </label>
            </li>
          {% endif %}

This snippet of code is a loop that displays a list of the tags. Not sure if I'm going about it the right way with JS

var checkboxFilters = jQuery('.checkbox-filter');
       checkboxFilters.change(function(){
         if(document.getElementByClassName('checkbox-filter').checked){
           window.location='{{ tag | link_to_add_tag: tag}}.getAttribute("href")';
           return false;
         } else{
           window.location='{{ tag | link_to_remove_tag: tag}}.getAttribute("href")';
           return true;
         }
       });

Any help would be appreciated! Thanks! (Current website is Shany Cosmetics. If you go to any collections, you will see the checkbox for the filter does not work but the actual text link works)

 

0 Likes
Highlighted

Success.

Shopify Partner
2522 25 538

I guess it should be like this, since you already have proper url in the next element:

 $('.checkbox-filter').off().change( function(){
   	var newURL = $(this).nextAll('a').attr('href');
   	window.location.href = newURL;
   });
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
New Member
3 0 0

I couldn't figure out how to refer only to the following anchor tag to pull that attribute. That script worked like a charm! Thanks Tim! 

-Peter

0 Likes
New Member
1 0 0

hi, 

 

where did you add the code?? I'm trying to also implement a sidebar checkbox filtering function to my website but no idea how to do it, 

 

any help would be very much appreciated, 

 

thank you 

0 Likes