Главная
Авто
Каждый элемент компонента электронной торговли от страницы товара или категории до кнопки «Добавить в корзину» расположен в отдельном файле. Каждый из файлов следует в порядке иерархии подключить друг к другу.
Для опытного пользователя это удобно, поскольку нет необходимости искать элементы в большом коде, но для новичка это станет настоящим испытанием. Упростить этот процесс вам поможет информация, изложенная в этой статье, которая содержит описание назначения всех файлов 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.
Для опытного пользователя это удобно, поскольку нет необходимости искать элементы в большом коде, но для новичка это станет настоящим испытанием. Упростить этот процесс вам поможет информация, изложенная в этой статье, которая содержит описание назначения всех файлов 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.
