Abr@X@bra.ru
Верстаем красивые письма в 1С-Битрикс

Верстаем красивые письма в 1С-Битрикс

06.04.2017
257

Зачем мне заниматься такой “не нужно темой” как верстка красивых писем с сайта?

Я делаю интеграцию различных web-сервисов с сайтом на Битрикс. Стараюсь принести пользу своим клиентам и их бизнесу. Так как сайт должен решать по максимуму разные бизнес процессы.

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

Я решил данную задачу для себя и хочу помочь решить ее вам.

Настройка почтового шаблона

Для тех, у кого в редакции есть модуль E-mail маркетинг.

Идем в админке в Маркетинг -> Email-маркетинг -> Мои шаблоны

image00.png

Жмакаем “Добавить” и видим страничку со штатными шаблонами для писем.

Выбираем любой понравившийся, и нам откроется редактор этого шаблона.

Редактор достаточно понятный и простой в использовании посему, объяснять про него не буду. Нам в общем-то надо в этом редакторе собрать внешний вид и получить от него html. На то место, где у нас будет тело письма с основной информацией, которая будет меняться, мы ставим маркер #WORK_AREA#.

Далее, открываем вкладку “предпросмотр”.

Правой кнопкой мыши и открываем “посмотреть код” или “исследовать элемент” - зависит от браузера. В общем надо открыть код этого шаблона в фаербаге. Получится что-то вроде


image01.png

Тут надо найти фрейм редактора, в котором сейчас шаблон открыт, скопировать весь его html в теге <html> … </html> и куда-нибудь его сохранить.

В редакторе есть еще вкладка “получить html”, но ей не надо пользоваться.

И вот почему.

Верстка html-писем - это верстка начала 90-х. Т.к. почтовики все разные, почтовые сервисы тоже, они и отображают письма сильно по-разному.

Почтовые сервисы mail.ru, яндекса и гугла - вырезают из тела писем теги <style>, <script> и пр. Оставляют только сам хтмл. Некоторые десктопные почтовики поддерживают тег style и некоторую часть css. Поэтому все стили надо писать инлайново и верстать все на таблицах. Тогда ваши письма будут в 90% выглядеть одинаково во всех почтовиках и сервисах.

А вкладка “получить html” не дает нам получить хтмл с инлановыми стилями, там только классы. Но вот фаербаг с этой задачей справляется.

Это нам и нужно.

Далее…

Идем в Настройки -> Настройки продукта -> Почтовые события -> Темы оформления

Жмакаем “Добавить тему” и вставляем наш хтмл в форме. В данном случае мы создаем новый шаблон. Этот шаблон по структуре идентичен шаблонам сайтов в папке /local/templates. И в нем так же должен быть маркер #WORK_AREA#.

Пройдемся по полям формы.

  • ID - название папки шаблона

  • Название - собссно, название в админке

  • Описание - это по желанию

  • Порядок - тоже по желанию

  • Тип - не сильно втыкал для чего это, надо читать в документации, на результат вроде как не влияет.

  • Внешний вид шаблона сайта - наш хтмл

После сохранения, в папке /bitrix/templates появится папка с нашим шаблоном.

Теперь нам остается только в Настройки -> Настройки продукта -> Почтовые события  -> Почтовые шаблоны отредактировать нужный шаблон и выставить ему нашу новую тему оформления.




Битрикс, html-письма
Читайте также:
Что нового принес ФЗ-54 для продавцов?

Что нового принес ФЗ-54 для продавцов?

С 1 февраля 2017-го компании регистрируют кассовые аппараты нового онлайн-формата. В них уже установлен фискальный накопитель....

Читать
Ajax подгрузка контента Битрикс

Ajax подгрузка контента Битрикс

Ajax подгрузка контента, бесконечный скроллинг, «вебдванольная постраничка» — этот подход называют по разному, но суть о...
Читать
Выводим свойство инфоблоков 1С-Битрикс

Выводим свойство инфоблоков 1С-Битрикс

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