Расширенная настройка шаблонов уведомлений (через код)

Эквид-магазин отправляет уведомления для покупателей, маркетинговые письма и уведомления для владельца магазина. У каждого письма есть свой шаблон, состоящий из HTML- и Freemarker-кода. Вы можете изменить код, чтобы отредактировать контент письма: добавить или удалить текст, добавить изображение, поменять размер или цвет шрифта и так далее.

Изменение темы письма

Тема — это заголовок письма, который видят покупатели, когда заходят в почту. Изменение темы письма поможет персонализировать ваши уведомления. Например, если вы придумали заголовок на период праздников.

Чтобы поменять тему письма:

1. В Панели управления Эквида, перейдите в Настройки → Уведомления.
2. Откройте шаблон письма, которое хотите отредактировать.
3. В поле Тема письма удалите код и введите новый заголовок. В нашем примере это «А вот и ваш заказ»:
   

   

4. Сохраните изменения.

Готово! Теперь во входящих будет отображаться указанная вами тема письма:

Изменение приветствия в письмах

Все письма покупателям по умолчанию начинаются с приветствия «Здравствуйте, John Darling», где John Darling — вымышленное имя покупателя, которое заменяется настоящим именем клиента. Приветствие продолжается краткой фразой по теме письма. Например, в письме о подтверждении заказа вторая строчка выглядит так: «Спасибо за покупку! Мы получили ваш заказ от 23-06-2022 и в ближайшее время приступим к его обработке».

Вы можете поменять как непосредственно приветствие, так и следующую за ним строку. Для этого нужно заменить текстовые метки в письме на нужные вам фразы.

Предположим, вы хотите изменить приветствие в письме о подтверждении заказа на следующее: «Привет, John Darling! Спасибо за выбор нашего бренда. Мы получили ваш заказ и скоро свяжемся с вами для подтверждения времени доставки».

Чтобы изменить приветствие в уведомлении:

1. В Панели управления Эквида перейдите в Настройки → Уведомления.
2. Откройте шаблон письма, которое хотите отредактировать. В нашем примере это шаблон «Заказ принят».
3. Найдите строку, которая содержит приветствие (customer greeting): <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :
   

   

4. Замените всю строку кода вашим сообщением. В нашем примере это: Привет, ${customer.name}!
5. Найдите строку, которая содержит фразу о подтверждении заказа: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } /> или <@rosetta.message key="OrderConfirmation.Confirmation.unpaid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated} />.
   В первом случае вы редактируете письмо для покупателей, оплативших заказ онлайн (Confirmation.paid_order), во втором случае — письмо для покупателей, которые оплатят товар после получения (Confirmation.unpaid_order). Если вы хотите изменить приветствие для всех покупателей, замените обе строки на следующем шаге.
6. Замените строку (или две строки) вашим текстом. В нашем примере мы заменим обе строки. Так уникальное приветствие увидят и те, кто оплатил онлайн, и те, кто хочет оплатить заказ при получении:
   

   

7. Сохраните изменения.

Готово. Теперь покупатели увидят выбранное вами приветствие в письме:

Добавление текста в письма для покупателей

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

Серые разметки в шаблоне выделяют разделы письма. Разметки помогут сориентироваться в шаблоне и найти нужный раздел для добавления текста.

Чтобы добавить текст в шаблон письма:

1. В Панели управления Эквида перейдите в Настройки → Уведомления.
2. Откройте шаблон письма, которое хотите отредактировать. В нашем примере это «Заказ принят».
3. Вставьте текст в нужный раздел письма. В нашем примере мы добавляем абзац после раздела с контактами магазина. Этот раздел находится между разметками <!-- Store contact info and help note : start --> и <!-- Store contact info and help note : end --> в конце шаблона.
4. Над серой строкой <!-- Store contact info and help note : end --> добавьте следующий код:

   
    <tr>
   <td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;"> 
           <p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px; color: ${colorText}; margin: 0; padding: 0;"> 
   ВАШ ТЕКСТ
           </p> 
         </td> 
       </tr> 
   

5. Замените фразу ВАШ ТЕКСТ в коде на нужный текст. Код будет выглядеть так:
   

   

6. Нажмите Сохранить.

Готово. Текст появится в выбранном вами месте. Чтобы проверить, правильно ли встал текст, нажмите Предпросмотр:

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

Изображения помогают привлечь внимание покупателей к распродаже, анонсу новой коллекции и так далее. Добавьте изображение в формате .jpeg, .png или .img в письмо, чтобы рассказать покупателям о событиях в вашем магазине.

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

1. Загрузите изображение на фотохостинг: ImgBB, Free Image Host или любой другой.
2. После загрузки откройте изображение в браузере и скопируйте ссылку. Ссылка должна заканчиваться на .png, .jpeg, или .img.
3. В Панели управления Эквида перейдите в Настройки → Уведомления.
4. Откройте шаблон письма, которое хотите отредактировать. В нашем примере это «Заказ принят».
5. Выберите, куда хотите вставить изображение. Чтобы лучше представить, как будет выглядеть письмо, нажмите Предпросмотр. В нашем примере мы добавим изображение в начале письма перед приветствием.
6. В шаблоне письма найдите раздел, куда хотите вставить изображение. Разметки и текстовые метки помогут быстрее ориентироваться в коде. В нашем примере приветствие находится между разметками <!-- Customer greeting : start --> и <!-- Customer greeting : end -->. Чтобы изображение оказалось перед приветствием, нужно добавить его над строкой <!-- Customer greeting : start -->.
7. Добавьте строку кода: <img src="ССЫЛКА">, где ССЫЛКА — это ссылка на изображение, которое вы скопировали в шаге 2:
   

   

8. Нажмите Сохранить.

Готово. Ваше изображение появится в письме:

Изменение цвета текста в письмах

По умолчанию цвет текста в письмах чёрный. Вы можете поменять цвет, чтобы выделить конкретную часть письма.

В шаблонах уведомлений за цвет отвечает разметка ${colorText}. Чтобы поменять цвет, вам нужно задать для этого параметра нужный цвет с помощью цветового кода HTML. Например, если вы хотите сделать часть письма зелёным, используйте код #45B212.

Чтобы поменять цвет текста в письмах:

1. В Панели управления Эквида перейдите в Настройки → Уведомления.
2. Откройте шаблон письма, которое хотите отредактировать.
3. Найдите разметку ${colorText} над текстом, цвет которого хотите поменять. Быстро найти нужную разметку поможет поиск, который открывается при нажатии клавиш Ctrl + F (Command + F на Макбуке). В нашем примере мы хотим поменять цвет приветствия:
   

   

4. Замените ${colorText} на код цвета. В нашем примере это #45B212:
   

   

5. Нажмите Сохранить.

Готово. Теперь текст приветствия в письме будет зелёного цвета:

Добавление блока повторного заказа

С помощью повторных заказов ваши покупатели могут перезаказывать товары, нажав на кнопку «Повторить заказ» внизу письма с подтверждением заказа. Если вы настраивали шаблон этого уведомления под себя до того, как повторные заказы появились в Эквиде, вы можете добавить блок вручную.

Чтобы добавить блок повторных заказов:

1. В Панели управления Эквида перейдите в Настройки → Уведомления.
2. Откройте шаблон письма «Заказ принят».
3. Найдите строку <!-- block-related-products: end --> — или любое другое место, куда вы хотите вставить блок — и добавьте следующий код:

   
   <!-- block-repeat-order: start -->
                   <#if repeatOrder??>
                       <tr>
                           <td align="left" valign="top" style="padding-top: 40px;">
                               <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-width: 100%;">
                                   <tr>
                                       <td align="left" valign="top" style="<@styleSubtitle />">
                                           <@rosetta.message key="OrderConfirmation.RepeatOrder.title" />
                                       </td>
                                   </tr>
                                   <tr>
                                       <td align="left" valign="top" style="padding-top: 10px; <@styleText />">
                                           <@rosetta.message key="OrderConfirmation.RepeatOrder.description" />
                                       </td>
                                   </tr>
                                   <tr>
                                       <td align="left" valign="top" style="padding-top: 20px;">
                                           <#assign goToStoreButtonText><@rosetta.message key="OrderConfirmation.RepeatOrder.button" /></#assign>
                                           <@secondaryButton repeatOrder.url goToStoreButtonText 290 colorBlue "full-width-mobile" />
                                       </td>
                                   </tr>
                               </table>
                           </td>
                       </tr>
                   </#if>
                   <!-- block-repeat-order: end -->

4. Нажмите Сохранить.

Готово. Теперь покупатели смогут разместить повторный заказ, нажав на кнопку в письме: