Supply Theme Group Filter Making options greyed out and non clickable.

New Member
1 0 0

I have my group filtering working well. I am trying to grey out options as people check filters.

 

example
ITEM - BAG selected

 

-PAPER selected

-PLASTIC

 

-RED available

-BLUE available

-GREEN not available (grey/strike this out, not clickable)

 

I would like to have my collection broad and not have to create collections within (like a separate collection for paper, which i know would then narrow down to red and blue only).

 

 

0 Likes
Highlighted
Shopify Partner
14 0 1

You can get the html page for each filter tag to determine whether the no products message is shown.  Add this to one of the collection page templates or snippets:

<script>
$(document).ready(function() {
    $filters = $('li.advanced-filter');
    $filters.each( function() {
       var filter_url = $(location).attr('href') + '+' + $(this).attr('data-handle');
       $.get(filter_url, function( data, status ) {
       var a = data.split('Sorry, there are no products matching your search.');
       if (a.length == 3)
       {
	   var b = this.url.split('+');
    	   var handle = b[b.length - 1];
	   $("li[data-handle='" + handle +"']").css("opacity", "0.5");
       }
    });
}); }); </script>

There is a slight delay as the pages are fetched and processed, but a solution to have that information available in advance is much more complicated.  There is a way to prevent the page from displaying until all the pages are processed by using fetch and promises instead of get, but its probably not worth the effort.

 

0 Likes