Работа с шаблонами писем в админке Magento

Работа с шаблонами писем в админке Magento

Оформление писем отсылаемых клиентам интернет-магазина в соответствии с общим дизайном сайта — это неотъемлемая часть по формированию имиджа торговой системы. Работа эта достаточно кропотливая и требующая знания определенных тонкостей. Давайте попробуем разобраться с этим вопросом пошагово и с использованием скриншотов.

Транзакционные письма высылаются пользователю в ответ на те или иные события: регистрация, создание заказа, изменение заказа и т.д. и т.п. Каждое письмо, по сути, является мини-сайтом или красиво стилизованой копией страницы интернет-магазина. Чтобы правильно ее оформить необходимо понимать следующие вещи:

  1. Правила оформления писем
  2. Формирование шаблонов писем
  3. Настройки писем для стора
  4. Переменные используемые внутри писем
  5. Тестовые писем Follow Up Email
  6. Дибаггинг отправки писем

Итак, начнем.

1. Правила оформления писем

Материалов по теме «Верстка электронных писем» очень много хоть в Яндексе, хоть в Google. Основными и наиболее важными являются следующие:

  • использование только встроенных css-стилей — стилей внутри атрибута style в html-теге
  • указание полных путей к картинкам
  • полные URL-адреса в ссылках
  • использование таблиц для общей разметки страницы

Любая попытка вынести стили в отдельный файл типа email-non-inline.css или размещение их в окне Template Styles приведет к фиаско, так как Яндекс и Гугл вырежут их и не будут использовать. В мэйлдибаггере типа mailtrap.io это, конечно, сработает, но в почтовом ящике реального клиента — нет.

2. Формирование шаблонов писем

Шаблон транзакционного письма представляет из себя хардкорную мешанину из html-верстки, встроенных css-стилей и переменных. Чтобы облегчить себе труд есть смысл разбивать каждый шаблон на три части:

  1. header
  2. content
  3. footer

Шаблоны header и footer можно подключать к любому письму, что избавит вас от нудного скроллинга в узком окошке в админке и нервозности при поиске нужного места непосредственно в теле письма.

В админке Magento шаблоны создаются по этому адресу:

/admin/system_email_template/

Есть еще один особенный шаблон: tr-строка для писем типа «Брошенная корзина«. Этот шаблон используется при итерации товаров из корзины клиента и выводится в теле письма через конструкцию

{{foreach var="$cart.getAllVisibleItems()" template="email:EMSA — Abandoned Cart Row"}}

header-шаблон подключается НАД контент-шаблоном такой конструкцией

{{template config_path="design/email/header"}}

footer-шаблон подключается ПОД контент-шаблоном такой конструкцией

{{template config_path="design/email/footer"}}

Итого, мы имеем:

header-template

footer-template

content-template

3. Настройки писем для стора

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

  • подключение header и footer
  • шаблон письма для нового заказа
  • шаблоны писем создания и изменения заказа

Подключение header и footer

Путь в админке: Configuration -> General -> Design

/admin/system_config/edit/section/design/website/emsa_website/

Как выглядит

Шаблон письма для нового заказа

Путь в админке: Configuration -> Customers -> Customer Configuration

/admin/system_config/edit/section/customer/website/emsa_website/

Как выглядит

Шаблоны писем создания и изменения заказа

Путь в админке: Configuration -> Sales -> Sales Emails

/admin/system_config/edit/section/sales_email/website/emsa_website/

Как выглядит

4. Переменные используемые внутри писем

Для облегчения работы и получения расширенной информации в письмах, внутри шаблонов используются переменные вида {{var anybody=anywhere}}, которые при парсинге шаблона преобразуются в нужные данные. Вот примеры основных переменных:

  • Email Logo Image = {{skin url=»images/logo_email.gif»}} = http://your.site.ru/skin/frontend/your/theme/images/logo_email.gif
  • Base Secure URL = {{config path=»web/secure/base_url»}} = https://your.site.ru/
  • General Contact Name = {{config path=»trans_email/ident_general/name»}} = Интернет-магазин
  • General Contact Email = {{config path=»trans_email/ident_general/email»}} = support@your.site.ru
  • Store Name = {{config path=»general/store_information/name»}} = интернет-магазин НАЗВАНИЕ
  • Store Contact Telephone = {{config path=»general/store_information/phone»}} = +7 (800) 123-45-67
  • Store Contact Address = {{config path=»general/store_information/address»}}
  • First User Name = {{var order.getCustomerFirstname()}} = Имя
  • и т.д.

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

5. Тестовые письма Follow Up Email

После создания и настройки писем их необходимо протестировать, чтобы удостовериться в том, что они приходят в том виде в каком нужно. Для писем «Новый юзер», «Новый заказ» и «Изменение заказа» такую отправку легко сэмулировать непосредственно выполнив данные действия, для всех остальных случаев придется генерировать тестовые письма с помощью Foollow Up Email — через создание правил и отправку сообщения.

Адрес в админке Magento

/followupemail_admin/adminhtml_rules/

Скриншоты по ключевым вкладкам настройки правила.

Придется создать и настроить свои правила по аналогии с уже существующими, а отправку осуществлять на вкладке

/followupemail_admin/adminhtml_queue/

Как выглядит отправка тестового письма

6. Дибаггинг отправки писем

Если вы захотите продебажить отправку писем привычным способом — через DBGp Proxy брекпойнты в PhpStorm то начинать вам стоит вот с этого файла

app/code/core/Mage/Core/Model/Email/Template.php::sendTransactional


Warning!

Есть несколько особенностей при работе с разделенными на части email-шаблонами:

  1. не будет работать предпросмотр при клике по ссылке Previev
    1. решение: добавьте код из header и footer непосредственно в content-шаблон
  2. письмо не будет собираться воедино при тестировании через Foloow Up Email и оно отправится без header и footer
    1. решение: добавьте код из header и footer непосредственно в content-шаблон