Загрузка блоков для конструктора

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

Чтобы добавить пользовательский блок, нужно:

  1. Разметить собственную HTML-верстку:
    1. Обозначить границы и название блока.
    2. Ввести параметры в те места, где нужно иметь возможность редактировать контент или его стили.
  2. Загрузить верстку в 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 — пример переменной; названия задаются по тем же правилам, что описаны выше.

Разметка в JSON: DISPLAY_TOGGLE

Результат в конструкторе:

email-editor-upload-blocks-show.png

Добавить изменение текста

Текст в блоке может быть статическим, либо меняться в зависимости от рассылки.

Можно добавить возможность редактирования текста и его настроек, а именно:

  • изменение значения;
  • редактирование стилей (жирность, курсив, подчеркивание, центрирование, цвет, простановка ссылок);
  • добавление персонализации.

Для этого замените в верстке значение элемента текста на переменную ${editor.*}

Пример

Было:

...
<div style="height: 8px; line-height: 8px; font-size: 8px;">&nbsp;</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;">&nbsp;</div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...

Разметка в JSON: TEXT, SIMPLE_TEXT

Результат в конструкторе:

email-editor-upload-blocks-text-default2.png

Добавить изменение настроек текста

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

Пример

Было:

...
@{if editor.shouldshowmessagetext}
<div style="height: 8px; line-height: 8px; font-size: 8px;">&nbsp;</div>
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">${editor.messagetext}</div>
@{end if}
...

Стало:

...
@{if editor.shouldshowmessagetext}
<div style="height: 8px; line-height: 8px; font-size: 8px;">&nbsp;</div>
<div style="${editor.textstyles}">${editor.messagetext}</div>
@{end if}
...

Разметка в JSON: TEXT_STYLES, SIMPLE_TEXT_STYLES

Результат в конструкторе:

email-editor-upload-blocks-text-style-new.png

Добавить настройки картинки

Можно добавить возможность редактирования изображения и его настроек, а именно:

  • ссылки на картинку;
  • ссылки перехода по картинке;
  • 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}
...

Разметка в JSON: URL, IMAGE, ALT, ICON

Результат в конструкторе:

email-editor-upload-blocks-text-image.png

Добавить настройку ширины картинки

Чтобы добавить возможность менять ширину картинки в конструкторе, в теге <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>
...

Разметка в JSON: SIZE

Результат в конструкторе:

email-editor-upload-blocks-image-width.png

Добавить настройку высоты картинки

Чтобы добавить возможность менять высоту картинки в конструкторе, в теге <img> пропишите:

  • в атрибуте высоты — height="${editor.*.formattedHeight}"
  • в стилях картинки — style="height: ${editor.*.formattedHeight};"

Переменная * должна быть одинаковой в обеих конструкциях.

Пример

Было:

...
<td>
	<img  height="48"
	src="${editor.image}" 
	alt="${editor.imagealt}"/>
</td>                                                                         
...

Стало:

...
<td>
	<img  height="${editor.logo.formattedHeight}"
	src="${editor.image}" 
	alt="${editor.imagealt}" 
	style="display: block; height: ${editor.logo.formattedHeight};"/>
</td>
...

Разметка в JSON: HEIGHTV2

Результат в конструкторе:

email-editor-upload-blocks-image-height.png

Добавить настройку высоты контейнера текста

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

  • в атрибуте высоты — height="${editor.*.containerHeightAttribute}""
  • в стилях style="${editor.*.containerStyle};"

Переменная * должна быть одинаковой в обеих конструкциях.

Пример

Было:

...
<div style="height: 55px;">
    <a href="${editor.Url}">${editor.name}</a>
</div>                                                                         
...

Стало:

...
<div style="${editor.name_text_size.containerStyle};" height="${editor.name_text_size.containerHeightAttribute}">
    <a href="${editor.Url}">${editor.name}</a>
</div>  
...

Разметка в JSON: TEXT_SIZE

Результат в конструкторе:

email-editor-upload-blocks-text-size.png

Добавить настройку размера кнопки

Чтобы добавить возможность менять размер кнопки в конструкторе, в стилях кнопки в атрибуте <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>
...

Разметка в JSON: PADDINGS

Результат в конструкторе:

email-editor-upload-blocks-button-padding.png

Добавить настройку четырех отступов у блока или элемента (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>
...

Разметка в JSON: INNER_SPACING

Результат в конструкторе:

email-editor-upload-blocks-text-padding.png

Добавить настройку фона блока

Чтобы добавить возможность задавать фон блока, в теге нужного элемента пропишите:

  • в атрибуте фона — bgcolor="${editor.*.color}"
  • в стилях style=" ${editor.*.formattedBackgroundStyles};"
  • конструкцию ${if(editor.*.type = "image", 'background="' & editor.*.image & '"', "" ) }

Переменная * должна быть одинаковой во всех параметрах.

Пример

Было:

...
<td>
    <div>${editor.messagetext}</div>
</td>                                                                        
...

Стало:

...
<td bgcolor="${editor.bg_for_text.color }" style="${ editor.bg_for_text.formattedBackgroundStyles };" ${ if(editor.bg_for_text.type = "image", 'background="' & editor.bg_for_text.image & '"', "" ) }>
    <div>${editor.messagetext}</div>
</td>
...

Разметка в JSON: BACKGROUND

Результат в конструкторе:

email-editor-upload-blocks-background.png

Добавить настройку обводки блока

Чтобы добавить возможность задавать обводку блока, в стиле нужного тега пропишите style="border:${ editor.*}"

Пример

Было:

...
<td>
    <div>${editor.messagetext}</div>
</td>                                                                        
...

Стало:

...
<td style="border:${editor.text_border};">
    <div>${editor.messagetext}</div>
</td>
...

Разметка в JSON: BORDER

Результат в конструкторе:

email-editor-upload-blocks-border.png

Добавить настройку «разрыва» после блока

Чтобы в интерфейсе конструктора была возможность управлять высотой отступа вне блока сверху или снизу, и чтобы фон этого отступа был такой же как у письма, добавьте в блок следующую конструкцию с переменной ${editor.*}:

...
<tr>
    <td>
        <div style="height:${editor.gap}px; line-height: 36px; font-size: 8px ">&nbsp;</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;">&nbsp;</div>
            </td>
        </tr>
    </tbody>
</table>

Результат в конструкторе:

email-editor-upload-blocks-text-gap.png

Товарная сетка

Есть два способа верстки товарной сетки:

  • Статический — значения для каждого продукта (картинки, ссылки и т.д.) задаются вручную;
  • Динамический — указывается коллекция продуктов для вывода и задаются общие для всех карточек правила вывода с помощью параметров шаблонизатора.

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

Статическая сетка

Пример

Было:

<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>

Результат в конструкторе:

email-editor-upload-blocks-static.png

Начальная верстка

Размеченная верстка

Динамическая сетка

Оставьте верстку одной карточки продукта, проставьте переменные и оберните карточку в конструкцию: @{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 — пример переменной, в которую будет передаваться коллекция продуктов.

Разметка в JSON: PRODUCTS_IN_FOR_NODE

Результат в конструкторе:

email-editor-upload-blocks-dynamic.png

Начальная верстка

Размеченная верстка

Для сеток, созданных через табличную верстку (<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

Перейдите в раздел Настройки → Рассылки → Загрузка блоков для конструктора и загрузите подготовленный файл:

email-editor-upload-blocks-upload.png

При отсутствии ошибок в разделе появятся блоки из файла:

email-editor-upload-blocks-upload-success.png

На этом этапе блоки с переменными ещё не доступны для использования в конструкторе:

email-editor-upload-blocks-upload-not-ready.png

Чтобы завершить создание блоков, для каждой переменной, добавленной в верстку через ${editor.*}, нужно прописать значения обязательных ключей.

Задать свойства переменных

Задайте свойства созданных настроек конструктора в формате JSON.

email-editor-upload-blocks-json-before.png

Для каждой переменной нужно задать пять признаков: "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 Любое число
Цвет COLOR Любой цвет в формате #000000
Фон блока BACKGROUND Можно задать тремя способами: прозрачный фоном, сплошным цветом или картинкой.
Прозрачный фон:
"defaultValue": {
 "type": "transparent"
}
Сплошной цвет:
"defaultValue": {
 "type": "color",
 "color": "<цвет>"
}
Фон картинкой:
"defaultValue": {
 "type": "image",
 "mode": "contain / cover / repeat / stretch",
 "color": "<цвет>",
 "url": "<ссылка>"
},
Обводка блока BORDER Без обводки — "none".
С обводкой: тип обводки (solid / dashed / dotted),
цвет (<любой цвет>) и толщина (<число>) — через пробел.
Например, "defaultValue": "solid black 2"
Ссылка URL Любая ссылка в формате "https://mindbox.ru"
Картинка IMAGE Любая ссылка на картинку в формате "images/img.png"
Alt-text у картинки ALT Любой текст
Иконка ICON Любая ссылка на картинку в формате "images/img.png"
Ширина картинки SIZE Состоит из:
  • "manual 55 *", число — любое до 100;
  • объект "extra" со значениями:
    • "defaultMaxWidth" — значение ширины письма;
    • "allowedTypes", где записываются все варианты ширины для картинки:
      • "inherit" — «По ширине блока»,
      • "manual" — «Настраиваемая вручную»
Таким образом, правильно заполненный JSON будет выглядеть так:
{
"name": "logo",
"type": "SIZE",
"defaultValue": "manual 55 *",
"extra": {
"defaultMaxWidth": "600px",
"allowedTypes": [
"inherit",
"manual"
]
},
"role": null,
"group": null
},
Высота картинки HEIGHTV2 Указываются 2 дефолтных значения через пробел в формате 50 50
Высота контейнера текста TEXT_SIZE Указываются 2 дефолтных значения через пробел в формате 30 30
Скругления для четырех углов 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 Любая из механик и количество выводимых товаров через запятую:
  • "RECIPIENT_RECOMMENDATIONS, 2"
  • "FROM_SEGMENT, 2"
  • "FROM_PRODUCT_LIST, 2"
  • "ORDER, 2"
  • "VIEWED_PRODUCTS_IN_SESSION, 2"
  • "PRODUCT_LIST_ITEM, 2"
  • "PRODUCT_VIEW, 2"
  • "FROM_CUSTOMER_COMPUTED_FIELD, 2"

Например, добавление поля с "type": "COLOR", "defaultValue": "#FFFFFF" создаст в конструкторе настройку выбора цвета с заданным по умолчанию белым цветом:
email-editor-upload-blocks-type-json.png
email-editor-upload-blocks-type-result.png

  • "role" — назначение параметра в динамической карточке продукта из товарной сетки. Обязательно для динамических сеток. В остальных параметрах значение null.

Значение берется строго из таблицы ниже.

Добавляемая настройка role defaultValue
Название продукта ProductTitle Любой текст
Актуальная цена продукта ProductPrice Любой текст
Старая цена продукта ProductOldPrice Любой текст
Ссылка на продукт ProductUrl Любой текст
Картинка продукта ProductImageUrl Любой текст
Описание продукта ProductDescription Любой текст
Выбор механики (для переменной "type": "PRODUCTS_IN_FOR_NODE") ProductCount Одно из значений:
  • “RECIPIENT_RECOMMENDATIONS”
  • “FROM_SEGMENT”
  • “FROM_PRODUCT_LIST”
  • “ORDER”
  • “VIEWED_PRODUCTS_IN_SESSION”
  • “PRODUCT_LIST_ITEM”
  • “PRODUCT_VIEW”
  • “FROM_CUSTOMER_COMPUTED_FIELD”
Дополнительные данные о продукте ProductBadge Любой текст

По значению в role в поле конструктора автоматически подставляется персонализация по продукту.

Например, добавление в карточку продукта в сетке поля со значением "role": "ProductUrl" создаст в конструкторе настройку ввода ссылки с уже проставленным параметром ссылки:
email-editor-upload-blocks-role-json.png
email-editor-upload-blocks-role-result.png

Важно: для полей по цене (ProductOldPrice и ProductPrice) задавайте строковой тип ("type": "TEXT").

Для дополнительных полей персонализацию нужно будет добавить вручную в конструкторе.

  • "group" — название смысловой группы настроек, к которой относится параметр. Например: настройки блока, картинка, кнопка, текст. Не обязательно.

Например, добавление поля с "role": "ProductBadge", "group": "Доп поля" создаст в конструкторе соответствующий раздел настроек:
email-editor-upload-blocks-group-json.png
email-editor-upload-blocks-group-result.png

Задайте название для удобного поиска в конструкторе. После заполнения всех обязательных полей сохраните блок:

email-editor-upload-blocks-naming-json.png
email-editor-upload-blocks-naming-result.png

Примеры

Текстовый блок с кнопкой

Начальная верстка:

mindbox-original-gap.HTML

Размеченная верстка:

mindbox-editors-gap.HTML

JSON:

mindbox-json-gap.json

Динамическая сетка продуктов

Начальная верстка:

mindbox-original-products.HTML

Размеченная верстка:

mindbox-editors-products.HTML

JSON:

mindbox-editors-json-products.json

Previous
«Добавить персонализацию»
Next
Обратиться по имени