Don't display storefront filters when only one option is available

[KWright]

Greetings,

I would like to not display a storefront filter option if there is only one option available.

Ex. Storefront filter setup to display Brand and Product Type.

Collection "A" has items of several brands and product types. Storefront filter displays these name / options as desired.

Collection "B" has items of same brand, but several product types. Since there is only one brand, I don't want to show the Brand filter.

Currently under development using the Warehouse OS2 Theme. Any code recommendations (no apps please!) would be helpful. Thanks...

[RobDukarski · Accepted solution]

@KWright 

It is difficult to help in this capacity because without purchasing the theme I cannot access the underlying Liquid code.

That said, I have a general idea of how it's set up and am assuming it is utilizing the Vendor for the "Brand" listing but that is not necessarily relevant to the code unless you want to specifically target a filter.

The code should have something like this:

for filter in collection.filters

Within that you will want to check the for active values and the inactive values:

{% liquid
  assign active_filter_count = filter.active_values | size
  assign inactive_filter_count = filter.inactive_values | size
  assign filter_count = active_filter_count | plus: inactive_filter_count
%}

From there you will add the conditional for only displaying the filter if there is more than one available:

{% if filter_count > 1 %}
  Filter output code block
{% endif %}

I believe that should be sufficient for your scenarios. A relatively simple approach!

Hope that helps!

[RobDukarski · Accepted solution]

@KWright 

It is difficult to help in this capacity because without purchasing the theme I cannot access the underlying Liquid code.

That said, I have a general idea of how it's set up and am assuming it is utilizing the Vendor for the "Brand" listing but that is not necessarily relevant to the code unless you want to specifically target a filter.

The code should have something like this:

for filter in collection.filters

Within that you will want to check the for active values and the inactive values:

{% liquid
  assign active_filter_count = filter.active_values | size
  assign inactive_filter_count = filter.inactive_values | size
  assign filter_count = active_filter_count | plus: inactive_filter_count
%}

From there you will add the conditional for only displaying the filter if there is more than one available:

{% if filter_count > 1 %}
  Filter output code block
{% endif %}

I believe that should be sufficient for your scenarios. A relatively simple approach!

Hope that helps!

[RobDukarski · Accepted solution]

@KWright 

You should be able to reduce the amount of code by using:

{% if filter.values.size > 1 %}
  Filter output code block
{% endif %}

instead of the middle and last code blocks from my previous reply.

Hope that helps!

[KWright]

@RobDukarski 

Thank you for your code suggestions. The initial question was related to the Warehouse os2 Theme, which I'm currently building out from the pre os2 version. However, since I'm new to Liquid, I wanted a more generic solution so that I may learn and apply to other themes in the future!

[RobDukarski]

@KWright 

Yep, the solution I shared is as generic as it can get because it assumes the basic Liquid objects available to any hosted Shopify storefront. It's a simple conditional that checks if the current filter in the loop of filters has more than one value and if it does output that filter and its values. You should be able to use that in any theme except the "filter." may change depending on if that theme stored the filter in a variable of a different name.

Good luck with the rest of your growth!!

[bundl]

Hi Rob,

I'm trying to solve this same problem using Dawn 2 theme, I've tried patching your code into the Filter.Filter.Liquid code snippet but it hasn't worked for me. Do you know where I need to paste the code?

Thanks

[stormeagle]

May I ask where this code would go? I want to achieve the same thing (using Minion theme).

[stormeagle]

If I may share what worked for me since I was unsure where to place the code above. I'm using the Minion theme and not sure this will work with others but this is the gist of what I did for what it's worth.

1. I installed the free XO Insert Code app and activate for Header in theme customization

2. I added this code as JavaScript

// Loop sidebar filter elements to hide those with only one option
window.addEventListener('load', function (event) {

	// Desktop
	const elements = document.querySelectorAll('#FacetFiltersForm .chm-toggle');
	elements.forEach(element => {
		if (element.querySelectorAll(".facets__item").length <= 1) {
			element.style.display = 'none';
		}
	});

	// Mobile
	const mobile_elements = document.querySelectorAll('#FacetFiltersFormMobile .mobile-facets__main__content details');
	mobile_elements.forEach(element => {
		if (element.querySelectorAll(".facets__item").length <= 1) {
			element.style.display = 'none';
		}
	});

});

Hopefully this will be useful to someone. I'm not new to web development but I am new to Shopify so if there's a better way of doing this, let me know.