This article goes over how to handle variant objects in the Search API response for displaying on your site for Variants Support.
Before integrating, ensure you've followed the steps in Setting up your site for Variants support
All of a product's variants will be returned in the "children" field of the Search Response as an array of objects. The children array is automatically arranged so that the first child is the preferred one to use, which is influenced by any currently searched query, selected filters, and Dynamic Display Rules.
Pick the first child in the array, and use its data for the product's image, name, price etc.
A fallback condition to use the parent product's data should also be in place in the event that the children array is empty.
search_match and facet_match
These fields allow you to restrict the dynamic display to only the most relevant variants to the user's intent, and are located within each product variant of the search response. This can be used so that you aren't showing a misleading variant that doesn't match what the user is looking for at all.
The search_match and facet_match keys will only be returned if the user is searching or filtering, respectively. Therefore, if you wish to implement these fields, you will need to check that they either don't exist, OR they do exist with a true value.
Example (JS)
Check if a valid and relevant variant exists:
typeof(result.children)=='array'
&& result.children.length>0
&& result.children[0].image_link_child.length>0
&& (
typeof(result.children[0].search_match)=='undefined'
|| result.children[0].search_match==true
)
&& (
typeof(result.children[0].facet_match)=='undefined'
|| result.children[0].facet_match==true
)
Full product example (Angular)
<a ng-href="{{ result.url }}" intellisuggest ng-if="typeOf(result.children)=='array' && result.children.length>0 && result.children[0].search_match!=false && result.children[0].facet_match!=false && result.children[0].image_link_child.length>0">
<div ng-style="{'background-image': 'url(' + result.children[0].image_link_child + ')'}">
<img ng-src="{{ result.children[0].image_link_child }}"/>
</div>
</a>
<a ng-href="{{ result.url }}" intellisuggest ng-if="result.children.length==0 || result.children[0].search_match==false || result.children[0].facet_match==false || result.children[0].image_link_child.length==0">
<div ng-style="{'background-image': 'url(' + result.imageUrl + ')'}">
<img ng-src="{{ result.imageUrl }}"/>
</div>
</a>Advanced front-end logic
All children are always returned in the search response. You can use this data for custom behavior such as showing color swatch options under each product, even if some of them don't apply to the shopper's current filter
(Optional) Stop variants from being returned
When making your call to the Search API, you can pass the parameter "excludeChildren=true" to stop variant data from being returned, which will slightly improve speed on pages where you don't necessarily need children data.
Comments
0 comments
Article is closed for comments.