Filter adjustment after showing variants on collection page

[cty467]

Hi there, 

I'm a bit stuck and hoping to get some help from the community 😞 

I've edited the code to show variants as separate products on the collection page. It's working fine, but now that seems to mess with the filtering ability. E.g. if I filter "Red" on the collection page, all red products AND their variants (even if not red) will all appear as separate products. Same occurs even if I use variant metatags. 

I'm assuming this is because the code makes any product with variants, show variants as separate variant product cards. Therefore even after filtering, the variant product cards still show even though they're not related to the filter. 

I've been trying to resolve this, but haven't had any luck. Would appreciate any pointers from anyone. Thanks! 

For context: 

- I'm using the filter from Shopify's Search and Discovery

- Code used to show variants: https://originateweb.com/show-color-variants-as-separate-products-on-collection-page/

-  Using Ride theme (Shopify free theme) 

[BSS-Commerce]

Hi @cty467 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[cty467]

Hi @BSS-Commerce , 

Thanks for replying! Here's an example on my test store: https://cantoty-devtest.myshopify.com/collections/hydrogen?filter.v.price.gte=&filter.v.price.lte=&f.... 

Password: 123

On the collections page, you can see that even with filters applied - non-relevant variants will continue to show. In the example, I've selected "red". The variant filter metatags are correct for each variant. 

Appreciate any assistance and guidance! Thanks again! 

[TacoLlama]

I think I'm running into the same problem from a different angle. I'm trying to only show "From $XXX" based on which variants pass the search/filter.

Our shared problem is that the products[] getting passed around is all products where at least one variant matches. We need each product to remove the variants that don't pass the filter - not just products with no variants that pass the filter.

In theory, if I can figure out how to examine the active filters, I can just re-run those filters myself to calculate the prices to show. Yours will need to be at a deeper level, when pagination is happening. I think that means the search app needs to do it for you - which probably means getting a different search app.

Good luck!

[TacoLlama]

I am sorry, I doubt this solution is helpful to you. But I did find my solution. I seek to leave a breadcrumb here for someone, anyone. Maybe it will give you some deeper insight into your problem. I didn't need to process the filters, access the URL bar, or build an array of matching variants for each product. I found it as I was drafting up the pseudocode to do that.

It's basically a one-word change. I noticed that as I was filtering, it would display the variant image for a variant that matches. I don't know if that insight is at all helpful for you.

File: snippets/product-grid-item.liquid

Old:

{%- assign price = product.price_min | money -%}

New:

{%- assign price = product.selected_or_first_available_variant.price | money -%}

[TacoLlama]

This actually has a bug in it. In some conditions, it will show a different price and say that is the lowest price. The big one I remember finding was "if the first variant isn't the cheapest variant, it will use the first variant price anyway". It also had some interactions with filters from Search & Discovery.

This makes the fix a bit messier. I had to split out if it's the selected variant, or not. Then if the price is the max AND the price varies, or not.

[DariusWS]

SHOPIFY fixed this problem

https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters

[Dhruv_Sagpariya]

Hi @cty467 ,

I am facing same problem in my store as well.
Did you get any solution ?