A space to discuss online store customization, theme development, and Liquid templating.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello everyone,
So on my new unpublished 2.0 website, I am trying to set up the metafields and filters on it.
One of the filter I want to set up is the Color one.
As some products don't have any variants, I have created (settings>metafields) a color definition for products as : product.metafields.my_fields.couleur
As some products have variants based on colors, I have created another definition Color definition for variants as : variant.metafields.my_fields.couleur
Now when I activate the filters in onlinestore>Navigation, it shows the colors as two different options to choose from. When on the website, it shows two separate filter options.
Therefore, how to make those two definitions showing as a single filter on the online store ?
I would like to avoid having to create a single variant for products without variants, as that would mean some other products would be limited with variant options if 3 are already in used but not for colors.
Thank you
@Clausis
This should be a relatively easy fix if you are comfortable working in the code editor. I must say that I believe it is not going to work the way you want it to. I am unaware how your theme is setup so I'll share a general explanation and hopefully it will help you get it to where you want it to be.
You should have some code like this:
for filter in collection.filters
or
for filter in search.filters
depending on where you want to implement the change. It also might look a bit different but there should be the ".filters" in there to access the filters on the object.
From there you will want to go into the loop and look for the filter label with something like this (which assumes part of a collection😞
{% liquid
assign filter_index = 0
assign filter_label = filter.label | downcase
assign has_couleur = false
unless has_couleur and filter_label == 'couleur'
if filter_label == 'couleur'
assign filter_index = forloop.index
assign has_couleur = true
LOOP THROUGH FILTER VALUES AND OUTPUT THEM HERE BUT YOU MAY WANT TO LABEL THEM AS PRODUCT FILTERS AND VARIANT FILTERS AS THEY WILL BE APPLIED SEPARATELY IN YOUR CASE
for value in filter.values
OUTPUT FILTER DISPLAY CODE
endfor
LOOP THROUGH FILTERS AND OUTPUT THE FILTER VALUES OF THE COULEUR FILTER THAT DOES NOT HAVE THE INDEX MATCHING THE filter_index VARIABLE
for secondary_filter in collection.filters
assign filter_label = secondary_filter.label | downcase
if filter_label == 'couleur' and forloop.index != filter_index
for value in secondary_filter.values
OUTPUT FILTER DISPLAY CODE
endfor
break
endif
endfor
else
OUTPUT FILTER DISPLAY CODE FOR ALL OTHER FILTERS
endif
endunless
%}
So what you are doing is checking for the first Couleur filter and then outputting its values and then you are looking for the other Couleur filter and outputting its values directly after the first one. If you only want the values to display once you are going to want to have the URLs be set up with both the product filter and the variant filter at the same time. You should be able to grab the filter's values and join them into a String then grab the other filter's values and join them into a String and then combine the Strings and split them into an Array and then deduplicate that Array and output those values with the double filter URL and then anything not in that Array would be output with its single filter URL.
I am unsure if you can have a product filter and a variant filter applied in the capacity you want at the same time. Filters are applied with AND login and their values with OR logic so if you are wanting to allow customers to apply a filter so that the products with a specific couleur or variants with that a specific couleur I believe you are NOT currently going to be able to do that.
So with the above sample code you are probably going to want to set it up so that if a variant filter is being applied the product filter is removed at the same time, which is likely not the functionality you want but if you set it up without removing the other type of filter you are likely not going to have any results display.
In summary I do not believe you are going to be able to have this work the way you want without only using a product filter or a variant filter. That said, if it does meet your needs then that is great to know!
Hope that helps!