Setting up dynamic content for trigger mechanics

If you use a product feed to store information about products in enKod, you can use the ready-made code from this instruction to work with dynamic content for trigger mechanics.

Abandoned cart

Let's imagine that in the email you need to display the items from the cart under each other, as well as specify for each product all the parameters that are displayed in the layout:

product image
product name
product price
quantity of products
link to the product in the button or, as in the current example, in the product image:

You can use the code for this task:

<!--{%

var noPhotoPicture = "Link to the cover picture";
let productsCardAll = GetCart.Products;
let productsId = new Array();

productsCardAll.forEach(product => {
    productsId.push(product.productId.toString());
});

var productsCard = GetProducts(...productsId);

if(!productsCard || productsCard.length == 0) Abort();

for (var i = 0; i < productsCard.length; i++){
    productsCard[i].count = productsCardAll.find(product => product.productId == productsCard[i].productId).count;
}

for (var i = 0; i < productsCard.length; i++){
    var url = productsCard[i].url;
    if (productsCard[i].picture){
    if (productsCard[i].picture.includes(",")) var picture = productsCard[i].picture.split(',')[0];
    else var picture = productsCard[i].picture;
    }
    else var picture = noPhotoPicture; 
    var name = productsCard[i].name;
    var price = productsCard[i].price;
    var count = productsCard[i].count;
//Here you can add any other variables you need by analogy.

%}-->

This code should be placed before the product card (as in the example above, between the tags </div> и <div>, having previously replaced:

Link to the cover picture - this text in the noPhotoPicture variable should be replaced with a real link to the picture (it will be displayed in the email if the product does not have a link to the picture).
//Here you can add any other variables you need by analogy % - This line can be deleted if you do not need additional parameters not specified in the task.

If there are other parameters in the product card that are displayed in the email, you need to create a new variable with a clear name. For example, if it is an article, then id; if it is a colour, then colour - so that you can understand by its name what value lies in this variable and write into it the value from the 'productsCard' object parameter (productsCard[item_number_in_selection].parameter_name):

var id = productsCard[i].id;

Next, in the layout itself, we need to arrange the dynamic content so that the desired values are displayed in the email to the recipients:

product image

The link to the product image is substituted inside the attribute quotes src="{{picture}}" tag img.

product name

Instead of the product name in the body of the message, enter {{name}}.

item number

Instead of the item number, please enter {{id}}.

price of goods

The price of the goods is. {{price}}.

number of products

Number of items - {{count}}.

product link in the button or, as in the current example, in the product image

The product link is substituted inside the attribute quotes href="{{url}}" tag a.

After inserting the block with the goods, we insert the following code, which defines the boundaries of the loop, within which we display the goods:

<!--{%
	}
%}-->

This is how the output of goods from the cart to the email is done. If you have a layout not with such a structure, but, for example, with two or three products in a row, you will need to check if you have run out of products to output before outputting the block, otherwise you may get an error.

Usually this check looks like this (the code is inserted before the layout of each product card):

<!--{%

    if (i + 1 < productsCard.length){
    i++;
    var url = productsCard[i].url;
    if (productsCard[i].picture){
    if (productsCard[i].picture.includes(",")) var picture = productsCard[i].picture.split(',')[0];
    else var picture = productsCard[i].picture;
    }
    else var picture = noPhotoPicture; 
    var name = productsCard[i].name;
    var price = productsCard[i].price;
    //Here you can add any other variables you need by analogy

%}-->

After each product card you will need to insert the following code to indicate the boundaries of the condition's validity if:

<!--{%
	}
%}-->

Abandoned view

Abandoned view is implemented similarly to abandoned cart, but requires a number of code changes:

a string is added to select unique products, since the method returns objects of all product views the contact has had;
variable names are changed according to what information they contain (open, unicOpens, productsOpen);
only the last viewed 4, 5 or 6 products are displayed (depending on the your choice) - in the example 6 is displayed, this can be changed in the line with if (i == 6) break where 6 is the number of output items.

<!--{%

var noPhotoPicture = "Link to the cover picture";
var open = GetOpens(100, Newest);
var unicOpens = [...open].reduce((a, c) => (a.map(e=>e.productId).includes(c.productId) || a.push(c), a), []);//this line is used to select unique items
if (!unicOpens || unicOpens.length == 0) Abort();

let productsId = new Array();

 unicOpens.forEach(product => {
   productsId.push(product.productId.toString());
 });

var productsOpen = GetProducts(...productsId);

if(!productsOpen || productsOpen.length == 0) Abort();

for (var i = 0; i < productsOpen.length; i++){
if (i == 6) break;
if (productsOpen[i].picture){
if (productsOpen[i].picture.includes(",")) var picture = productsOpen[i].picture.split(',')[0];
else var picture = productsOpen[i].picture;
}
else var picture = noPhotoPicture; 
var price = productsOpen[i].price;
var url = productsOpen[i].url;
var name = productsOpen[i].name;
//Here you can add any other variables you need by analogy

%}-->

Link to the cover picture - this text in the noPhotoPicture variable should be replaced with a real link to the picture (it will be displayed in the email if the product does not have a link to the picture).
//Here you can add any other variables you need by analogy - This line can be deleted if you do not need additional variables not specified in the task.

Next is the output of the variables in the layout, as in the case of the cart. For example:

instead of the product name in the text of the message specify {{name}},
the link to the product is substituted inside the attribute quotes href="{{url}}" tag a
etc.

Don't forget to define the loop boundaries, insert the code after the block with the product:

<!--{%
	}
%}-->

If you have a layout with a different structure from the one described above, for example, with two or three products in a row, you will need to check whether you have run out of products to output before outputting the block, otherwise you may get an error. Usually such a check looks like this (the code is inserted before the layout of each product card):

<!--{%

if (i + 1 < productsOpen.length){
i++;
if (i == 6) break;
if (productsOpen[i].picture){
if (productsOpen[i].picture.includes(",")) var picture = productsOpen[i].picture.split(',')[0];
else var picture = productsOpen[i].picture;
}
else var picture = noPhotoPicture; 
var price = productsOpen[i].price;
var url = productsOpen[i].url;
var name = productsOpen[i].name;

%}-->

The following code should be inserted after each product card to indicate the boundaries of the condition's validity if:

<!--{%
	}
%}-->

Abandoned favourites

An email with items abandoned in favourites is similar to an abandoned cart - only the variable names are different.

Insert code:

<!--{%

var noPhotoPicture = "Link to the cover picture";

var favourite = GetFavourite.Products;
let productsId = new Array();

favourite.forEach(product => {
  productsId.push(product.productId.toString());
});

var productsFavourite = GetProducts(...productsId);

if(!productsFavourite || productsFavourite.length == 0) Abort();

for (var i = 0; i < productsFavourite.length; i++){
if (productsFavourite[i].picture){
if (productsFavourite[i].picture.includes(",")) var picture = productsFavourite[i].picture.split(',')[0];
else var picture = productsFavourite[i].picture;
}
else var picture = noPhotoPicture; 
var price = productsFavourite[i].price;
var url = productsFavourite[i].url;
var name = productsFavourite[i].name;
//Here you can add any other variables you need by analogy

%}-->

Link to the cover picture - this text in the noPhotoPicture parameter should be replaced with a real link to the picture (it will be displayed in the email if the product does not have a link to the picture).
//Here you can add any other variables you need by analogy - This line can be deleted if you do not need additional parameters not specified in the task.