Розробка шаблонів листів 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 дні, включаючи тестування.

Терміни