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

В конструкторе 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 - пример переменной; названия задаются по тем же правилам, что описаны выше.

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

email-editor-upload-blocks-show.png

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

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

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

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

Для этого замените в верстке значение элемента текста на переменную ${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}
...

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

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; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...

Стало:

...
@{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: ${editor.textfontsize}px; line-height: ${editor.lineheight}px; color: #FFFFFF;">${editor.messagetext}</div>
@{end if}
...

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

email-editor-upload-blocks-text-style.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}
...

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

email-editor-upload-blocks-text-image.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

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

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

email-editor-upload-blocks-text-padding.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 - пример переменной, в которую будет передаваться коллекция продуктов.

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

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.

Если базовой разметкой не решить задачу

Например, нужно выводить старую цену продукта, только если она хотя бы на 10 процентов меньше текущей цены.
Функционалом конструктора такую задачу не решить, но можно прописать математическую операцию и проверку для на уровне верстки.

Было:

...
<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.Price / cell.Value.OldPrice) < 0.91}${editor.oldprice}@{end if}
            ${editor.price}
          @{end if}
          </td>
      @{end for}
      </tr>
  @{end for}
</table>
...

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 Любой текст
Текст без настроек стилей, только поле ввода: текст в кнопках, в пунктах меню и других строчных элементах SIMPLE_TEXT Любой текст
Размер шрифта, “разрыва”; любая настройка стиля, где нужно менять одно число NUMBER Любое число
Alt-text у картинки ALT Любой текст
Цвет COLOR Любой цвет в формате #000000
Ссылка URL Любая ссылка в формате "https://mindbox.ru"
Картинка IMAGE Любая ссылка на картинку в формате "images/img.png"
Скругления для четырех углов BORDER_RADIUS Указываются 4 дефолтных значения для всех углов через пробел в формате 25 25 25 25
Настройка скрытия и отображения элемента DISPLAY_TOGGLE “true"
Отступы блока для четырех значений INNER_SPACING Указываются 4 дефолтных значения для всех отступов через пробел в формате 25 25 25 25
Выбор механики, по которой нужно заполнить динамическую продуктовую сетку. Проставляется только у параметра из конструкции @{for editor.*}...@{end for} PRODUCTS_IN_FOR_NODE Одно из значений:
  • “RECIPIENT_RECOMMENDATIONS”
  • “FROM_SEGMENT”
  • “FROM_PRODUCT_LIST”
  • “ORDER”
  • “VIEWED_PRODUCTS_IN_SESSION”
  • “PRODUCT_LIST_ITEM”
  • “PRODUCT_VIEW”
  • “FROM_CUSTOMER_COMPUTED_FIELD”

Например, добавление поля с "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

Предыдущая
«Добавить персонализацию»
Следующая
Ограничить вывод блока по сегменту клиентов