[NL] Kopiëren van embedded content van Datatrics naar Spotler Activate
Dit document legt uit hoe de embedded content van Datatrics naar Spotler Activate kan worden overgezet.
Opmerking: dit document toont niet hoe basisinstellingen moeten worden ingesteld en hoe je product sets dient aan te maken voor jouw personalisatie. Raadpleeg hiervoor dit document: https://squeezely.atlassian.net/wiki/spaces/SG/pages/2523201561 en https://squeezely.atlassian.net/wiki/spaces/SG/pages/2523168807.
Bij de overgang naar Spotler Activate vanaf het Datatrics-platform kunnen we ons voorstellen dat je de reeds werkende embedded content van Datatrics zou willen gebruiken en deze naar Spotler Activate zou willen verplaatsen.
Spotler Activate werkt niet op dezelfde manier als Datatrics, dus je moet delen van de code binnen jouw embedded content aanpassen.
Bijvoorbeeld, je hebt de volgende HTML code in Datatrics:
In Datatrics zou je gebruik maken van een each-loop om door jouw producten te itereren en een rij producten te tonen, zoals het onderstaande codevoorbeeld:
{{#each items}} itemcount='4'
<!-- YOUR HTML -->
{{/each}} Omdat je door producten heen loopt, zijn alle eigenschappen van items gedefinieerd als: {{property}}, zonder "item.".
Vereenvoudigd ziet het er zo uit:
{{#each items}} itemcount='4'
{{name}}
{{description}}
{{/each}}Kopieer eerst de gehele HTML-code van Datatrics naar jouw personalisatie in Spotler Activate.
Het grote verschil in Spotler Activate is dat we geen each-loop gebruiken, maar gebruikmaken van Nunjucks. Om een rij producten in Spotler Activate te tonen, kun je de volgende code gebruiken:
{% for item in items %}
{% endfor %}Dus vervang {{#each items}} itemcount='4' door {% for item in items %} en de afsluiting van de {{/each}} loop met {% endfor %}. Het gewenste itemaantal wordt ingesteld in het template van jouw personalisatie.
Daarnaast moet je alle item eigenschappen aanpassen die zijn ingesteld in de code van {{property}} naar {{item.property}}, aangezien dit nodig is voor de {% for item in items %} property om de producten correct op jouw website weer te geven.
De code in de personalisatie ziet er dan als volgt uit:
Van:
Naar:
Verder moet je ook de juiste queryselector gebruiken voor de inhoud om te laden; dit kan ook worden ingesteld in jouw template.
Je kunt jouw CSS-styling gebruiken en deze plaatsen in het CSS-tabblad binnen Spotler Activate, en natuurlijk kun je andere Nunjucks in jouw code gebruiken zoals je dat passend vindt. Zie de bovenstaande link in de documentatie daarvoor.
Bekijk de volgende documentatie voor andere onderwerpen met betrekking tot de overgang van Datatrics naar Spotler Activate.