Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Show two different meta definitions as one filter

Show two different meta definitions as one filter

Clausis
New Member
6 0 0

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

Reply 1 (1)

RobDukarski
Shopify Partner
88 15 20

@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!

- Rob Dukarski
Helping to make commerce better for everyone!