Skip to content

Делаем красивое письмо о совершённом заказе

В 1С Битрикс Управление сайтом предусмотрена система почтовых шаблонов позволяющих удобно настраивать внешний вид рассылаемых с сайта писем, стилизовать их под фирменный стиль и т.д. Ознакомиться с ними можно в административной панели сайта в разделе: Настройки -> Настройки продукта -> Почтовые и СМС события -> Почтовые шаблоны. Однако для некоторых шаблонов таких как SALE_NEW_ORDER или письмо о новом заказе, недостаточно просто поправить HTML форму шаблона через административную панель.

И так, начнём! Помните как выглядит стандартное письмо о совершённом заказе? Нет? Напоминаю:

Стандартное письмо о заказе

Не очень информативно, правда? Давайте его немного улучшим. Маркетологи составили перечень того, что должно быть в каждом таком письме, а именно:

  • Заказанный товар или их перечень;
  • Изображение каждого продукта;
  • Цена и общая сумма;
  • Выбранный способ оплаты;
  • Способ доставки, ее стоимость и сроки (дату и время, если такую информацию можно предоставить заблаговременно);
  • Номер заказа или ТТН, по которому можно отслеживать его статус;
  • Контакты представителя вашей компании или номер колл центра, куда можно обратиться при возникновении вопросов, связанных с покупкой.

Давайте реализуем идеальное письмо о совершённом заказе!

Подготавливаем HTML шаблон письма

В первую очередь нужно изменить сам шаблон письма. Вёрстка писем целая «наука», здесь нет возможности подключить файл стилей и использовать удобные форматы типа Less CSS, все стили пишутся в теле письма, преимущественно в атрибуте style=»», не стоит забывать и об отсутствии адаптивности.

Давайте представим как будет выглядеть наше письмо, для этого я набросал прототип в специальном редакторе Mockingbird и вот что получилось:

Макет письма

Здесь у нас есть логотип компании с ссылкой на сайт. Ниже представлен популярные разделы сайта или каталога товаров, далее идёт информация о совершённом заказе и небольшая справка для покупателя, затем перечислены данные которые покупатель указал при оформлении заказа, а именно телефон, адрес доставки и выбранный способ доставки. Ниже таблица с составом заказа, товары (будут с картинкой и ссылкой), цена, количество итоговая сумма по каждой позиции + итоговая сумма всего заказа. Затем справочная информация по адресам магазина (это может быть раздел на сайте), быстрая ссылка для связи с консультантом магазина в WhatsApp, телефон магазина и пояснение на случай если при оформлении покупатель ввёл не тот email и письмо ушло не тому человеку.

По моему выглядит не плохо, давайте верстать!

Меняем ORDER_LIST

Получаем вот такой внешний вид письма (пока без товаров):

Внешний вид письма

Выше указанную вёрстку мы вставляем в шаблон письма о новом заказе расположенном в «Настройки -> Настройки продукта -> Почтовые и СМС события -> Почтовые шаблоны», здесь ищем шаблон с кодом SALE_NEW_ORDER.

Обратите внимание, что для того, чтобы визуальный редактор битрикс не испортил нам вёрстку, необходимо вставлять код в режиме HTML.

Режим визуального редактора, HTML

Вставляем код шаблона, сохраняем, ок. Теперь необходимо подменить ORDER_LIST , т.е. перехватить событие отправки этого письма, достать из БД необходимую информацию по товарам, сформировать HTML подходящий для нашего шаблона и вставить его в шаблон на место #ORDER_LIST_TABLE#. Поехали.

Что из себя представляет элемент в ORDER_LIST письма? Правильно, строку таблицы. Чтобы не плодить много кода в /local/php_interface/init.php вынесем шаблон строки таблицы в отдельный файл, например /local/php_interface/mail_item_template.php и добавим в него следующий код:

Обратите внимание шаблон строки сохраняется в специальную переменную $productItemTemplate, а внутри шаблона у нас есть вот такие коды как #PRODUCT_PRICE#, #PRODUCT_QUANTITY#, #PRODUCT_COST# и т.д. Вместо них будут подставлены реальные значения заказанных товаров.

За отправку письма о новом заказе у нас отвечает событие OnOrderNewSendEmail, давайте создадим соответствующий обработчик в init.php:

Обратите внимание что константу IBLOCK_CATALOG т.е. ID информационного блока каталог, нужно определить заранее. Собственно и всё. Оформляем заказ, получаем письмо (если конечно всё сделано верно и визуальный редактор битрикс ничего не испортил):

Готовое письмо

Как видите я дополнительно добавил ссылки на соц.сети, на случай если покупатель захочет на нас подписаться или посмотреть что-нибудь в инстаграм.

Добавляем дополнительные блоки

При необходимости это письмо можно расширить дополнительными блоками, например последними новостями с сайта или блоком доп.товаров которые так же могут заинтересовать посетителя. Не забывайте, человек который купил у вас товар и получи это письмо может докупить что-нибудь ещё и увеличить вам выручку, это как горячий лид. Например некоторые интернет магазины после покупаки предлагают ограниченную во времени персональную скидку на определённую группу товаров.

Любые дополнительные блоки письма вставляются аналогичным образом. В настройках шаблона в админке вы вставлете специальный код #SOME_BLOCK# а затем в коде, внутри обработчика события OnOrderNewSendEmail заменяете этот #SOME_BLOCK# сформированным HTML блоком кода с нужной вам информацией.

Не забывайте так же про аналитику, на все ссылки в письме можно подвесить специальные utm-метки и отследить переходы покупателей из письма на сайт, это может дать много полезной информации и позволит вам повысить конверсию сайта.

Надеюсь этот пост был полезен для вас. Задавайте вопросы в комментариях, делитесь им с друзьями. Желаю удачи!

Хотите описанную доработку себе на сайт?
Оставьте заявку!

Оставляя заявку, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
Понравилось? Поделись с друзьями:Share on VK
VK
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
ОпубликованоРазработка сайтов на 1С Битрикс

Оставьте первый комментарий!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от ботов *

Оставляя комментарий на сайте, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
© it-svalka.ru 2013 - 2020 г. - Копирование материалов сайта запрещено.