Загрузка блоков для конструктора
В конструкторе email-рассылок можно собрать шаблон из визуальных блоков.
Помимо стандартных, в галерею конструктора можно загрузить собственные блоки, в том числе с изменяемыми частями, и использовать их при сборке рассылок.
Чтобы добавить пользовательский блок, нужно:
- Разметить собственную HTML-верстку:
- Обозначить границы и название блока.
- Ввести параметры в те места, где нужно иметь возможность редактировать контент или его стили.
- Загрузить верстку в Mindbox и прописать настройки для параметров из файла.
Рассмотрим подробнее по шагам.
I этап — проставить параметры в HTML
Обозначить блоки
Блок — это независимый этаж верстки, обычно начинается с тега <table>
со своими стилями таблицы.
Чтобы выделить его в верстке, добавьте перед ним комментарий формата:
<!-- EDITOR_BLOCK_TEMPLATE: part_1-->
где part_1
— системное имя блока.
Особенности системного имени
- Можно использовать латинские буквы, цифры и знак подчеркивания (_);
- Cохраняется у блока навсегда и должно быть уникальным в рамках проекта;
- При загрузке блока с тем же системным именем, предыдущая версия блока из галереи перезапишется. При этом в рассылках, где блок уже был добавлен, ничего не поменяется.
Пример разметки:
<!-- EDITOR_BLOCK_TEMPLATE: mindbox_1-->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 20px 15px 5px;">
Текст в блоке
</td>
</tr>
</table>
Проставить переменные для настроек элементов и ввода данных
Для обозначения изменяемых частей в блоке используйте переменные формата ${editor.<уникальное название параметра>}
— это добавит в интерфейс конструктора настройки редактирования элементов.
Переменные нужно проставить там, где:
- прописан контент (текст, картинка), который нужно будет вводить в рассылках;
- прописаны стили (размер шрифта, отступы, цвета), которые нужно будет настраивать в интерфейсе конструктора.
Правила именования переменных
- начало параметра до точки (
${editor.}
) строго не изменяемо; - название содержит только цифры, латиницу и подчеркивание. Не используйте в названии параметров тире (-) и кириллицу;
- название регистронезависимое, то есть
${editor.smth}
и${editor.SMTH}
будут восприниматься как один параметр; - название должно быть уникальным в рамках блока. Если в блоке задается две переменные с одинаковым названием, то для обоих мест будет единая настройка в интерфейсе конструктора.
Пример правильно заданных названий, которые будут отвечать за три разные настройки:
${editor.text}
${editor.text1}
${editor.text_1}
Добавить настройку скрытия и отображения элемента в блоке
Каждый элемент в блоке должен быть закрыт условиями, чтобы в интерфейсе была возможность его скрывать.
Для этого нужно обернуть верстку элемента в конструкцию: @{if editor.*}...@{end if}
Пример
...
@{if editor.shouldshowbutton}
<!-- Кнопка -->
<table cellpadding="0" cellspacing="0" border="0" width="155">
<tbody>
<tr>
<td align="center" valign="middle" height="56" width="155" style="height: 56px; background-color: ${editor.buttonbackground}; border-radius: ${editor.buttonborderradius}px;">
<a href="${editor.buttonurl}" target="_blank" style="display: block; width: 100%; height: 56px; font-size: ${editor.buttontextfontsize}px; line-height: 56px; font-family: Helvetiva, Arial, sans-serif; color: ${editor.buttoncolor}; text-decoration: none; white-space: nowrap; font-weight: bold;">${editor.buttonText}</a>
</td>
</tr>
</tbody>
</table>
@{end if}
...
где shouldshowbutton
— пример переменной; названия задаются по тем же правилам, что описаны выше.
Результат в конструкторе:
Добавить изменение текста
Текст в блоке может быть статическим, либо меняться в зависимости от рассылки.
Можно добавить возможность редактирования текста и его настроек, а именно:
- изменение значения;
- редактирование стилей (жирность, курсив, подчеркивание, центрирование, цвет, простановка ссылок);
- добавление персонализации.
Для этого замените в верстке значение элемента текста на переменную ${editor.*}
Пример
Было:
...
<div style="height: 8px; line-height: 8px; font-size: 8px;"> </div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #FFFFFF;">Следует отметить, что новая модель организационной деятельности обеспечивает актуальность.</div>
...
Стало:
...
@{if editor.shouldshowmessagetext}
<div style="height: 8px; line-height: 8px; font-size: 8px;"> </div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...
Результат в конструкторе:
Добавить изменение настроек текста
Чтобы добавить другие настройки текста (размер шрифта, межстрочное расстояние и т.д.), проставьте переменные вместо значений этих стилей.
Пример
Было:
...
@{if editor.shouldshowmessagetext}
<div style="height: 8px; line-height: 8px; font-size: 8px;"> </div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...
Стало:
...
@{if editor.shouldshowmessagetext}
<div style="height: 8px; line-height: 8px; font-size: 8px;"> </div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: ${editor.textfontsize}px; line-height: ${editor.lineheight}px; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...
Результат в конструкторе:
Добавить настройки картинки
Можно добавить возможность редактирования изображения и его настроек, а именно:
- ссылки на картинку;
- ссылки перехода по картинке;
- alt-текст.
Для этого замените в верстке значение соответствующих элементов на переменные ${editor.*}
Пример
Было:
...
<a href="https://mindbox.ru"><img src="https://imgems.ru/mindbox/280224/s1.png" alt="alt-текст"></a>
...
Стало:
...
@{if editor.shouldshowimage}
<a href="${editor.imageurl}"><img src="${editor.image}" alt="${editor.imagealt}"></a>
@{end if}
...
Результат в конструкторе:
Добавить настройку ширины картинки
Чтобы добавить возможность менять ширину картинки в конструкторе, в теге <img>
пропишите:
- в атрибуте ширины —
width="${editor.*.formattedWidthAttribute}"
- в стилях картинки —
style="display: block; ${editor.*.formattedWidthStyle};"
Переменная *
должна быть одинаковой в обеих конструкциях.
Пример
Было:
...
<td width="100%" style="padding: 10px" >
<img width="48"
src="${editor.image}"
alt="${editor.imagealt}"/>
</td>
...
Стало:
...
<td width="100%" style="padding: 10px" >
<img width="${editor.picture_logo.formattedWidthAttribute}"
src="${editor.image}"
alt="${editor.imagealt}"
style="display: block; ${ editor.picture_logo.formattedWidthStyle };"/>
</td>
...
Результат в конструкторе:
Добавить настройку высоты картинки
Чтобы добавить возможность менять высоту картинки в конструкторе, в теге <img>
пропишите:
- в атрибуте ширины —
width="${editor.*.formattedWidthAttribute}"
- в стилях картинки —
style="display: block; ${editor.*.formattedWidthStyle};"
Переменная *
должна быть одинаковой в обеих конструкциях.
Пример
Было:
...
<td width="100%" style="padding: 10px" >
<img width="48"
src="${editor.image}"
alt="${editor.imagealt}"/>
</td>
...
Стало:
...
<td width="100%" style="padding: 10px" >
<img width="${editor.picture_logo.formattedWidthAttribute}"
src="${editor.image}"
alt="${editor.imagealt}"
style="display: block; ${ editor.picture_logo.formattedWidthStyle };"/>
</td>
...
Результат в конструкторе:
Добавить настройку размера кнопки
Чтобы добавить возможность менять размер кнопки в конструкторе, в стилях кнопки в атрибуте <padding>
пропишите значение ${editor.*}
Пример
Было:
...
<td style="height: 56px; background-color: ${editor.buttonbackground}; border-radius: ${editor.buttonborderradius}px;">
<a href="${editor.buttonurl}">${editor.buttonText}</a>
</td>
...
Стало:
...
<td style="height: 56px; background-color: ${editor.buttonbackground}; border-radius: ${editor.buttonborderradius}px; padding: ${ editor.button_padding };">
<a href="${editor.buttonurl}">${editor.buttonText}</a>
</td>
...
Результат в конструкторе:
Добавить настройку “разрыва” после блока
Чтобы в интерфейсе конструктора была возможность управлять высотой отступа вне блока сверху или снизу, и чтобы фон этого отступа был такой же как у письма, добавьте в блок следующую конструкцию с переменной ${editor.*}
:
...
<tr>
<td>
<div style="height:${editor.gap}px; line-height: 36px; font-size: 8px "> </div>
</td>
</tr>
...
или
...
<tr>
<td style="height: ${editor.gap}px; background: transparent;"></td>
</tr>
...
Пример:
<!-- EDITOR_BLOCK_TEMPLATE: newblock2-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size: 1px; line-height: normal; background-color: #ffffff;">
<tbody>
<tr>
...
</tr>
<tr>
<td>
<div style="height: ${editor.gap}px; line-height: 10px; font-size: 8px; background: transparent;"> </div>
</td>
</tr>
</tbody>
</table>
Результат в конструкторе:
Добавить настройку четырех отступов у блока или элемента (padding)
Чтобы в интерфейсе конструктора была возможность управлять внутренними отступами, разметьте стиль padding
переменной.
Пример
Было:
...
<td align="center" valign="middle" height="56" width="155" style="padding: 10px 20px 15px 5px;">
<a href="${editor.buttonurl}">${editor.buttonText}</a>
</td>
...
Стало:
...
<td align="center" valign="middle" height="56" width="155" style="padding: ${editor.padding};">
<a href="${editor.buttonurl}">${editor.buttonText}</a>
</td>
...
Результат в конструкторе:
Товарная сетка
Есть два способа верстки товарной сетки:
- Статический — значения для каждого продукта (картинки, ссылки и т.д.) задаются вручную;
- Динамический — указывается коллекция продуктов для вывода и задаются общие для всех карточек правила вывода с помощью параметров шаблонизатора.
Чтобы сетку можно было использовать для обоих типов задач, создайте по блоку на каждый тип.
Статическая сетка
Пример
Было:
<div>
<!-- Первая карточка -->
<a href="https://mindbox.ru/"><img src="https://amazingred.ru/upload/resize_cache/iblock/6ef/500_500_1/h3ioke2bw2b93ft14oho1076sebsqno8.jpg" alt="Кроссовки Nike 350" /></a>
<a href="https://mindbox.ru/">Кроссовки Nike 350</a>
<!-- Вторая карточка -->
<a href="https://mindbox.ru/"><img src="https://magazinqueens.ru/upload/resize_cache/iblock/317/653_653_2/31744f25887aea550f679ab39439b9a2.jpg" alt="Кроссовки Nike" /></a>
<a href="https://mindbox.ru/">Кроссовки Nike</a>
</div>
Стало:
<!-- EDITOR_BLOCK_TEMPLATE: static-->
<div>
<!-- Первая карточка -->
<a href="${editor.product_1_Url}"><img src="${editor.product_1_PictureUrl}" alt="${editor.product_1_alttext}" /></a>
<a href="${editor.product_1_Url}">${editor.product_1_name}</a>
<!-- Вторая карточка -->
<a href="${editor.product_2_Url}"><img src="${editor.product_2_PictureUrl}" alt="${editor.product_2_alttext}" /></a>
<a href="${editor.product_2_Url}">${editor.product_2_name}</a>
</div>
Результат в конструкторе:
Начальная верстка
Размеченная верстка
Динамическая сетка
Оставьте верстку одной карточки продукта, проставьте переменные и оберните карточку в конструкцию: @{for editor.*}...@{end for}
Пример
Было:
<div>
<!-- Первая карточка -->
<a href="https://mindbox.ru/"><img src="https://amazingred.ru/upload/resize_cache/iblock/6ef/500_500_1/h3ioke2bw2b93ft14oho1076sebsqno8.jpg" alt="Кроссовки Nike 350" /></a>
<a href="https://mindbox.ru/">Кроссовки Nike 350</a>
<!-- Вторая карточка -->
<a href="https://mindbox.ru/"><img src="https://magazinqueens.ru/upload/resize_cache/iblock/317/653_653_2/31744f25887aea550f679ab39439b9a2.jpg" alt="Кроссовки Nike" /></a>
<a href="https://mindbox.ru/">Кроссовки Nike</a>
</div>
Стало:
<!-- EDITOR_BLOCK_TEMPLATE: dynamic-->
<div>
@{ for item in editor.collection }
<!-- Карточка -->
<a href="${editor.product_Url}"><img src="${editor.product_PictureUrl}" alt="${editor.product_alttext}" /></a>
<a href="${editor.product_Url}">${editor.product_name}</a>
@{ end for }
</div>
где collection
— пример переменной, в которую будет передаваться коллекция продуктов.
Результат в конструкторе:
Начальная верстка
Размеченная верстка
Для сеток, созданных через табличную верстку (<table>)
При разметке таблицы для динамической сетки важно правильно расставить границы циклов.
Пример
...
<table>
@{for row in Tablerows(editor.collection, 3)}
<tr>
@{for cell in row.Cells}
<td>
@{if cell.Value != null}
<img src="${editor.card_image}" />
${editor.card_name_1}
@{end if}
</td>
@{end for}
</tr>
@{end for}
</table>
...
Адаптивность
Чтобы товарные карточки в зависимости от доступной ширины устройства перестраивались друг под друга, то есть сетка была адаптивной, товарная сетка должна быть сверстана через div.
Если же нужно чтобы товарная сетка отображалась на десктопе и на мобильных устройствах одинаково, то есть не перестраивалась под ширину устройства, нужно сверстать товарный блок через таблицу.
Кастомизация блока
Если в блоке нужно использовать сложную логику или расчеты, необходимые проверки можно ввести на уровне верстки.
Например, нужно выводить блок со старой ценой, только если она больше текущей.
Было:
...
<table>
@{for row in Tablerows(editor.collection, 3)}
<tr>
@{for cell in row.Cells}
<td>
@{if cell.Value != null}
${editor.card_name}
${editor.oldprice}
${editor.price}
@{end if}
</td>
@{end for}
</tr>
@{end for}
</table>
...
Стало:
...
<table>
@{for row in Tablerows(editor.collection, 3)}
<tr>
@{for cell in row.Cells}
<td>
@{if cell.Value != null}
${editor.card_name}
@{if cell.value.Product.oldPrice != null and cell.value.Product.oldPrice > cell.value.Product.Price}
Скидка: ${FormatDecimal((1 - cell.Value.Product.Price/cell.Value.Product.OldPrice) * 100, 'N0')} %
@{end if}
${editor.price}
@{end if}
</td>
@{end for}
</tr>
@{end for}
</table>
...
В конструкторе можно будет настраивать название и текущую цену, но кастомизированное поле всегда будет статично — его нельзя будет поменять.
Такой блок можно будет использовать только в механиках с заданным способом вывода продуктов — табличной версткой коллекции с обращением к продукту через параметр cell.value.Product
.
II этап — загрузить размеченный шаблон и прописать свойства созданных переменных
Загрузить верстку в Mindbox
Перейдите в раздел Настройки → Рассылки → Загрузка блоков для конструктора и загрузите подготовленный файл:
При отсутствии ошибок в разделе появятся блоки из файла:
На этом этапе блоки с переменными ещё не доступны для использования в конструкторе:
Чтобы завершить создание блоков, для каждой переменной, добавленной в верстку через ${editor.*}
, нужно прописать значения обязательных ключей.
Задать свойства переменных
Задайте свойства созданных настроек конструктора в формате JSON.
Для каждой переменной нужно задать пять признаков: "name"
, "type"
, "defaultValue"
, "role"
, "group"
.
"name"
— уникальное имя переменной, которое задано в${editor.*}
после точки. Обязательно и уже заполнено при загрузке блока."type"
— тип настройки в интерфейсе конструктора. Обязательно.
Значение берется строго из таблицы ниже."defaultValue"
— значение по умолчанию, которое отобразится в конструкторе до внесения изменений. Обязательно.
Добавляемая настройка | type | defaultValue |
---|---|---|
Длинный текст с настройками стилей (жирность, курсив, подчеркивание, центрирование, цвет, простановка ссылок) | TEXT | Любой длинный текст на несколько абзацей |
Стили для длинного текста: шрифт, размер, начертание, межстрочное расстояние, межбуквенное расстояние | TEXT_STYLES | Пример: {"font": "Geneva", "fontSize": "10", "lineHeight": "1.15", "inscription": "underlined", "fallbackFont": "Arial", "letterSpacing": "5"} Список возможных значения для каждой настройки: font : "Roboto" | "Open Sans" | "Montserrat" | "Inter" | "Arial" | "Geneva" | "Helvetica" | "Times New Roman" | "Verdana" | "Courier / Courier New" | "Tahoma" | "Georgia" | "Palatino" | "Trebuchet MS", fontSize : <число>, lineHeight : "1.0" / "1.15" / "1.5" / "2.0", inscription : "regular" / "bold" / "italic" / "underlined" / "crossed", fallbackFont : "Arial" | "Geneva" | "Helvetica" | "Times New Roman" | "Verdana" | "Courier / Courier New" | "Tahoma" | "Georgia" | "Palatino" | "Trebuchet MS", letterSpacing : <число> Если в мастер-шаблоне используется кастомный шрифт, его можно зафиксировать на уровне верстки, но в таком случае менять стили не в конструкторе не получится. |
Короткий текст без настроек стилей (жирность, курсив, подчеркивание, центрирование, цвет, простановка ссылок), только поле ввода: текст в кнопках, в пунктах меню и других строчных элементах | SIMPLE_TEXT | Любой короткий текст на одну или несколько строк |
Стили для короткого текста: шрифт, размер, начертание, межстрочное расстояние, межбуквенное расстояние, цвет | SIMPLE_TEXT_STYLES | Пример: {"font": "Geneva", "fontSize": "10", "lineHeight": "1.15", "inscription": "underlined", "fallbackFont": "Arial", "letterSpacing": "5", "color": "#FF0000"} Список возможных значения для каждой настройки: font : "Roboto" | "Open Sans" | "Montserrat" | "Inter" | "Arial" | "Geneva" | "Helvetica" | "Times New Roman" | "Verdana" | "Courier / Courier New" | "Tahoma" | "Georgia" | "Palatino" | "Trebuchet MS", fontSize : <число>, lineHeight : "1.0" / "1.15" / "1.5" / "2.0", inscription : "regular" / "bold" / "italic" / "underlined" / "crossed", fallbackFont : "Arial" | "Geneva" | "Helvetica" | "Times New Roman" | "Verdana" | "Courier / Courier New" | "Tahoma" | "Georgia" | "Palatino" | "Trebuchet MS", letterSpacing : <число>, color : <цвет в HEX> Если в мастер-шаблоне используется кастомный шрифт, его можно зафиксировать на уровне верстки, но в таком случае менять стили не в конструкторе не получится. |
Размер шрифта, “разрыва”; любая настройка стиля, где нужно менять одно число | NUMBER | Любое число |
Alt-text у картинки | ALT | Любой текст |
Цвет | COLOR | Любой цвет в формате #000000 |
Ссылка | URL | Любая ссылка в формате "https://mindbox.ru" |
Картинка | IMAGE | Любая ссылка на картинку в формате "images/img.png" |
Иконка | ICON | Любая ссылка на картинку в формате "images/img.png" |
Ширина картинки | SIZE | Состоит из:
{ "name": "logo", "type": "SIZE", "defaultValue": "manual 55 *", "extra": { "defaultMaxWidth": "600px", "allowedTypes": [ "inherit", "manual" ] }, "role": null, "group": null }, |
Скругления для четырех углов | BORDER_RADIUS | Указываются 4 дефолтных значения для всех углов через пробел в формате 25 25 25 25 |
Настройка скрытия и отображения элемента | DISPLAY_TOGGLE | “true" |
Отступы блока для четырех значений | INNER_SPACING | Указываются 4 дефолтных значения для всех отступов через пробел в формате 25 25 25 25 |
Размер кнопки | PADDINGS | Указывается два дефолтных значения через пробел для отступов по вертикали и по горизонтали в формате 10 20 |
Настройка выравнивания | ALIGN | “left” / “right” / “center” |
Выбор механики, по которой нужно заполнить динамическую продуктовую сетку. Проставляется только у параметра из конструкции @{for editor.*}... @{end for} |
PRODUCTS_IN_FOR_NODE | Любая из механик и количество выводимых товаров через запятую:
|
Например, добавление поля с
"type": "COLOR", "defaultValue": "#FFFFFF"
создаст в конструкторе настройку выбора цвета с заданным по умолчанию белым цветом:
"role"
— назначение параметра в динамической карточке продукта из товарной сетки. Обязательно для динамических сеток. В остальных параметрах значение null.
Значение берется строго из таблицы ниже.
Добавляемая настройка | role | defaultValue |
---|---|---|
Название продукта | ProductTitle | Любой текст |
Актуальная цена продукта | ProductPrice | Любой текст |
Старая цена продукта | ProductOldPrice | Любой текст |
Ссылка на продукт | ProductUrl | Любой текст |
Картинка продукта | ProductImageUrl | Любой текст |
Описание продукта | ProductDescription | Любой текст |
Выбор механики (для переменной "type": "PRODUCTS_IN_FOR_NODE" ) |
ProductCount | Одно из значений:
|
Дополнительные данные о продукте | ProductBadge | Любой текст |
По значению в role
в поле конструктора автоматически подставляется персонализация по продукту.
Например, добавление в карточку продукта в сетке поля со значением
"role": "ProductUrl"
создаст в конструкторе настройку ввода ссылки с уже проставленным параметром ссылки:
Важно: для полей по цене (ProductOldPrice
и ProductPrice
) задавайте строковой тип ("type": "TEXT"
).
Для дополнительных полей персонализацию нужно будет добавить вручную в конструкторе.
- "group" — название смысловой группы настроек, к которой относится параметр. Например: настройки блока, картинка, кнопка, текст. Не обязательно.
Например, добавление поля с
"role": "ProductBadge", "group": "Доп поля"
создаст в конструкторе соответствующий раздел настроек:
Задайте название для удобного поиска в конструкторе. После заполнения всех обязательных полей сохраните блок:
Примеры
Текстовый блок с кнопкой
Начальная верстка:
Размеченная верстка:
JSON:
Динамическая сетка продуктов
Начальная верстка:
mindbox-original-products.HTML
Размеченная верстка:
JSON: