Javascript

Last updated 2 years ago

Deploy the recommendation block

Place your recommendation block anywhere on the page using the following tag.

<div data-id="1" id="my-recommendation-block"></div>

And put the following javascript code at the bottom of your page.

zlt.rec(pid, "my-recommendation-block")

pid: A string of comma separated product ids. E.g. "1,2,3" tid: The id of the template you wish to display. E.g. "1"

The pid should contain the IDs of the currently viewed product and any product added to cart.

<!-- Example -->
<head>
   ...
   <!-- Initiate the tracker -->
   ### FOLLOW THE GUIDE ABOVE TO DEPLOY THE TRACKER SCRIPT ###
</head>
<body>
   ...
   <!-- Position the recommendation block -->
   <div data-id="1" id="my-recommendation-block"></div>
   ...
   <!-- Call the recommendation engine -->
   <script type="text/javascript">
      var pid = '1,2,3';
      zlt.rec(pid, "my-recommendation-block");
   </script>
</body>

Remember to replace [ADD YOUR TRACKER KEY] with your tracker key.

Extended options

Attribute

Usage

data-id

Template, or block selection

Required

data-mid

Model Selection, overwrites block in data-id

Optional

data-mprods

Number of Prods to get for Mobile

Optional

data-mslide

Number of Slides to show on Mobile

Optional

data-prods

Number of Products to get for Desktop

Optional

data-slide

Number of slides to show on Desktop

Optional

data-variant

Define variant for A/B testing

Optional

Examples

...
<!-- Position the recommendation block -->
<div data-id="design-id" data-model="model-id" id="my-recommendation-block"></div>
...

OR

...
<!-- Position the recommendation block -->
<div data-id="block-id" id="my-recommendation-block"></div>
...

Javascript

Javascript

Deploy the tracker script

Deploy the recommendation block

Extended options

Examples

Placement

Deploy the tracker script

Deploy the recommendation block

Extended options

Examples

Placement