Shopify: Hide/exclude product variant realtime search result

I have a business requirement where you only show a specific variant if its equal to a javascript cookie set. For example, a customer enters their postcode, and a corresponding “store” cookie will be set. Now they can search for products. Once Algolia search is used, it currently displays all variants. The current product configuration we have contains an Option1 named store with different “store” values. If the customer’s store cookie is equal to the product variant’s Option1 value then show it, else, do not show or do not even include on the search results.

Question is, how can I achieve this and what files to touch or customize? I’ve tried customizing algolia.helpers.js and used hogan technique to display none if option1 not equal to cookie but it gives me unequal layout result because other product widgets are hidden and it doesn’t look great like having just 3 products on 1 page and needs to scroll down at the bottom to see pagination. I expect the div widgets to ‘compress’ if others are hidden reducing page count but it just hides 1 page.

So what is ideal is to not include ‘this’ product variant on real-time search result if variant’s option1 is not equal to customer store cookie.

Thanks and please advise.

Thanks for posting on our community forum, and welcome!

The first thing I can advise you here would be to use an optionalFilters.
For more details about it, I invite you to read:

Using this, you can put items that match the postcode come up higher in the search results than the other ones using Shopify: Add a filter to the autocomplete and / or the search page .

Then you have two different options in terms of Display, since it seems you want to have only one variant per product displayed.

  • Option 1 : Enable in the Display tab of the app Show products instead of variants => This will show generic product information
  • Option 2 : If you want to display the best matching variant, and not the other ones:
    1. Head to your index settings (you can find a link to it in the Settings tab, in the Synchronize help text).
    2. Change, in the Display tab there (on distinct to true and attributeForDistinct to id.
    3. Try in your front-end
    4. If this is good for you, click Synchronize Settings in our app to replicate those settings to the replicas for the sort orders