Build UI
Modify Recommendations

Overview

7min



Modify Recommendations

This guide is for working with the Klevu API Request and Response data for Klevu Smart Recommendations. Direct editing of the display markup is achieved within the Klevu Merchant Center.

Please review the Knowledge Base article for more details on how to work with the Recs Template Editor



It is possible to modify the Klevu Recommendations query, response, or template data for any or all of your Recommendation banners. You can do this by adding one or more of the following hook functions, after the Klevu initialization.

Within each of these hook functions, you will find relevant objects and variables that you can use to modify the default behavior provided by Klevu. 

Note: the recsKey value is the id provided with each Recommendation banner. This value can be used to specifically target a specific banner for modification.

Modify Recs Request

Any of the Klevu API parameters are available to be applied as needed or otherwise to override any default values within the recordQueries object

function klevu_processRECSRecordQueries(recordQueries, recsKey) { console.log(recordQueries, recsKey); }



Modify Recs Response

Any of the product attributes are available to be modified as needed or otherwise inject any custom values via queryResults

function klevu_processRECSQueryResults(queryResults, recsKey) { console.log(queryResults, recsKey); }



Modify Recs Template Data

Any of the template attributes are available to be modified as needed or otherwise inject any custom values via templateData

function klevu_processRECSTemplateData(templateData, recsKey) { console.log(templateData, recsKey); }



After Recs Render

After the Recommendations template renders, any custom JavaScript action can be executed

function klevu_bindRECSTemplateElementEvents(templateData, recsKey) { console.log(templateData, recsKey); }



Recs Item Click Event

OnClick of an item within the Recommendations banner any custom JavaScript action can be executed

function klevu_RECSItemClick(templateData, itemId, recsKey) { console.log(templateData, itemId, recsKey); }



Examples

Please see the Modify Recommendations Examples section for details of common uses.



Updated 30 Oct 2023
Doc contributor
Doc contributor
Did this page help you?