Shopify : Use Native Product Card

this guide outlines the integration of shopify's card product liquid template into klevu search, category merchandising, and recommendations one of the use cases is to accurately display b2b prices within these features the concept is simple; use a placeholder within the klevu result template js and populate it with the markup from the native card product liquid file within the shopify theme the following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy, but it is based on the dawn theme create a new product liquid file within templates for this use this is a common step for klevu search, category merchandising, and recommendations the name of the file will be used in the klevu result rendering function to fetch the card product liquid template via the use of shopify’s ability to render alternate templates via a url parameter specifically, shopify allows you to call a product’s url with a different template other than the one that is assigned to it for example, a product might have the default product template assigned to it, but we want to use this new template we will create one instead so within edit code and the list of templates, let's create a new template by clicking add a new template choose product from the template type dropdown, select liquid , and let’s call this new template klevu template this will create a new template for us to use in this file, we are simply referencing the current card product card liquid file e g {% comment %} klevu added for template fetch {% endcomment %} {% layout none %} {% render 'card product', card product product %} use layout none to omit extraneous template data and keep it to the product card markup only you will want to adhere to your current theme’s card product template name as well as any required data objects to be passed (e g for showing the secondary image you will pass show secondary image true) once this action is completed, below are further steps based on the solution you want to implement klevu search & category merchandising below are the steps to implement the product native tile on search & category merchandising create the override script file within snippets similar to the instructions described above when creating a template, this time we will go to the snippets section and click add new snippet to create the snippet the name of the file will be used to include the script in the core klevu flow where necessary e g snippets > klevu customizations liquid there are five elements to this file include the default card product css from the dawn theme settemplate override to assign our new productblock placeholder aftertemplaterender to fetch the data from the new product klevu template liquid created above template/klevu script block for the new productblock placeholder \<style> block for any fine tuning based on your current theme css please reference the comments in the code example below for details on the functional steps the following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy e g {% comment %} klevu added for template fetch {% endcomment %} \<! we need to include the default product card styles > {{ 'component card css' | asset url | stylesheet tag }} \<! trigger the action after template render > \<script> / assign new templates to klevu options (for automated integration) / if (typeof klevusettings === 'undefined') { var klevusettings = {}; } klevusettings theme ??= {}; klevusettings theme settemplates ??= {}; klevusettings theme settemplates customresultsheading = { selector '#mycustom klevulandingtemplateproductblock', scope 'landing,catnav', name 'productblock' } \</script> \<script type="text/javascript"> / assign new templates to klevu options (uncomment for manual integration) klevu({ &#x9;theme { &#x9; settemplates { customproductblock { &#x9; scope 'landing,catnav', // impacted scope &#x9; selector '#mycustom klevulandingtemplateproductblock', // new markup block id &#x9; name 'productblock' // template placement name &#x9; } &#x9; } &#x9;} }); / \</script> \<! trigger the action after template render > \<script> document addeventlistener('domcontentloaded', function () { klevu aftertemplaterender('landing,catnav', async function (data, scope) { try { / get all the product ids in the response / var productids = data template query productlist result; / loop through the ids / await promise all(productids map(async (prod) => { try { / fetch the product template from shopify api / var res = await fetch(prod url + '?view=klevu template\&variant=' + prod id); var templateblock = await res text(); / insert the template markup into the placeholder / var productcardholder = document queryselector('\[data id="' + prod id + '"] div kuprodwrapholder'); if (res ok) { productcardholder innerhtml = templateblock; } else { productcardholder remove(); } } catch (err) { console log('not able to process this product because ', err, prod); } })); document queryselectorall(' klevulanding div kuresults ul li klevuproduct') foreach(e => { if (!e textcontent trim() && e haschildnodes()) { e remove(); } }); } catch (err) { / if we have any issues processing the above code let's log the error / console log('not able to process this product because ' + err, prod); } }); }); \</script> \<! productblock override with placeholder > \<script type="template/klevu" id="mycustom klevulandingtemplateproductblock"> \<li ku product block class="klevuproduct klevuproductclick kutrackrecentview grid item" data id="<%=datalocal id%>"> \<div class="kuprodwrapholder"> \<! insert here product klevu template liquid for <%=datalocal id%> > \</div> \</li> \</script> \<! adjust for styling as needed > \<style> kusearchresultspagecontainer kuresults ul li { width 25%; padding 0px; float none; } \</style> include the script file into the klevu core flow this may vary depending on how you have integrated klevu we would recommend to put file in layout > theme liquid before head closing tag place the render include below the klevu core and configurations section e g \<! theme liquid code before head closing tag > {% render 'klevu customizations' %} \</head> klevu recommendations below are the steps to implement the product native tile on klevu recommendations create a new template for the recommendations in the kmc to create a new template in the kmc you will need to go to recommendations > templates and click ‘new template’ to show the products using the same look & feel as the current shopify theme we need to create a new template that has the same fundamental elements from the existing template this may mean that a lot of the elements from the existing related products or featured products liquid templates will need to be taken whilst we are aiming to achieve the same look & feel of the existing template we also want to make sure we are capturing the necessary analytics using the klevu classes from the original template the following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy <% 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) { %> \<product recommendations class="related products page width isolate"> \<h2 class="related products heading inline richtext h2" title="<%= klevu dom helpers escapehtml(title) %>"> <%= title %> \</h2> \<ul class="grid product grid grid 4 col desktop grid 2 col tablet down" role="list"> <% helper each(recommendationitemlist, function(key, item){ %> \<li class="grid item"> \<div class="kurecs itemwrap kurecsitem kurecs item" data id="<%= item id %>"> \</div> \</li> <% }); %> \</ul> \</product recommendations> <% } %> \</div> in the above example you can see we have kept the fundamental klevu functionality to get the correct page we have kept the fundamental klevu functionality to get the recommendations list we have kept the fundamental klevu classes for the elements to make sure we are tracking all analytical data we have inputted the classes from the theme to make the recommendations have the same look & feel as those in the theme create the post render script here we are creating a script to render the product card for each of the products that are part of the recommendation block being created we are referencing the function found here the following example is for guidance only, you will want to adapt the code as necessary to fit your theme and strategy e g \<! we need to include the default product card styles > {{ 'component card css' | asset url | stylesheet tag }} \<script> / klevu runs this function once the recommendations block has been rendered / function klevu bindrecstemplateelementevents(templatedata, recskey) { / gets an array of the products in the recommendations block / var productids = templatedata query klevurecsitemlist result; / loop through the ids / klevu each(productids, async function (pkey, prod) { / fetch the product template from shopify api / var res = await fetch(prod url + '?view=klevu template\&variant=' + prod id); var templateblock = await res text(); / insert the template markup into the placeholder / var productcardtarget = document queryselector('\[data recskey="' + recskey + '"]'); var productcardholder = productcardtarget queryselector('div kurecsitem\[data id="' + prod id + '"]'); if (res ok) { productcardholder innerhtml = templateblock; } else { productcardholder remove(); } }); } \</script> here you can see that we are checking for the specific recommendation product id and inputting the code block for this product in the div related to that product drop the code into the desired template once you have done this you are free to create a new recommendation block, assign the new template you have created, and get the code that is spat out as a result you can use this code to set up recommendations using the steps given in the section smart recommendation s of the guide another option is to handle it manually e g \<div class="klevu recs" id="k xxxxxxxx xxxx xxxx xxxx xxxxxxxxxxx">\</div> you can drop this into a custom liquid block on the page you’d like to show the recommendations e g the home page, product page, or category page you may need to make some css changes to the custom liquid block to show certain elements correctly known caveats when utilizing this method, it's important to note a couple of considerations if prices differ from what was synchronized with the klevu backend (such as in a shopify b2b system), it may affect the functionality of the price facet and sort by options on search/category pages it will not impact the recommendation though the load more feature (infinite scrolling) might not be compatible with the aforementioned approach