Настройка динамического контента для триггерных механик

Если для хранения информации о товарах в enKod вы используете товарный фид, то для работы с динамическим контентов триггерных механик вы можете воспользоваться готовым кодом из этой инструкции.

Представим, что в письмо вам нужно выводить товары из корзины друг под другом, а также указывать у каждого товара все параметры, которые отображены в вёрстке:

• изображение товара
• наименование товара
• цена товара
• количество товаров
• ссылка на товар в кнопке или, как в текущем примере, в изображении товара:

Для данной задачи можно использовать код:

<!--{%

var noPhotoPicture = "Ссылка на картинку-заглушку";
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;
//Здесь можно добавить любые иные необходимые вам переменные по аналогии.

%}-->

Этот код нужно разместить перед карточкой товара (как на примере выше, между тегами </div> и <div>), предварительно заменив:

• Ссылка на картинку-заглушку - этот текст в переменной noPhotoPicture нужно заменить на реальную ссылку на картинку (она будет отображаться в письме, если у товара не будет найдена ссылка на изображение)
• //Здесь можно добавить любые иные необходимые вам переменные по аналогии - эту строчку можно удалить, если вам не нужные дополнительные пераметры, не указанные в задаче.

Если в карточке товара присутствуют другие параметры, которые выводятся в письмо, нужно создать новую переменную с понятным названием. Например, если это артикул, то id; если это цвет, то color – так, чтобы по названию можно было понять, какое значение лежит в этой переменной, и записать в неё значение из параметра объекта 'productsCard' (productsCard[порядковый_номер_товара_в_выборке].название_параметра):

var id = productsCard[i].id; 

Далее в самой верстке нужно расставить динамический контент, чтобы нужные значения выводились в письме у получателей:

• изображение товара

Ссылка на изображение товара подставляется внутрь кавычек атрибута src=«{{picture}}» тега img.

• наименование товара

Вместо названия товара в тексте сообщения укажите {{name}}.

• артикул товара

Вместо номера артикула укажите {{id}}.

• цена товара

Цена товара - {{price}}.

• количество товаров

Количество товаров - {{count}}.

• ссылка на товар в кнопке или, как в текущем примере, в изображении товара

Ссылка на товар подставляется внутрь кавычек атрибута href=«{{url}}» тега a.

После вёрстки блока с товаром вставляем следующий код, который определяет границы цикла, в рамках которого мы выводим товары:

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

Таким образом происходит вывод товаров из корзины в письмо. Если у вас верстка не с такой структурой, а, например, с двумя или тремя товарами в ряд, то нужно будет перед выводом блока проверять, не закончились ли товары для вывода, иначе может появиться ошибка.

Обычно такая проверка выглядит так (код вставляется перед версткой каждой карточки товара):

<!--{%

    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;
    //Здесь вы можете ввести дополнительные переменные, если они вам требуются

%}-->

После каждой карточки товара нужно будет вставить следующий код, чтобы обозначить границы действия условия if:

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

Брошенный просмотр реализуется по аналогии с брошенной корзиной, но требуется ряд изменений в коде:

• добавляется строка для выбора уникальных товаров, так как метод возвращает объекты всех просмотров товаров, которые были у контакта;
• изменяются названия переменных в соответствии с тем, какая информация в них находится (open, unicOpens, productsOpen);
• выводятся только последние просмотренные 4, 5 или 6 товаров (в зависимости от вашего выбора) - в примере выводится 6, это можно поменять в строке с if (i == 6) break, где 6 - это количество выводимых товаров.

<!--{%

var noPhotoPicture = "Ссылка на картинку-заглушку";
var open = GetOpens(100, Newest);
var unicOpens = [...open].reduce((a, c) => (a.map(e=>e.productId).includes(c.productId) || a.push(c), a), []);//в этой строке происходит выбор уникальных товаров
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;
//Здесь можно добавить любые иные необходимые вам переменные по аналогии

%}-->

• Ссылка на картинку-заглушку - этот текст в переменной noPhotoPicture нужно заменить на реальную ссылку на картинку (она будет отображаться в письме, если у товара не будет найдена ссылка на изображение)
• //Здесь можно добавить любые иные необходимые вам переменные по аналогии - эту строчку можно удалить, если вам не нужные дополнительные переменные, не указанные в задаче.

Далее идёт вывод переменных в вёрстку, как в случае с корзиной. Например:

• вместо названия товара в тексте сообщения укажите {{name}},
• ссылка на товар подставляется внутрь кавычек атрибута href=«{{url}}» тега a
• и т. д.

Не забудьте определить границы цикла, после блока с товаром подставить код:

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

Если у вас верстка с отличной от описанного структурой, например, с двумя или тремя товарами в ряд, то нужно будет перед выводом блока проверять, не закончились ли товары для вывода, иначе может появиться ошибка. Обычно такая проверка выглядит так (код вставляется перед версткой каждой карточки товара):

<!--{%

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;

%}-->

Следующий код нужно вставить после каждой карточки с товаром, чтобы обозначить границы действия условия if:

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

Письмо с товарами, брошенными в избранном, похожи на брошенную корзину – отличается только название переменных.

Код для вставки:

<!--{%

var noPhotoPicture = "Ссылка на картинку-заглушку";

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;
//Здесь можно добавить любые иные необходимые вам переменные по аналогии

%}-->

• Ссылка на картинку-заглушку - этот текст в параметре noPhotoPicture нужно заменить на реальную ссылку на картинку (она будет отображаться в письме, если у товара не будет найдена ссылка на изображение)
• //Здесь можно добавить любые иные необходимые вам переменные по аналогии - эту строчку можно удалить, если вам не нужные дополнительные пераметры, не указанные в задаче.

Далее идёт вывод переменных в вёрстку, как в случае с корзиной. Например:

• вместо названия товара в тексте сообщения укажите {{name}},
• ссылка на товар подставляется внутрь кавычек атрибута href=«{{url}}» тега a
• и т. д.

Не забудьте определить границы цикла, после блока с товаром подставить код:

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

Если у вас верстка с отличной от описанного структурой, например, с двумя или тремя товарами в ряд, то нужно будет перед выводом блока проверять, не закончились ли товары для вывода, иначе может появиться ошибка. Обычно такая проверка выглядит так (код вставляется перед версткой каждой карточки товара):

<!--{%

if (i + 1 < 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;

%}-->

Следующий код нужно вставить после каждой карточки с товаром, чтобы обозначить границы действия условия if:

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