Разработка шаблонов писем 1С-Битрикс

Письма, которые отправляет Битрикс — подтверждение заказа, восстановление пароля, уведомление о новом лиде — по умолчанию выглядят как текстовый блок на белом фоне с логотипом. Логотип размытый, шрифт системный, ссылка на сайт синяя и подчёркнутая. Если компания тратит деньги на маркетинг и дизайн, а потом клиент получает такое письмо — это разрыв коммуникации.

Разработка шаблонов писем 1С-Битрикс

Как устроены шаблоны писем в Битрикс

Шаблоны писем в Битрикс хранятся в модуле main и редактируются в административной панели: Настройки → Почта → Шаблоны почты. Каждый шаблон связан с почтовым событием (например, SALE_NEW_ORDER — новый заказ, MAIN_USER_PASS_CHANGED — изменение пароля).

Шаблон письма состоит из:

• Поля FROM, TO, CC, BCC, SUBJECT — могут содержать макросы (#SITE_NAME#, #ORDER_ID#)
• Тело письма — HTML с поддержкой макросов

HTML письма в почтовых клиентах рендерится иначе, чем в браузере: не поддерживаются внешние CSS-файлы, <link>, CSS Grid, Flexbox (частично), большинство псевдоэлементов. Всё — через inline-стили и табличную верстку.

Технические требования к HTML-письмам

• Inline CSS — все стили прописываются атрибутом style="". Внешние и <style>-блоки игнорируются Gmail, Outlook и другими клиентами (или воспринимаются непредсказуемо)
• Табличная структура — <table> для layout. <div> с display: flex не работает в Outlook
• Фиксированные пиксельные значения — не rem, не % для ширин блоков, только px
• Ширина письма — обёртка максимум 600–640px
• Alt-тексты — изображения блокируются по умолчанию в Outlook, Gmail, Яндекс.Почте. Текстовая альтернатива обязательна
• Кодировка — UTF-8, указывается в метатеге и в заголовке письма

Работа с макросами Битрикс

В теле шаблона доступны макросы события — например, для SALE_NEW_ORDER: #ORDER_ID#, #ORDER_DATE#, #PRICE#, #DELIVERY_NAME#, #USER_EMAIL#, #ITEMS# и другие. Полный список макросов виден в форме редактирования шаблона.

Часть макросов возвращает готовый HTML (например, таблица с позициями заказа в #ITEMS#). Эти блоки сложнее кастомизировать — их содержимое формирует модуль sale, и изменить разметку можно только через обработчики событий в кастомном модуле.

Для полного контроля над разметкой позиций заказа используют обработчик события OnSaleOrderSaved с формированием HTML вручную.

Адаптив в письмах

Адаптивные письма поддерживают не все клиенты, но для мобильных устройств базовый адаптив работает через @media в <style>-блоке (Outlook игнорирует, но iOS Mail и Gmail на Android поддерживают). Паттерн: на десктопе таблица 600px, на мобильном — width: 100% !important.

Кейс: письмо подтверждения заказа

Интернет-магазин, Битрикс «Малый бизнес». Стандартное письмо заказа — таблица на белом фоне без брендинга. Задача: письмо в фирменном стиле, с логотипом, баннером, таблицей позиций, блоком доставки и CTA-кнопкой «Отслеживать заказ».

Разработали HTML-шаблон с inline-стилями. Таблица позиций — переопределена через обработчик события (кастомный модуль, метод OnSaleNewOrderNewAdminSend). Результат протестирован в Litmus: корректное отображение в Gmail, Outlook 2016/2019, Яндекс.Почте, Apple Mail, Samsung Mail. Работа заняла 2 дня, включая тестирование.

Сроки