[EN] Copying embedded content from Datatrics to Spotler Activate

This document explains how to transfer the embedded product blocks written in code from Datatrics to Spotler Activate.

Note: this document does not show how to set up basic settings and how to connect content to your personalization. Please check this document for that: Custom Productsets (EN) and Personalizations (EN)

When you transfer to Spotler Activate from the Datatrics platform, we can imagine that you would like to use the already working embedded product blocks from Datatrics and copy these to Spotler Activate.

Spotler Activate does not work the same way as Datatrics, so you do need to change parts of the code within your embedded content.

For example, you have the following embedded code in Datatrics:

Open

In Datatrics, you would make use of an each loop to loop through your products and show a row of products, like the code example below:

Because you loop through products, you have all item properties defined as:
{{property}}, without “item.”.

Simplified, it looks like this:

{{#each items}} itemcount='4'
{{name}}
{{description}}
{{/each}}

First, copy the HTML code from Datatrics to your personalization in Spotler Activate.

The big difference in Spotler Activate is that we don’t use an each loop but make use of Nunjucks. To show a row of products in Spotler Activate, you can make use of the following code:

{% for item in items %}
{% endfor %}

So you replace {{#each items}} itemcount='4' with {% for item in items %} and the closing of the {{/each}} loop with {% endfor %}. The desired item count is set up in the personalization template.

Next to that, you will need to alter all the item properties that are set in the code from {{property}} to {{item.property}} as this is necessary for the {% for item in items %} property to render the products correctly on your website.

The code will look as follows:

From:
{{#each items}} itemcount='4'
{{name}}
{{description}}
{{/each}}

To:
{% for item in items %}
{{item.name}}
{{item.description}}
{% endfor %}

Furthermore, you also have to use the correct query selector for the content to load; this can also be set up in your template.

You can use your CSS styling and place it in the CSS tab within Spotler Activate, and of course, you can use other Nunjucks in your code as you see fit. See the above link in the documentation for that.

See the following documentation for other topics regarding the transfer from Datatrics to Spotler Activate.