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

После совершения или изменения статуса заказа компонент Virtuemart отправляет письмо покупателю. Внешний вид этого письма далек от идеала. Что характерно: в разных почтовых программах и сервисах дизайн писем отличается. По понятным причинам — это мало кого устраивает.
 

Я написал небольшой компонент, который позволяет настроить внешний вид письма с заказом в Virtuemart, а также сделать так, что это письмо будет отображаться одинаково в разных почтовых клиентах.

 

Компонент называется «Редактор шаблонов»

 

На данный момент он умеет:

 

  • Редактировать шаблон письма с заказом

  • Редактировать шаблоны писем при регистрации (только через компонент Virtuemart!) покупателю и владельцу магазина

 

Совместимость компонента:

 

Joomla 3.8 и выше

Virtuemart 3.2 и выше

 

Компонент в силу определенных причин я сделал платным. Ниже ссылка на страницу компонента в моем интернет-магазине:

 

Купить «Редактор шаблонов» для Virtuemart

 

Прежде чем приступать к изучению компонента, хотелось бы ответить на один важный вопрос.

 

Почему стандартные письма Virtuemart выглядят в разных браузерах по разному?

 

Проблема всех современных почтовых клиентов в том, что HTML содержимое писем они читают по разному. Например, при чтении Яндекс Почты можно обнаружить, что браузерный клиент полностью игнорирует CSS правила заключенные в теги <style></style>

Он воспринимает только те правила, что заключены непосредственно в теги элементов, расположенных на странице.

Стандартный шаблон письма Virtuemart построен с использованием классов и стилей, заключенных в теги <style></style>. Поэтому в каких то почтовых клиентах письмо выглядит более менее приемлемо. А в каких то представляет собой набор текста на сером фоне.

 

 

Установка «Редактора шаблонов» для Virtuemart


 

Устанавливается компонент стандартно. Через менеджер расширений.

После установки, необходимо в административной панели перейти:

Компоненты — Редактор шаблонов



 

Мы увидим три шаблона для редактирования. Шаблоны подписаны и какой из них за что отвечает в пояснении, думаю, не нуждается.


 

Однако, прежде чем, приступать к редактированию шаблонов, мы должны завершить настройку компонента.

Для этого отправляемся в раздел «Установка» компонента.



 

Здесь мы увидим выпадающий список, в котором будут показаны все шаблоны для фронтальной части сайта.

Компонент сам подскажет шаблон, который установлен «по умолчанию». Выбираем его и нажимаем кнопку «Установить»

Далее компонент будет пытаться установить свои файлы в каталог выбранного шаблона.



 

Файлы будут те же самые, которые я описывал в предыдущем разделе статьи. Однако, они видоизменены таким образом, чтобы поддерживалась работа с компонентом «Редактор шаблонов»

Посмотрим на рисунок выше и почитаем: что же именно происходило в процессе установки?

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

Далее проверяет наличие в каталогах файлов mail_html.php, mail_html_reguser.php и mail_html_regvendor.php

Если такие файлы уже существуют, то существующие он переименовывает, а вместо них копирует свои собственные.

После того, как появилась надпись «Установка шаблонов успешно произведена», можно отправиться на главную страницу компонента и приступить к редактированию шаблонов.


 

Редактирование шаблона заказа письма в Virtuemart - особенности


 

Редактирование шаблона заказа письма осуществляется в визуальном редакторе.


 

Данные из Virtuemart вставляются с помощью специальных тегов.

Таблица с тегами расположена под редактором. Там показаны теги и пояснения к ним.



 

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

Например тег {VIRTUEMART_FIELD_TITLE_PHONE_1} — отобразит название поля phone_1

А тег {VIRTUEMART_FIELD_VALUE_PHONE_1} — отобразит данные, которые посетитель сайта ввел в это поле

Как узнать названия полей?

Для этого в административной панели нужно перейти Virtuemart — Настройки — Поля заполняемые пользователями

В колонке «Название поля» мы и увидим необходимую информацию


 



 

Тег {ORDER_TABLE} и редактирование таблицы с товарами и ценами


 

Пожалуй, самый важный тег — это {ORDER_TABLE}

Именно он выводит таблицу с заказанными товарами.

Настроить отображение таблицы и отображаемых элементов в таблице можно на вкладке «Параметры» при редактировании шаблона



 

В частности, можно включать/отключать отображение колонок.


 



 

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

Также представлены отдельные настройки для редактирования отображения способов оплаты и доставки.

Перечислять и описывать каждую настройку не вижу особого смысла. Даже в версии 1.0 получилось несколько десятков параметров, с помощью которых можно управлять выводом таблицы с товарами

Если у вас остались вопросы, я с радостью отвечу по телефону или электронной почте.


 

С уважением, Владимир Егоров