Configurations

if you haven't gone through the prerequisites and the v2 structure, please have a look at overview docid\ czeodl0skcuv 18ipuplr merchants can create and manage multiple klevu recommendation banners via our kmc (klevu merchant centre) the configuration via kmc includes the page type, the banner type and even the template to render the banner our recommended approach to display these banners created via the kmc is to use our html div integration https //support klevu com/knowledgebase/integration steps for recommendations/ approach, which includes handling of api calls and banner rendering out of the box you can also retrieve the kmc banner configuration via an api call and process it however you like this api call uses a simple get request with no payload, and since it is intended for use on the frontend there is no authentication required { "tab" "examples", "url" "https //config cdn ksearchnet com/recommendations/klevu 158755634955912036/settings/3a5580bf c5b2 407e acac 4a58ae730b64", "name" "get recommendation configuration", "method" "get", "request" { "pathparameters" \[ { "kind" "optional", "name" "base path", "type" "string", "description" "a static base url to retrieve klevu recommendation configuration from https //config cdn ksearchnet com" }, { "kind" "optional", "name" "js api key", "type" "string", "description" "your public klevu js api key " }, { "kind" "optional", "name" "recs id", "type" "string", "description" "the unique id of your recommendation banner, which you can find within the kmc \n" } ], "queryparameters" \[ { "name" "pid", "kind" "optional", "type" "string", "description" "the unique identifier of the record within klevu ", "children" \[] }, { "name" "gpid", "kind" "optional", "type" "string", "description" "the identifier used to group compound products together, eg the id of the parent in the case of a configurable product", "children" \[] }, { "name" "cp", "kind" "optional", "type" "string", "description" "this is the complete hierarchy of the category being visited for example, jewellery;rings;stackable rings please note the use of a semicolon as the separator between a parent and a child category ", "children" \[] }, { "name" "sids", "kind" "optional", "type" "string", "description" "the segmentids (segmentinfo segments) if using recommendation segmentation ", "children" \[] } ], "headerparameters" \[], "bodydataparameters" \[], "formdataparameters" \[] }, "results" { "languages" \[ { "id" "hlez8xh v9giiezwdwmha", "code" "{\n \\"metadata\\" {\n \\"title\\" \\"recently viewed by you\\",\n \\"recskey\\" \\"3a5580bf c5b2 407e acac 4a58ae730b64\\",\n \\"pagetype\\" \\"home\\",\n \\"logic\\" \\"recently viewed\\",\n \\"maxproducts\\" 5,\n \\"productthreshold\\" 1,\n \\"enabled\\" true\n },\n \\"search\\" {\n \\"basepath\\" \\"eucs19v2 ksearchnet com/cs/v2/search\\",\n \\"payload\\" \\"{\\\\\\"recordqueries\\\\\\" \[{\\\\\\"id\\\\\\" \\\\\\"klevurecsitemlist\\\\\\",\\\\\\"typeofrequest\\\\\\" \\\\\\"search\\\\\\",\\\\\\"settings\\\\\\" {\\\\\\"typeofrecords\\\\\\" \[\\\\\\"klevu product\\\\\\"],\\\\\\"limit\\\\\\" 5}}]}\\"\n },\n \\"templates\\" {\n \\"base\\" \\"<% var metadata = data metadata; var logic = (metadata logic) ? metadata logic \\\\\\"\\\\\\"; var pagetype = (metadata pagetype) ? metadata pagetype \\\\\\"\\\\\\"; var recskey = (metadata recskey) ? metadata recskey \\\\\\"\\\\\\"; var title = (metadata title) ? metadata title \\\\\\"\\\\\\"; %> \<div class=\\\\\\"kurecscontainer\\\\\\" data logic=\\\\\\"<%= logic %>\\\\\\" data recskey=\\\\\\"<%= recskey %>\\\\\\" data page type=\\\\\\"<%= pagetype %>\\\\\\"> <% var recommendationitemlist = klevu getobjectpath(data,\\\\\\"query klevurecsitemlist result\\\\\\");%> <% if(recommendationitemlist && recommendationitemlist length) { %> \<div class=\\\\\\"kurecsheader\\\\\\"> \<h3 class=\\\\\\"kurecstitle\\\\\\" title=\\\\\\"<%= klevu dom helpers escapehtml(title) %>\\\\\\"> <%= title %> \</h3> \</div> \<div class=\\\\\\"kurecswrap\\\\\\"> \<div class=\\\\\\"kurecsresults\\\\\\"> \<div class=\\\\\\"kurecsresultsinner\\\\\\"> <% helper each(recommendationitemlist, function(key, item){ %> \<div class=\\\\\\"kurecs itemwrap kurecsitem\\\\\\" data id=\\\\\\"<%= item id %>\\\\\\"> \<div class=\\\\\\"kurecs item\\\\\\"> \<div class=\\\\\\"kurecs itemimg\\\\\\"> \<a title=\\\\\\"<%= klevu dom helpers escapehtml(item name) %>\\\\\\" href=\\\\\\"<%= item url %>\\\\\\" data id=\\\\\\"<%= item id %>\\\\\\" class=\\\\\\"kurecsitemclick kurecsimg\\\\\\"> \<img src=\\\\\\"<%= item image %>\\\\\\" origin=\\\\\\"<%= item image %>\\\\\\" alt=\\\\\\"<%= klevu dom helpers escapehtml(item name) %>\\\\\\" onerror=\\\\\\"klevu dom helpers cleanupproductimage(this)\\\\\\" class=\\\\\\"prodimg\\\\\\" width=\\\\\\"100%\\\\\\"> \</a> \</div> \<div class=\\\\\\"kurecs itemdesc\\\\\\"> \<a title=\\\\\\"<%= klevu dom helpers escapehtml(item name) %>\\\\\\" href=\\\\\\"<%= item url %>\\\\\\" data id=\\\\\\"<%= item id %>\\\\\\" class=\\\\\\"kurecsitemclick kurecstitle\\\\\\"> <%= item name %> hghfghfghfghgfhfghfg \</a> \<div class=\\\\\\"kurecs itemprice\\\\\\"> <% if(item ondiscount && item ondiscount == \\\\\\"true\\\\\\") { %> <% if(item saleprice ) { %> \<div class=\\\\\\"kusaleprice kuspecialprice\\\\\\"> <%=helper processcurrency(item currency,parsefloat(item saleprice) )%> \</div> <% } %> <% if(item price) { %> \<div class=\\\\\\"kuorigprice\\\\\\"> <%=helper translate(\\\\\\"original price %s\\\\\\",helper processcurrency(item currency,parsefloat(item price)))%> \</div> <% } %> <% } else { %> <% if(item saleprice ) { %> \<div class=\\\\\\"kusaleprice\\\\\\"> <%=helper processcurrency(item currency,parsefloat(item saleprice) )%> \</div> <% } %> <% } %> \</div> \</div> \<div class=\\\\\\"kurecsitembottom\\\\\\"> \<button data id=\\\\\\"<%= item id %>\\\\\\" data qty=\\\\\\"1\\\\\\" data url=\\\\\\"<%= item url %>\\\\\\" class=\\\\\\"kurecsaddtocartbtn\\\\\\">add to cart \</button> \</div> \</div> \</div> <% }) %> \</div> \</div> \</div> <% } %> \</div>\\"\n },\n \\"styles\\" {\n \\"base\\" \\" kurecscontainer{ position\ relative; margin 15px 0px;} kurecscontainer kurecsheader kurecstitle{ display\ block; font size 18px; font weight\ bold; margin 20px 0px; overflow\ hidden; white space\ nowrap; text overflow\ ellipsis;} kurecscontainer kurecswrap{ max width 100%; position\ relative; padding 0px; box sizing\ border box; font family\ inherit; overflow\ hidden;} kurecscontainer kurecswrap { outline\ none;} kurecscontainer kurecsresults{ width 100%; max width 100%; overflow\ auto;} kurecscontainer kurecsresultsinner{ transition ms transform 0 5s ease 0s, webkit transform 0 5s ease 0s, transform 0 5s ease 0s; position\ relative; white space\ nowrap; transition\ all 0 5s ease;} kurecscontainer kurecsresultsinner kurecs itemwrap{ display\ inline block; margin 12px; margin left 0px; vertical align\ top; width 180px; border 1px solid #efefef; border radius 2px;} kurecscontainer kurecsresultsinner kurecs item{ margin 0 auto; padding 12px; background #fff;} kurecscontainer kurecsresultsinner kurecs itemimg{ display\ flex; justify content\ center; align items\ center; flex direction\ column; width 100%; height 210px;} kurecscontainer kurecsresultsinner a kurecsimg img{ max width 100%; height\ auto; width\ auto; display\ inline block; margin 0 auto;} kurecscontainer kurecsresultsinner a kurecstitle{ font size 16px; font weight\ bold; text decoration\ none; overflow\ hidden; white space\ nowrap; text overflow\ ellipsis; display\ block; color #000;} kurecscontainer kurecsresultsinner kurecs itemdesc{ margin top 12px; box sizing\ border box; overflow\ hidden; white space\ nowrap; text overflow\ ellipse;} kurecscontainer kurecsresultsinner kurecs itemtag{ color\ rgba(0, 0, 0, 0 5); line height 110%; margin bottom 5px; min height 20px;} kurecscontainer kurecsresultsinner kurecs itemsku{ color\ rgba(0, 0, 0, 0 5); font size 80%; line height 110%; margin bottom 5px;} kurecscontainer kurecsresultsinner kurecs itemprice{ font size 12px; color #545454; margin bottom 4px; margin top 4px;} kurecscontainer kurecsresultsinner kurecs itemprice kusaleprice{ overflow\ hidden; white space\ nowrap; text overflow\ ellipsis;} kurecscontainer kurecsresultsinner kurecsaddtocartbtn{ border 0px; width 100%; padding 6px; cursor\ pointer; margin top 8px; background #ececec; color #000; border radius 2px;} kurecscontainer kurecsresultsinner kurecsaddtocartbtn\ hover{ background #333333; color #ececec;}\\"\n },\n \\"scripts\\" {\n \\"recsobject\\" null\n }\n}", "language" "200", "customlabel" "" } ], "selectedlanguageid" "hlez8xh v9giiezwdwmha" }, "examples" { "languages" \[ { "id" "adc91fzyimm5goj6umadw", "code" "\<?php\n\n$curl = curl init();\n\ncurl setopt array($curl, array(\n curlopt url => 'https //config cdn ksearchnet com/recommendations/klevu 158755634955912036/settings/3a5580bf c5b2 407e acac 4a58ae730b64',\n curlopt returntransfer => true,\n curlopt encoding => '',\n curlopt maxredirs => 10,\n curlopt timeout => 0,\n curlopt followlocation => true,\n curlopt http version => curl http version 1 1,\n curlopt customrequest => 'get',\n));\n\n$response = curl exec($curl);\n\ncurl close($curl);\necho $response;\n", "language" "php", "customlabel" "" }, { "id" "ekpwzsrwql1wilbus ulj", "code" "var data = \\"\\";\n\nvar xhr = new xmlhttprequest();\nxhr withcredentials = false;\n\nxhr addeventlistener(\\"readystatechange\\", function() {\n if(this readystate === 4) {\n console log(this responsetext);\n }\n});\n\nxhr open(\\"get\\", \\"https //config cdn ksearchnet com/recommendations/klevu 158755634955912036/settings/3a5580bf c5b2 407e acac 4a58ae730b64\\");\n\nxhr send(data);", "language" "javascript", "customlabel" "" }, { "id" "wvs1y glp99 dnvmhvhn", "code" "okhttpclient client = new okhttpclient() newbuilder()\n build();\nrequest request = new request builder()\n url(\\"https //config cdn ksearchnet com/recommendations/klevu 158755634955912036/settings/3a5580bf c5b2 407e acac 4a58ae730b64\\")\n method(\\"get\\", null)\n build();\nresponse response = client newcall(request) execute();", "language" "java", "customlabel" "" }, { "id" "vantufjc8fb1i6avfp ev", "code" "var request = require('request');\nvar options = {\n 'method' 'get',\n 'url' 'https //config cdn ksearchnet com/recommendations/klevu 158755634955912036/settings/3a5580bf c5b2 407e acac 4a58ae730b64',\n 'headers' {\n }\n};\nrequest(options, function (error, response) {\n if (error) throw new error(error);\n console log(response body);\n});\n", "language" "nodejs", "customlabel" "" }, { "id" "xv6ofmpd0klxxrb8laqpi", "language" "none", "code" "", "customlabel" "" } ], "selectedlanguageid" "ekpwzsrwql1wilbus ulj" }, "description" "the end point is used for retrieving the recommendation template configuration set in klevu dashboard ", "currentnewparameter" { "label" "query parameter", "value" "queryparameters" } } understanding the response parameters description metadata title the title of the recommendation banner, eg "our newest arrivals!" metadata recskey the unique identifier of the banner this will match the value of recs id in the request, eg 3a5580bf c5b2 407e acac 4a58ae730b64 metadata pagetype the page type this banner should be displayed on this will be one of home homepage category collection or category listing page product product detail page checkout the cart or checkout metadata logic the type of recommendation banner which was configured in the kmc this will be one of trending trending personalized newest arrivals recently viewed hand picked other also viewed similar bought together metadata maxproducts the maximum number of products to show within this banner metadata productthreshold the minimum number of results before this banner will be displayed metadata enabled whether or not this particular banner is enabled search basepath the search url to be used to send the recommendation request to, eg eucs19v2 ksearchnet com/cs/v2/search search payload this correlates to the recordqueries section of the api call to be fired for this recommendation templates base the html to be used for rendering the recommendation banner, in klevu javascript library markup styles base the css that is used for rendering the recommendation banner, in klevu's template js library markup scripts recsobject the javascript that is executed after the rendering of the html recommendation banner, in klevu's template js library markup note regarding the response templates base , styles base , and scripts recsobject returned in the configuration api response should not be used w hen using the api directly since they require the klevu's template js library