Розробка шаблонів листів 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-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в 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% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами 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+ років.