Guide
Result Object
6min
klevufetch() result object contains raw api response and handy helpers to work with the results for example use suggestionsbyid() to fetch suggestions results and queriesbyid() for search results // example search the user made let searchterm = "blue dress"; let searchresultproducts = \[]; let suggestionresultproducts = \[]; let searchnextfunc; let searchclickmanager; let setshowmore = false; // the result object is what is returned from klevufetch const resultobject = await klevufetch( search(searchterm, { // not required as for default it's the same id "search", fields \["name", "price", "url", "category"], }), suggestions(searchterm, { // not required as default it's the same id "suggestions", }) ); queriesbyid() result contains metadata for query, getpage(), the result records and possible event functions for providing click events to search, category merchandising and recommendations const suggestionresult = resultobject suggestionsbyid("suggestions")); const searchresult = resultobject queriesbyid("search")); // array of products suggestionresultproducts = suggestionresult suggestions; // array of products searchresultproducts = searchresult records; // either a function or false if no more results searchnextfunc = searchresult getpage; calling these event functions returns a function to use to send events to klevu get page function examples getpage() is a nice helper to fetch the next results set or certain page of results set with the same queries and modifiers you can use hasnextpage() method to check if there are more pages available passing pageindex parameter to getpage() allows you to fetch records for certain page const fetchmore = async () => { const nextres = await searchnextfunc(); const searchresult = nextres queriesbyid("search"); searchresultproducts = searchresult? records ?? \[]; searchnextfunc = searchresult getpage setshowmore(boolean(searchresult hasnextpage())) } reactjs searchresultpage tsx vuejs home vue get banners related to the search getbanners() method of searchresultquery object can be used to fetch all banners related to that search in case of a search we need to provide do we want banners for quicksearch or search landing page in case of merchandising banners we do not need to provide anything for the method const resultobject = await klevufetch( search(searchterm, { // not required as for default it's the same id "search", }) ); const banners = resultobject queriesbyid("search") getbanners({ searchtype "quicksearch" }) get redirects related to search getredirects method of searchresultquery will be defined in case that typical search was made it will return all directs that are matched (usually one) to the search this allows you to create your own redirection logic here is very simple logic that you can use to do the redirects in the browser const resultobject = await klevufetch( search(searchterm, { // not required as for default it's the same id "search", }) ); const redirects = resultobject queriesbyid("search") getredirect? () if (redirects && redirects\[0]) { window\ location href = redirects\[0] url } click events when you perform a search using klevufetch, each query can be accessed using getqueriesbyid as shown above react \<grid item key={i}> \<product product={p} onclick={() => { searchresult searchclickevent({ productid p id }) }} /> \</grid> vue \<product v for="product in searchstore products" \ key="product id" \ product="product" @click="searchresult searchclickevent({ productid p id })" /> there are three possible click events returned by getqueriesbyid() searchclickevent() , categorymerchandisingclickevent() and recommendationclickevent() these three functions are defined and available only if query has been correct type so for example search() query has only searchclickevent() defined function name returned by searchclickevent() search() categorymerchandisingclickevent() categorymerchandising() recommendationclickevent() kmcrecommendation() for exact information regarding what is returned by searches and what to pass to these search events please refer to the reference docid 6wnqmeactqt z3saczlw section