Наверное каждый, кому приходилось подгонять дизайн VirtueMart под определенный шаблон или под требования заказчика, знает, какое это муторное занятие. Основная проблема заключается в том, что практически каждый элемент VirtueMart, будь то страница товара, категории, кнопка «Добавить в корзину» и.т.д., хранится в отдельном файле. Все файлы подключаются друг к другу иерархически. Да, с одной стороны это удобно, т.к. не нужно выискивать каждый элемент в огромном коде, но с другой стороны, человек, мало знакомый с VirtueMart просто замучается искать нужный файл. Для того, чтобы немного упростить нелегкую жизнь веб-мастеров, делающих интернет-магазины, я решил написать эту статью, рассказав в ней о назначении всех файлов шаблона VirtueMart с графическими иллюстрациями.

Итак, для начала нам нужно увидеть общую структуру шаблона VirtueMart. Т.к. интернет-магазин приложение довольно сложное, то и структура получается соответствующая.

Шаблон VirtueMart состоит из следующих основных составляющих:

1) Шаблон категории товаров(browse) – данный шаблон отвечает за отображения списка товаров в определенной категории.

2) Шаблон страницы товара(flypage) – данный шаблон отвечает за отображение страницы с отдельным товаром, той, которая появляется при клике по товару из категории товаров.

3) Шаблон корзины товаров (basket) – шаблон, отвечающий за внешний вид страницы, с изображением корзины товаров(не путать с модулем корзины товаров). Здесь речь идет о той странице, которая появляется после клика по ссылке «Показать корзину». Пример будет ниже.

4) Шаблон оформления заказа (checkout) – шаблон отвечающий за страницы, которые показываются в процессе оформления заказа, а именно выбор методов оплаты, доставки, регистрация и.т.д

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

Пять шаблонов, описанных выше – понятие абстрактное, поскольку каждый из них состоит из нескольких файлов. Ниже рассмотрим их подробно.

Редактирование шаблона VirtueMart. Основной шаблон.

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

Стандартный шаблон находится в папке

components\com_virtuemart\themes\default

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

Стандартный шаблон состоит из следующих файлов и папок:

– images – папка, содержащая все изображения шаблона (не путать с изображениями товаров и категорий. Их тут нет.);

– templates – папка, содержащая все шаблоны страниц шаблона(получилось масло масляное… Скажем так, в основном шаблоне VirtueMart содержаться подшаблоны, отвечающие за вид различных элементов интернет-магазина);

– admin.css – этот и два следующих файла являются таблицами стилей шаблона VirtueMart. Все CSS-стили шаблона содержаться в этих файлах.

– admin.styles.css

– theme.css

– theme.js, theme.prototype.js –скрипты шаблона. Отвечают за создание различных эффектов.

– theme.config.php – конфигурационный файл шаблона. Содержит некоторые настройки шаблона VirtueMart по умолчанию(по аналогии с configuration.php Joomla)

– theme.php – файл функций шаблона. Позволяет добавлять к шаблону дополнительные функции и классы (для тех, кто хорошо владеет php).

– theme.xml – xml-файл шаблона. Создан по аналогии с xml-файлами шаблонов Joomla.

Во всей вышеописанной структуре прежде всего нас интересует папка templates, т.к. именно в ней храняться шаблоны всех элементов шаблона Default.

Далее рассмотрим ее подробно.

Редактирование шаблона VirtueMart. Папка templates.

Папка Templates состоит из семи подпапок:

– basket – внешний вид корзины с товарами;

– browse – внешний вид категорий товаров;

– checkout – внешний вид процесса оформления заказа;

– common – шаблоны, общие для всего магазина;

– order_emails – шаблоны писем, посылаемых в процессе работы с магазином;

– pages – шаблоны дополнительных страниц;

– product_details – внешний вид страницы товара.

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

Редактирование шаблона VirtueMart. Подпапка basket.

Подпапка basket содержит 4 шаблона, которые делятся на 2 вида:

– b2b (Business to Business)

– b2c (Business to Customer)

Вид выбирается в зависимости от того, включена или отключена в настройка опция «Показать "(включая XX% налогов)", когда они применяются?». Если она включена, то используется вид b2c, иначе b2b.

1) basket_b2b.html.php – шаблон корзины вида b2b.

2) basket_b2с.html.php – шаблон корзины вида b2с. См. рисунок ниже:

3) ro_basket_b2b.html.php – шаблон корзины вида b2b только для чтения (read-only). Показывается на последнем шаге оформления заказа, где пользователь уже не может изменить введенные данные.

4) ro_basket_b2c.html.php – шаблон корзины вида b2c только для чтения (read-only). Показывается на последнем шаге оформления заказа, где пользователь уже не может изменить введенные данные.

Редактирование шаблона VirtueMart. Подпапка browse.

Как я уже писал выше, шаблоны данной подпапки используются для вывода списка товаров категории. Всего в этой подпапке 6 файлов и еще одна подпапка. Рассмотрим их по порядку:

1) browse_1.php – шаблон, предназначенный для отображения списка по одному товару в строке (кроме того, в категории должно быть указанно соответствующее количество товаров в строке).

2) browse_2.php – шаблон, предназначенный для отображения списка по два товара в строке (кроме того, в категории должно быть указанно соответствующее количество товаров в строке).

3) browse_3.php, browse_4.php, browse_5.php – 3, 4 и 5 товаров в строке соответственно.

4) browse_lite_pdf.php – шаблон, предназначенный  для легкой конвертации списка товаров в формат PDF. Отличается от предыдущих прежде всего тем, что не содержит в себе каких-либо пользовательских данных, например, рейтинга.

Если с файлами browse все довольно просто, то с подпапкой includes могут возникнуть проблемы. Рассмотрим содержащиеся в ней шаблоны(они все относятся именно к странице browse!):

1) addtocart_form.tpl.php – шаблон  кнопки добавления на карту;

2) browse_header_all.tpl.php – шаблон заголовка страницы в списке всех товаров

3) browse_header_category.tpl.php – шаблон заголовка страницы browse +RSS-иконка, в списке товаров категории

4) browse_header_keyword.tpl.php – шаблон заголовка страницы в списке товаров при поиске. Работает только в обычном поиске, но не в расширенном поиске по характеристикам;

5) browse_header_manufacturer.tpl.php – шаблон заголовка страницы в списке производителей товаров. Например, установив модуль отображения производителей и перейдя в нем в какую-либо категорию производителей к заголовку можно применить данный шаблон.

6) browse_layouttable.tpl.php (browse_listtable.tpl.php, browse_notables.tpl.php) – в VirtueMart список товаров browse может быть построен тремя способами:

а) с помощью таблиц:

б) плоским списком (по одному товару в строку с помощью таблиц):

в) без таблиц (с использованием DIV’ов):

Выбрать способ отображения можно в настройках шаблона VirtueMart («VirtueMart» –> «Настройки» –> «Сайт» –> «Выберите шаблон для магазина»(настройки) –> «Product List Style»). Данные три шаблона как раз отвечают за способ построения списка товаров.

Здесь очень тонкая грань с шаблонами browse_x. Важно ее понимать. Шаблоны browse_x отвечают за отображение одного товара в списке, а данные 3 шаблона – собственно, за формирование списка. Т.е. они как бы много раз повторяют шаблон browse_x.

7) browse_orderbyfields.tpl.php – файл, содержащий коды для возможных полей сортировки товаров на странице browse. Редактировать там особо нечего.

8) browse_orderbyform.tpl.php – внешний вид формы сортировки на странице browse;

9) browse_pagenav.tpl.php – шаблон отображения пагинации (номеров страниц со ссылками следующая, предыдущая и.т.д.) для списка товаров на странице browse

10) browse_searchparameter_form.tpl.php – шаблон отображения заголовка при расширенном поиске по дополнительным характеристикам.

Редактирование шаблона VirtueMart. Подпапка checkout.

Как упоминалось выше в данной подпапке содержаться шаблоны процесса оформления заказа. Рассмотрим их подробно:

1) checkout_bar.tpl.php – шаблон полоски процесса оформления заказа

2) customer_info.tpl.php – шаблон информации о покупателе на этапе «Адрес доставки»

3) get_final_confirmation.tpl.php – шаблон ранее введенной информации на этапе «Завершить заказ»

4) get_payment_method.tpl.php – шаблон заголовка выбора способа оплаты на этапе «Способ оплаты»

5) get_shipping_address.tpl.php – шаблон выбора адреса доставки на этапе «Адрес доставки»

6) get_shipping_method.tpl.php – шаблон заголовка выбора способа доставки на этапе «Варианты доставки»

7) list_payment_methods.tpl.php – шаблон выбора способа оплаты на этапе «Способ оплаты»

8) list_shipping_methods.tpl.php – шаблон выбора способа доставки на этапе «Варианты доставки»

9) list_shipto_addresses.tpl.php – шаблон списка адресов доставки на этапе «Адрес доставки»

10) login_registration.tpl.php – шаблон страницы «Оформить заказ» для незарегистрированных пользователей.

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