Checkbox Filtering

Solved
Highlighted
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
Shopify Expert
2684 67 815

This is an accepted solution.

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? Like it!
I am away till Feb-15.
2 Likes
Highlighted
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
Highlighted
New Member
1 0 1

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 

1 Like
Highlighted
Explorer
88 7 18

@shortboipeter @tim 

Hey guys,

I try to implement the checkbox tag filter as well. My checkboxes don't react when activating or deactivating. There is also no difference if I put in shortbiopeter's JS code in my theme.liquid file (in  script tags above closing body tag).

It would be a great help if you could describe where to paste tim's JS code and how, in order to understand why my checkboxes do nothing. Just when clicking on the label I get the filter result.

My liquid code in my "collection-sidebar.liquid":

{% for tag in collection.all_tags %}
      {% if current_tags contains tag %}
             <li class="current">
               <label>
                 <input  class="filter_checkbox coll-filter" id="checked" type="checkbox" checked onClick="">         
                   {{ tag | link_to_remove_tag: tag }}
               </label>
            </li>
          {% elsif collection.all_tags contains tag %}
            <li>
              <label>
                <input  class="filter_checkbox coll-filter" id="unchecked" type="checkbox" onClick="">
                {{ tag | link_to_add_tag: tag }}
              </label>
            </li>
          {% endif %}
    {% endfor %}

Thank you guys!

0 Likes
Highlighted
Explorer
88 7 18

It works! Additionally to my last post I added following code at the bottom of my theme.js file:

$('.filter_checkbox').off().change( function(){
var newURL = $(this).nextAll('a').attr('href');
window.location.href = newURL;
});
1 Like
Highlighted
New Member
1 0 0

Would this work for having a checkbox on a product page, that triggers a tag being added to that product?

I am trying to have a simple client/user-facing ability to check a "hold" box, so that an item will display a badge (contingent on a tag) that says "Hold"

 

Something like this - 

https://ceramics-test.myshopify.com/collections/lake-credenza/products/jm10251902?variant=3229790499...

0 Likes