Hi,
I am using instantsearch.js v4 to display a Product Listing page using hits widget, having both simple and variant products. For variant products, we are displaying color and length swatches.
On selecting any length and color, we need to fetch corresponding variant product which will be having its own SKU(1234-color-length), price and Image. Is it possible to get data of this variant product(on selection of corresponding color and length) within hits widget listing?
Hi @azaman – if each SKY is an individual record, you’d need to rewrite the query based on the refinement choices (for instance, if you select the “orange” variant, reset the color filter to “orange”)
There’s some tips around handling variants here:
Hi @chuck.meyer - Using the color filter will refine the display of entire hits results whereas I am considering it to be changed just within the single product card.
So that if I select some other color and length within the variation, it display me that particular variant data within that card only.
Got it. If all of the variants are part of a single record, you could modify the values you display to select the various variants. If they are separate records in the index, you may need to do secondary search to retrieve the individual records and return them in the card, or go back to your ecommerce system “source of truth”
Let me ask some of the field folks to see if there are any recommended patterns here.
Hi @chuck.meyer,
Is there any solution for it on how to do a secondary call within hits widget to retrieve data for variant SKU within the card? Something like making a getObject call within hits widget?
You could do additional getObject calls for the records in a transformItems() function within your hits widget, but this will drastically slow down your search UI due to the increased number of API calls you are making to the back end.
I colleague provided some more details (and a CodeSanbox!):
In order to be able to display the other colour variants in a result there are a couple of ways in which this can be done.
Data against each record
They could index an object which contains the other variant colours against each record. This object may be simple with just the colours so that they could be listed. It could also be more complicated containing more data about the other variants such as name and URL etc (if desired).
This can work well, but will be more complicated on the indexing side as each product variant will have to have details about its other variants. This becomes especially true if they are dealing with whether items are in stock or not etc. For instance, this would mean that if you have coloured t-shirts (red, green, blue and yellow) and then the blue t-shirt goes out of stock, this variant may need to be removed from the other variants etc.
Perform another API call
They could perform another API call based upon the SKUs that have initially been returned by the page of results. This would get all the variant products for those SKUs and be able to update the results with the relevant data on each of the product cards.
I have this codesandbox POC which I have used with customers before for doing this.
This works well as it gives you control over stock levels and what information to display within the frontend without having to manage a complicated indexing process, but it does mean that you will have 2 API calls for every search/ category page that is using Algolia.
