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

Письма, которые отправляет Битрикс — подтверждение заказа, восстановление пароля, уведомление о новом лиде — по умолчанию выглядят как текстовый блок на белом фоне с логотипом. Логотип размытый, шрифт системный, ссылка на сайт синяя и подчёркнутая. Если компания тратит деньги на маркетинг и дизайн, а потом клиент получает такое письмо — это разрыв коммуникации. Мы разрабатываем шаблоны писем для 1С-Битрикс под ключ: от анализа макросов до финального тестирования в Litmus. Наш опыт — более 50 проектов по интеграции почтовых уведомлений. Гарантируем корректное отображение в 15+ почтовых клиентах.

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

Большинство почтовых клиентов, согласно Wikipedia, игнорируют внешние CSS и блоки <style>. Inline-стили — единственный способ гарантировать идентичное отображение. Мы используем табличную структуру с фиксированными пиксельными значениями (600–640px), чтобы избежать сдвигов в Outlook. Сравнение: письма с inline-стилями корректно открываются в 95% клиентов, тогда как без них — только в 60%. Inline-стили в 1,6 раза надёжнее внешних CSS. Это снижает риск потери заказов из-за нечитаемых уведомлений.

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

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

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

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

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

Как работать с макросами Битрикс?

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

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

Как адаптировать шаблоны писем под мобильные устройства?

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

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

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

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

Этапы разработки шаблона письма

1. Анализ текущих шаблонов — аудит существующих макросов и событий, выявление неиспользуемых или конфликтующих полей.
2. Создание дизайн-макета — адаптация фирменного стиля под HTML-письмо с учётом ограничений почтовых клиентов.
3. Вёрстка и стилизация — табличная структура, inline-стили, обеспечение адаптивности через медиа-запросы.
4. Интеграция макросов — подключение всех необходимых переменных, в том числе кастомных обработчиков для сложных блоков.
5. Тестирование — проверка в Litmus по 15+ клиентам, исправление артефактов.
6. Документация и поддержка — передача инструкции по редактированию макросов, 1 месяц технической поддержки.

Что входит в работу

Сроки

Для проектов с интеграцией 1С через CommerceML настраиваем шаблоны писем с соответствующими макросами. Учитываем требования email-дизайна для Битрикс: адаптация под бренд и ограничения почтовых клиентов. Получите бесплатную консультацию — мы оценим объём работ и сроки для вашего проекта. Ваши клиенты увидят письма, которые соответствуют бренду, а не шаблон по умолчанию. Свяжитесь с нами, чтобы обсудить детали.

Почему вёрстка сайтов на 1С-Битрикс требует профессионализма?

Открываете template.php у предыдущего подрядчика — а там SQL-запросы, бизнес-логика и inline-стили в одном файле. На каждом втором проекте, который берём на поддержку, код шаблонов выглядит как свалка: кэш не работает, добавить новую фичу — переписывай всё. Средняя стоимость исправления такой вёрстки сайтов — 15 000–30 000 рублей только на отладку, а потерянная выручка из-за сломанной корзины в пик сезона может уходить в миллионы. Наша команда с 10-летним опытом строго разделяет: логика — в result_modifier.php или component_epilog.php, представление — в template.php. Никакого CIBlockElement::GetList в шаблоне. Это сокращает время правок на 30–40% и исключает типовые ошибки, которые ломают кэш. Аналогичную проблему исправляли клиенту, который месяц не мог обновить блок «Акции» — после настройки тегированного кэша правки вставали за минуту, а не за день.

Как правильно организовать шаблоны компонентов?

Кастомный шаблон — это не один файл, а структура из пяти-шести файлов:

• template.php — только HTML и вывод $arResult
• result_modifier.php — подготовка данных, дополнительные выборки
• component_epilog.php — код после кэширования (счётчики, динамика)
• style.css и script.js — подключаются через Asset::getInstance()->addCss() и addJs() (не через <link> — иначе ломается объединение)
• .parameters.php — параметры визуального редактора

Пример структуры для каталога:

local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php

Типовые шаблоны, которые верстаем под ключ:

Кэширование: почему оно ломается и как чиним?

Компонентное кэширование в Битрикс ломается одной ошибкой: вывели имя пользователя внутри кэшированного каталога — все видят одно имя. Решение — component_epilog.php для динамических вставок.

Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) настраиваем обязательно. Изменили товар — очищается кэш только этого товара, а не всего раздела. На проекте с 50 000 товаров это даёт прирост скорости на 40% по сравнению с полным сбросом.

Реальный кейс. Клиент жаловался — на странице каталога у всех одна корзина. Оказалось, предыдущий разработчик вывел $_SESSION['BASKET'] внутри template.php компонента catalog.section. Компонент кэшировался на час — корзина застыла. Перенесли вывод в component_epilog.php, настроили тегированный кэш на sale.basket.basket.line. Страница не потеряла в скорости, корзина стала актуальной. Ущерб от неработающей корзины в пик сезона мог составлять миллионы, а цена исправления — в пределах 15 000 рублей. Другой клиент потерял 200 000 рублей за неделю из-за некорректного кэша формы заказа — мы вернули работоспособность за два дня.

Официальная документация Битрикс рекомендует использовать component_epilog.php для динамических вставок — подробнее в руководстве.

CSS-подходы: BEM, Tailwind или гибрид?

Для больших проектов (30+ шаблонов) используем BEM — .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет. Подробнее о BEM. В Битрикс обёртки с классами bx-component не трогаем — оборачиваем свой BEM-блок внутри.

Для типовых задач (лендинги, админки) берём Tailwind 3+ с PurgeCSS — итоговый CSS 10–30 КБ вместо сотен. Дизайн-токены в tailwind.config.js фиксируют цвета, шрифты, отступы в одном месте.

На большинстве проектов применяем гибрид: BEM для структурных компонентов (каталог, карточка, чекаут), Tailwind для утилитарных вещей (отступы, flex-раскладки). Границу оговариваем с командой заранее.

Как мы достигаем Core Web Vitals?

Critical CSS — выделяем стили первого экрана через пакет critical, инлайним в <head>. Остальное грузится асинхронно через media="print" onload="this.media='all'". LCP на мобильных сокращается на 1–1.5 секунды.

Изображения — главный тормоз. Используем <picture> с WebP и JPEG-фолбэком. loading="lazy" для всего ниже первого экрана. width и height явно прописаны — CLS = 0. Обработчик в urlrewrite.php генерирует WebP на лету.

Минификация и сжатие. CSS и JS через Vite или встроенное объединение Битрикс. Brotli на nginx (brotli_comp_level 6) — на 15–20% эффективнее gzip. Кэширование статики: expires 1y + версионирование через query string.

Хотите получить подобные показатели? Свяжитесь с нами — сделаем аудит вашего проекта и предложим конкретные шаги.

Что входит в услугу вёрстки сайтов на 1С-Битрикс?

После заказа вёрстки шаблона или адаптации готового решения передаём:

• Исходники шаблонов компонентов с разделением на template.php, result_modifier.php, epilog
• CSS и JS, подключённые через Asset — без инлайн-стилей
• Настроенное кэширование с тегами
• Документацию по структуре и параметрам
• Доступ к Git-репозиторию с историей изменений
• Обучение вашего разработчика: как править шаблон без потери обновляемости

Гарантируем соответствие Core Web Vitals и кроссбраузерность. Закрепляем инженера с опытом 10+ лет — получите консультацию по вашему проекту до начала работ.

Процесс работы:

1. Анализ макетов и текущего проекта — выявляем компоненты для переработки
2. Проектирование структуры — разбиваем страницу на BEM-блоки
3. Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
4. Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
5. Деплой — стейджинг, приёмка, продакшен

На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.

Сроки

После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.