електронна пошта

Транзакційні електронні листи – це основний канал зв’язку, який використовується для сповіщення клієнтів про їхні замовлення, відправлення, повернення коштів та інші деталі. Те, як ви їх структуруєте та налаштовуєте, визначає їхню ефективність.

На щастя, Magento вже має всі інструменти, необхідні для налаштування шаблонів електронних листів за замовчуванням, і пропонує деякі користувацькі змінні для їх персоналізації.

У цьому посібнику ви дізнаєтеся все про шаблони електронних листів Magento. Від налаштування шаблону за замовчуванням до створення нового з нуля – ми розглянемо кожну деталь, щоб допомогти вам досягти успіху у ваших Маркетинг на Magento .

Що таке шаблони електронних листів Magento?

Шаблони електронних листів Magento – це попередньо розроблені макети HTML та тексту, які ви використовуєте для надсилання автоматичних електронних листів своїм клієнтам. Ці шаблони охоплюють різні типи взаємодії між клієнтом і магазином.

Існують різні типи шаблонів електронних листів Magento:

  • Шаблони електронних листів для продажів ( нове замовлення , оновлення замовлення, рахунок-фактура, відправлення, кредитне авізо) використовуються для інформування клієнтів про статус їхнього замовлення.
  • Електронна пошта клієнта (новий обліковий запис, скидання пароля, підтвердження електронної пошти, оновлення облікового запису, вітальний електронний лист) використовується для надсилання клієнтам повідомлень, пов’язаних з обліковим записом.
  • Електронна пошта з розсилкою (успішна підписка, успішне скасування підписки, запит на підтвердження) надсилаються під час підписки на розсилку тощо.

Щоб знайти повний список шаблонів Magento за замовчуванням, перейдіть до розділу Маркетинг > Комунікації > Шаблони електронних листів > Додати новий шаблон > Завантажити шаблон за замовчуванням та виберіть опцію Шаблон .

Кожен шаблон електронного листа за замовчуванням складається з заголовка, тіла та нижнього колонтитула відповідно до стандартних форматів електронних листів.

тіло заголовка приклад нижнього колонтитула

  • Заголовок: верхня частина кожного електронного листа. Вона містить логотип, назву бренду, дизайн та стиль. Це ідеальне місце, щоб допомогти вашим клієнтам ідентифікувати вашу компанію з першого погляду.
  • Тіло: основна частина електронного листа, яка передає ключове повідомлення та змінюється залежно від мети вашого листа. Вона містить чіткий та захопливий контент, який спонукає клієнтів до дії.
  • Нижній колонтитул: нижня частина вашого листа, яка завершує його. Вона може містити контактну інформацію, посилання на соціальні мережі, опції відписки тощо.

Ці шаблони створені за допомогою HTML та CSS, що забезпечує легке налаштування та редагування.

Однак, якщо ви хочете змінити шаблон за замовчуванням, вам потрібно створити власну версію, дотримуючись усіх правил макета.

Правила макета шаблону електронної пошти Magento 2

Незалежно від того, чи вирішите ви створювати чи редагувати налаштування електронної пошти Magento 2, важливо дотримуватися певних правил макета. Це необхідно для того, щоб ваші листи правильно відображалися в різних поштових клієнтах та на різних пристроях.

Ось ключові правила, які слід враховувати під час роботи з транзакційними електронними листами Magento:

  • Використовуйте макети на основі таблиць: під час структурування макета використовуйте замість
    , оскільки сучасні поштові клієнти (Gmail, Outlook, Apple Mail) не повністю підтримують сучасний HTML та CSS. Натомість вони підтримують макети на основі таблиць, які роками були золотим стандартом у дизайні електронних листів.
  • Дотримуйтесь стандартів HTML 4, оскільки багато поштових клієнтів не повністю підтримують HTML 5. Деякі теги можуть порушити макет або повністю ігноруватися.
  • Використовуйте атрибути HTML замість CSS, де це можливо: це допоможе вашому електронному листу добре відображатися навіть у застарілих поштових програмах.
  • Використовуйте вбудовані стилі CSS: деякі поштові клієнти ігнорують CSS у тегах
  • Використовуйте лише властивості CSS2: тіні, анімація та всі інші ефекти CSS3 можуть пошкодити ваш дизайн. Тому дотримуйтесь Basic властивостей CSS2 для досягнення кращої сумісності.
  • Використовуйте специфічні властивості CSS: використовуйте "background-color" замість "background" та пишіть "padding-top", "padding-left" тощо замість скороченого запису.
  • Не використовуйте короткі шістнадцяткові коди кольорів: це означає, що замість #FFF використовуйте #FFFFFF, оскільки деякі поштові клієнти підтримують лише повну 6-значну версію назви кольору.
  • Уникайте фонових зображень: багато поштових клієнтів схильні блокувати фонові зображення або не підтримують їх.
  • Не використовуйте JavaScript у шаблонах електронних листів: він блокується поштовими клієнтами з міркувань безпеки.
  • Оптимізуйте зображення перед надсиланням: стисніть та змініть розмір зображень перед тим, як додавати їх до електронної пошти, оскільки це зменшує ймовірність спрацьовування спам-фільтрів.
  • Підтримуйте ширину електронної пошти близько 600 пікселів: це розмір, який найкраще працює на більшості екранів, зменшуючи необхідність прокручування вбік.

    • Спілкування електронною поштою дуже важливе в будь-якому магазині електронної комерції, незалежно від того, чи це підтвердження замовлення, оновлення доставки чи електронні листи для скидання пароля.

    Дотримання правил макета допоможе вам переконатися, що кожне повідомлення відображається та відображається належним чином. Однак структурування вмісту в цих електронних листах – це зовсім інша справа.

    Отже, далі вам потрібно навчитися редагувати, налаштовувати та створювати шаблони електронних листів Magento.

    Як налаштувати шаблони електронних листів у Magento?

    Ви вже знаєте, що Magento постачається з низкою шаблонів за замовчуванням, які можуть охоплювати всілякі повідомлення. Отже, все, що вам потрібно зробити, це просто налаштувати готові шаблони відповідно до вашої конкретної стратегії електронної пошти.

    Перегляньте це коротке відео про те, як редагувати шаблони електронних листів у Magento 2, або дотримуйтесь інструкцій, наведених нижче.

    Крок 1. Завантажте шаблон

    Спочатку вам потрібно завантажити шаблон. Для цього перейдіть до розділу Маркетинг > Комунікації > Шаблони електронних листів та виберіть шаблон електронного листа, який ви хочете редагувати. Якщо ви хочете створити новий з нуля, натисніть кнопку Додати новий шаблон .

    Magento 2 Transaction Email Template, Add New Template

    Під час створення нового шаблону просто виберіть один із чернеток з Шаблони та натисніть Завантажити шаблон .

    шаблони електронних листів за замовчуванням

    Крок 2. Редагуйте інформацію про шаблон

    Далі встановіть Назва шаблону та змініть Тему шаблону , якщо потрібно.

    Magento 2 Transaction Email Template, Load Default Template

    Нарешті, відредагуйте Вміст шаблону та додайте Стилі шаблону, якщо необхідно.

    Примітка: Функція перекладу (trans) використовується лише якщо ви керуєте багатомовним магазином і хочете... переклад шаблонів електронних листів у Magento . Ми поговоримо про це пізніше.

    Magento 2 Transaction Email Template, Template Content

    Після завершення, перегляньте шаблон, щоб ще раз перевірити макет перед збереженням. Потім обов’язково збережіть Шаблон після цього.

    Крок 3. Призначте шаблон електронної пошти в конфігурації

    Ви могли помітити інформацію Наразі використовується для під час завантаження шаблону електронної пошти. Вона точно вказує, для чого використовуються шаблони за замовчуванням. Наприклад, підтвердження електронною поштою тощо.

    Отже, щойно ви створюєте новий шаблон, вам потрібно призначити його до певного розділу конфігурації.

    Ми створили наш шаблон на основі стандартного шаблону «Нове замовлення». Отже, ми переходимо до Магазини > Налаштування > Конфігурація > Продажі > Електронні листи з продажу , щоб застосувати наш новий шаблон.

    Примітка: вам слід перейти до відповідного розділу конфігурації на основі попередньо завантаженого шаблону. Інформація в Наразі використовується для дасть вам підказку.

    Magento 2 Transaction Email Template, New Order Confirmation Template

    Крок 4. Додавання логотипу електронної пошти

    Нарешті, після того, як ви створили шаблон електронної пошти та призначили його конфігураціям магазину, вам потрібно налаштувати логотип електронної пошти.

    Щоб зробити це, перейдіть до Контент > Дизайн > Конфігурація та виберіть відповідну область дії для Редагування логотипу електронної пошти. Найкраще робити це глобально.

    Конфігурація дизайну контенту Magento 2

    Прокрутіть униз до розділу Транзакційні електронні листи та заповніть такі поля:

    • Зображення логотипу: завантажте зображення основного елемента брендингу у форматах .png, .jpg або .gif, яке буде додано до ваших шаблонів електронних листів Magento.
    • Альтернативний текст зображення логотипу: встановіть альтернативний текст для зображення. Він з’являтиметься, коли ваш логотип з якоїсь причини не відображається.

    Дизайн шаблонів транзакційних електронних листів Magento 2

    • Ширина та висота логотипу: вкажіть ширину вашого логотипа. Якщо ви нічого не встановите, зображення відображатиметься в оригінальних розмірах і порушить макет вашого електронного листа.
    • Шаблон заголовка: виберіть шаблон заголовка, який ви налаштували, інакше Magento використовуватиме шаблон за замовчуванням.
    • Шаблон нижнього колонтитула: визначте налаштований нижній колонтитул, який використовуватиметься у ваших електронних листах замість стандартного.

    Дизайн транзакційного логотипу Magento 2

    Не забудьте збережіть налаштувати параметри після завершення.

    Як програмно налаштувати шаблони електронних листів Magento?

    Редагування шаблонів електронних листів Magento в адміністративній панелі – це простий спосіб змінити тексти, оновити ідентифікатори бренду та додати будь-які персоналізовані «штрихи». Однак іноді потрібно включити до шаблону власні блоки або складну логіку.

    Саме тоді редактора шаблонів адміністративної панелі буде недостатньо. Вам потрібно зробити це іншим способом.

    Усі шаблони електронних листів Magento зберігаються в кодовій базі в розташуванні "view":

    vendor/module-name/view/frontend/email/

    або у створених вами користувацьких темах/модулях:

    app/design/frontend/Vendor/theme/Magento_Module/email/

    У цьому випадку ви можете змінити шаблони за замовчуванням, розмістивши налаштовані файли .html у відповідному модулі або шляху теми.

    Давайте налаштуємо Шаблон електронного листа з підтвердженням замовлення як приклад, але цього разу використаємо код.

    Щоб змінити цей шаблон, скопіюйте шаблон за замовчуванням з:

    vendor/magento/module-sales/view/frontend/email/order_new.html

    та вставте його у свою тему:

    app/design/frontend/Vendor/theme/Magento_Sales/email/order_new.html

    Потім налаштуйте HTML, макет та змінні так, як вам потрібно, і виконайте такі команди:

    php bin/magento setup:static-content:deploy
    php bin/magento cache:clean

    Не забудьте очистити кеш після завершення.

    Але що робити, якщо ви хочете створити абсолютно новий шаблон електронної пошти, а не налаштовувати шаблони за замовчуванням?

    Створення шаблону електронної пошти в Magento з нуля

    Якщо ваш магазин має унікальний брендинг або кілька переглядів магазину, і вам потрібно створити нові шаблони для задоволення певних вимог, виконайте такі кроки:

    Крок 1. Перейдіть до вашого власного модуля

    Перейдіть до папки модуля, де ви хочете знайти новий шаблон. Якщо назва вашого магазину, скажімо, "Magefan", тоді назва вашого модуля буде Magefan_EmailTemplate. У цьому випадку каталог модулів виглядатиме так:

    app/code/Magefan/EmailTemplate/

    Крок 2. Створіть файл email_templates.xml

    Цей файл міститиме конфігурації ваших шаблонів електронної пошти Magento у розділі:

    app/code/Magefan/EmailTemplate/etc/email_template.xml

    Крок 3. Додайте конфігурації шаблону:

    Він вкаже Magento, де знайти та як зареєструвати шаблон, який ви хочете створити. Вміст файлу може бути таким:

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
           
        <template id="magefan_custom_email_template"
                  label="Magefan Custom Email Template"
                  file="magefan_custom_email_template.html"
                  type="html"
                  module="Magefan_EmailTemplate"
                  area="frontend"/>
    </config>

    Тут

    • id: – унікальна назва цього шаблону
    • label: – мітка, що читається людиною, видима у випадаючому списку шаблонів
    • file: – шлях до вашого файлу шаблону
    • type: – вказує формат електронного листа, текст чи HTML
    • module: – назва вашого модуля
    • area: – визначає область, де буде використовуватися електронний лист

    Крок 4. Створення файлу шаблону електронного листа

    Створіть файл шаблону за таким шляхом:

    app/code/Magefan/EmailTemplate/view/frontend/email/magefan_custom_email_template.html

    Ось приклад його вмісту:

    <!-- Email Header -->
    <p>Hello {{var customer.name}},</p>

    <p>Welcome to our store! This is a custom email from Magefan's Module.</p>

    <p>Order ID: {{var order.increment_id}}</p>

    <!-- Email Footer -->
    <p>Thank you,<br/>The Magefan Team</p>

    Користувацькі шаблони електронних листів Magento – найкраще місце для використання динамічних даних. Це змінні та директиви, які додають певної автоматизації до ваших електронних листів.

    Директиви та змінні в шаблонах електронних листів Magento

    Динамічні дані в електронних листах Magento – це інформація, яка змінюється або оновлюється залежно від електронного листа, який ви надсилаєте за допомогою системи шаблонів з директивами та змінними.

    Простими словами, динамічні дані допомагають динамічно змінювати деякі частини електронного листа, щоб персоналізувати його для різних клієнтів або груп.

    Ця функція зазвичай реалізується за допомогою директив та змінних у подвійних фігурних дужках, які використовуються в транзакційних електронних листах. Вони допомагають вам вказати ім'я клієнта, номер замовлення, платіжну адресу тощо:

    Hello {{var customer.name}}, your order number is {{var order.increment_id}}.

    Використання цих директив та змінних дозволяє Magento розміщувати унікальну інформацію в кожному електронному листі, залежно від того, що ви хочете надіслати: зображення, посилання чи текст.

    Основними типами директив шаблонів електронних листів є: директиви URL-адреси зберігання, директиви змінних, директиви перекладу та медіа-директиви. Давайте подивимося, що робить кожна з них.

    Директива магазину

    Директива магазину автоматично розміщує посилання на головну сторінку, якщо ви залишите значення URL-адреси в шаблоні порожнім:

    Visit our store: <a href="{ {store url=''} }">Click here</a>

    За потреби ви можете вставити посилання на будь-яку іншу сторінку вашого магазину, дотримуючись цієї практики:

    <a href="{ {store url='category-url-key'} }">Category</a>

    <a href="{{ var this.getUrl($store, 'customer/account/')}}">My Account</a>

    <a href="{{ var this.getUrl ($store, 'customer/account/login')}}">Login</a>

    Директива змінної

    Директива змінної (або var) використовується для вставки таких значень, як ім'я клієнта, ідентифікатор замовлення, дата покупки тощо.

    Наприклад, якщо у вашому шаблоні є такі динамічні змінні

    Hello {{var customer.name}},  
    Thank you for your order #{{var order.increment_id}} placed on {{var order.created_at}}.

    , вони автоматично відображатимуться у вашому електронному листі як:

    Hello John Brown, 
    Thank you for your order #000004321 placed on 2025-06-02.

    Існує повний список Змінні електронної пошти Magento , з яких ви можете вибрати.

    Директива перекладу

    Директива translation (або trans) додає до електронного листа текст, який можна перекласти різними мовами залежно від налаштувань локалі перегляду магазину.

    Якщо Magento виявляє директиву trans у шаблоні електронного листа, він шукає відповідний переклад у доступних файлах CSV або мовні пакети . Наприклад, якщо ваш шаблон містить таку директиву trans

    {{trans "Thank you for your purchase!"}}

    , французький перегляд магазину автоматично змінить її на (якщо у вас встановлено французький мовний пакет)

    Merci pour votre achat!

    . Однак, якщо Magento не може знайти переклад, повідомлення за замовчуванням залишиться мовою оригіналу.

    Директива Media

    Директива media використовується в шаблонах електронних листів Magento для створення URL-адреси логотипа, банера або зображення, що зберігаються у вашому каталозі медіа.

    Magento витягне потрібний шлях до відповідного файлу з вашої папки медіа.

    Отже, якщо ваш шаблон містить таку директиву медіа:

    <img src="{{media url='logo/logo.png'}}" alt="Store Logo">

    Magento перетворить її на щось на кшталт:

    <img src="https://yourstore.com/pub/media/wysiwyg/logo.png" alt="Store Logo">

    Поширені проблеми з шаблонами електронної пошти

    Хоча Magento дозволяє легко створювати динамічні та персоналізовані шаблони електронних листів для ваших потреб, все ж є деякі проблеми, про які вам слід знати.

    1. Шаблон електронної пошти не зберігається

    Іноді, під час спроби зберегти налаштований шаблон електронної пошти в Magento, ви можете отримати повідомлення "Щось пішло не так під час збереження шаблону". Цьому може бути кілька причин:

    • Недійсний синтаксис шаблону: переконайтеся, що синтаксис HTML або змінної правильний.
    • Відсутні обов'язкові поля: якщо ви залишите будь-яке з обов'язкових полів порожнім, виникне помилка.
    • Проблеми з дозволами: певні роль користувача можуть не мати дозволу на зміну та збереження шаблонів.
    • Тайм-аут сеансу адміністратора: Magento може не вдатися зберегти шаблон без відображення помилки, якщо час очікування сеансу адміністратора минув. Щоб вирішити цю проблему, увійдіть знову та спробуйте зберегти його ще раз.
    • Проблеми з кешем або компіляцією: очистіть кеш через Система > Керування кешем або виконайте такі команди CLI:
    bin/magento cache:clean
    bin/magento cache:flush

    2. Транзакційні електронні листи не вдається надіслати

    Якщо транзакційний електронний лист не вдається надіслати, спробуйте надіслати шаблон за замовчуванням. Якщо проблема полягає в налаштованому шаблоні електронного листа, скиньте його до стандартного та застосовуйте зміни поступово.

    3. Змінні шаблону не відображаються

    Якщо Mageno не відображає змінні шаблону електронної пошти, переконайтеся, що ви використовуєте правильний синтаксис var і нічого не пропускаєте. Іноді невелика помилка або неправильне написання змінних можуть спричинити помилки.

    Якщо помилка не зникає після виправлення, перейдіть до Система > Керування кешем та очистіть кеш.

    4. Відсутній логотип електронної пошти

    Якщо логотип вашої електронної пошти не відображається, спочатку перевірте його шлях та директиву. Потім переконайтеся, що ви встановили логотип електронної пошти глобально та зробили його успадковуваним у всіх представленнях магазину.

    Для цього перейдіть до Контент > Дизайн > Конфігурація, виберіть область, де у вас є проблеми з логотипом, і прокрутіть униз до розділу Заголовок . Переконайтеся, що встановлено прапорець Використовувати за замовчуванням .

    Вам також може знадобитися очистити кеш.

    5. Проблеми з макетом або дизайном

    Як ви вже знаєте, різні поштові клієнти можуть відображати ваші налаштовані електронні листи по-різному. Це добре відома проблема, коли справа доходить до налаштування шаблонів електронних листів.

    Тож, щоб бути в безпеці, прочитайте правила макета шаблонів електронних листів, перш ніж налаштовувати електронні листи.

    Отримайте більше шаблонів електронних листів у Magento

    Спілкування електронною поштою є критично важливим на кожному етапі шляху клієнта. Воно формує довіру, покращує впізнаваність бренду та допомагає вам пропонувати своїм клієнтам кращий сервіс.

    Magento допомагає вам у цьому, пропонуючи кілька шаблонів за замовчуванням та розширені можливості налаштування.

    Однак цього може бути недостатньо для більш просунутих стратегій. Якщо ви хочете сегментувати своїх клієнтів, щоб надсилати нагадування про відгуки, покинуті кошики та інші електронні листи, вам потрібні складніші інструменти, такі як Маутична інтеграція .