Верстаем красивые письма в 1С-Битрикс. Почтовые шаблоны битрикс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И вот почему.

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

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

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

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

Далее…

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

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

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

ID - название папки шаблона
Название - собссно, название в админке
Описание - это по желанию
Порядок - тоже по желанию
Тип - не сильно втыкал для чего это, надо читать в документации, на результат вроде как не влияет.
Внешний вид шаблона сайта - наш хтмл

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

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

abraxabra.ru

Создание почтового шаблона для веб-формы Битрикс

Создание почтового шаблона для веб-формы Bitrix.

Создание шаблона в настройках веб-формы

Почтовый шаблон необходим для того, чтобы после заполнения веб-формы посетителем сайта отправлялось письмо на указанные в параметрах шаблона почтовые адреса.Создание почтового шаблона в Битриксе полностью автоматизировано. Заходим в настройки созданной нами веб-формы на закладку Дополнительно и нажимаем кнопку создать, после чего у нас появляется готовый и действующий почтовый шаблон, на основании которого уже будет формироваться письмо.

Настройка параметров шаблона

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

указать сайты для которых этот шаблон будет действовать
указать с какого адреса будет письмо идти
указать кому письмо будет отправлено
указать тему письма

Стоит заметить, что в поле «От кого» и «Тема» используются специальные переменные о которых будет сказано чуть позже.

Тело сообщения

Последний шаг по созданию почтового шаблона к веб-форме это Тело сообщения, которое можно делать как с использованием специальных полей так и без них.

Другие параметры которые можно использовать при создании почтового шаблона указаны ниже. причем они могут быть использованы не только в теле сообщения но и в параметрах почтового шаблона.#RS_FORM_ID# — ID формы#RS_FORM_NAME# — Имя формы#RS_FORM_SID# — SID формы#RS_RESULT_ID# — ID результата#RS_DATE_CREATE# — Дата заполнения формы#RS_USER_ID# — ID пользователя#RS_USER_EMAIL# — EMail пользователя#RS_USER_NAME# — Фамилия, имя пользователя#RS_USER_AUTH# — Пользователь был авторизован?#RS_STAT_GUEST_ID# — ID посетителя#RS_STAT_SESSION_ID# — ID сессии#client_name# — Ваше имя:#client_name_RAW# — Ваше имя: (оригинальное значение)#client_text# — Текст вопроса:#client_text_RAW# — Текст вопроса: (оригинальное значение)#site_id# —#site_id_RAW# — (оригинальное значение)#client_email# — E-mail:#client_email_RAW# — E-mail: (оригинальное значение)#client_phone# — Телефон для связи:#client_phone_RAW# — Телефон для связи: (оригинальное значение)#our_answer# —#our_answer_RAW# — (оригинальное значение) #who_answer_RAW# — (оригинальное значение)#DEFAULT_EMAIL_FROM# — E-Mail адрес по умолчанию (устанавливается в настройках)#SITE_NAME# — Название сайта (устанавливается в настройках)#SERVER_NAME# — URL сервера (устанавливается в настройках)

Начало: Система «Вопрос-Ответ» на основе модуля «Веб-формы» CMS 1C-Bitrix

Facebook

Twitter

Вконтакте

Google+

omelchuck.ru

Вёрстка почтового шаблона для письма с сайта на 1c-битрикс. Краткая инструкция. · Блог Bingam

<!DOCTYPE html>

<tbody>

<tr>

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

<td><em><span>Информационное сообщение</span></em></td>

</tr>

<tr>

<td><em><span>сайта #SITE_NAME#</span></em></td>

<td align="right"><span>слоган</span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

<td><span>Здравствуйте,</span></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><span>#MESSAGE#</span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

<td><span><strong><span>Ваша регистрационная информация:</span></strong></span></td>

</tr>

<tr>

</tr>

<tr>

<td valign="top"><span><span>ID пользователя: #USER_ID#</span></span></td>

</tr>

<tr>

<td valign="top"><span><span>Статус бюджета: #STATUS#</span></span></td>

</tr>

<tr>

<td valign="top"><span><span>Login: #LOGIN#</span></span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td>

<tbody>

<tr>

</tr>

<tr>

<td valign="top"><span>Письмо сгенерировано автоматически.</span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<td valign="top"><strong><span>Телефоны/факс:</span></strong></td>

<td valign="top"><span><span>Email: </span></span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

bingam.ru