Настройка внешнего вида Virtuemart 1.1.x

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

Почти все шаблоны делятся на 2 две группы:

  1. Шаблоны для категории
  2. Шаблоны для товара (карточка)

Все шаблоны представляют из себя простые текстовые файлы с html кодом внутри, только вместо конкретных данных там находятся заглушки.

Как это всё вообще работает. Для того чтобы увидеть содержимое любой категории в адресной строке или POST запросе должны присутствовать хотябы следующие параметры: option=com_virtuemart, page=shop.browse. После запроса на просмотр определенной категории парсер VirtueMart запускает файл «shop.browse.php». Там в соответствии с установленными параметрами выполняется запрос в базу данных.

Если запрос вернул записи, то из данных категории, если была запрошена категория или из данных первого найденного товара, если выполнялся поиск, берется имя шаблона, и выбранные записи циклично обрабатываются. А именно, из данных текущей записи определяются переменные, после чего заглушки из шаблона заменяются на значения этих переменных.

Шаблон категории (перечень товаров)

Шаблоны отображения данных для категорий размещаются в /components/com_virtuemart/themes/default/templates/browse/browse_XX.php
и могут задаваться для каждой категории разными (своими). Устанавливаются в настройках категории. Всё это ужасно интересно, но для пользователей, которым совершенно не хочется копаться в коде я приведу таблицу соответствий заглушек абстрактному содержанию переменных.

  • {product_flypage} - Ссылка на флаер товара
  • {product_thumb_image} - Имя файла маленькой картинки
  • {product_full_image} - Имя файла большой картинки
  • {full_image_width} - Ширина большой картинки. Для открытия картинки в окне, размером с картинку
  • {full_image_height} - Высота большой картинки
  • {image_url} - Ссылка до директории картинок Virtuemart «images/»
  • {image_width} - Ширина маленькой картинки
  • {image_height} - Высота маленькой картинки
  • {product_name} - Наименование товара
  • {product_s_desc} - Краткое описание товара
  • {product_details...} - Имя ссылки на флаер товара «Подробнее...»
  • {product_rating} - Рейтинг товара
  • {product_price} - Цена товара
  • {form_addtocart} - Форма добавления в корзину
  • {product_sku} - Артикул товара

Внешний вид карточки товара

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

  • {navigation_pathway} - Путь до товара - Инструменты ? Дрели ? Дрель/Шруповерт D-Link DSL-G604T
  • {navigation_childlist} - Выпадающий список с дочерними товарами - Для добавления нужно войти в свойства товара а затем в меню VirtueMart выбрать «Товары» ? «Текущий товар» ? «Добавить объект»
  • {product_name} - Наименование товара
  • {product_image} - Готовая маленькая картинка
  • {full_image} - Готовая большая картинка
  • {more_images} - Готовая ссылка на дополнительные картинки - Для добавления нужно войти в свойства товара, а затем в меню VirtueMart выбрать «Товары» ? «Менеджер файлов» ? «Добавить изображение/файл
  • {file_list} - Файлы товара
  • {edit_link} - Ссылка на редактирование свойств товара уполномоченными пользователями
  • {manufacturer_link} - Ссылка на страницу подробной информации о производителе
  • {product_price} - Цена товара
  • {product_s_desc} - Краткое описание товара
  • {product_description} - Полное описание товара
  • {product_weight} - Вес товара
  • {product_sku} - Артикул товара
  • {addtocart} - Форма добавления в корзину
  • {product_reviews} - Покупательские отзывы
  • {product_reviewform} - Форма для оставления отзыва
  • {product_availability} - Доступность товара - Те идиотские картинки =) 24h, 1 week и пр. По нашему «Обычное время доставки»
  • {vendor_link} Ссылка на продавца - Имеет смысл, если в магазине много продавцов. Обычно Вы и есть единственный продавец.
  • {mosConfig_live_site} - Ссылка на ваш сайт
  • {related_products} - Простые карточки схожих продуктов - Можно назначить в свойствах товара, можно позволить VirtueMart генерировать этот список самостоятельно, а можно просто отключить.
  • {product_type} - Таблица с параметрами типа товара - Внешний вид меняется в файле «ps_product_type.php» в функции «list_product_type»
  • {product_packaging} - Информация об упаковке и количестве товаров в упаковке - Задается в свойствах товара

Настройка внешнего вида каталога

Все начинается с изменения файла текущего шаблона магазина /common/categoryChildlist.tpl.php:

  1. Для изменения количества категорий строку ищем 6-ю строку и находим строку $categories_per_row = х; Здесь соотвественно указанно, количество категорий на строку, можете сами выставить желаемое
  2. Расстояние между категориями меняются - Для этого меняем параметр cellpadding="". Вместо "0" ставим например "7".

Настройка внешнего вида подкатегории

В этом случае изменяем файл /components/com_virtuemart/themes/default/templates/common/categoryChildlist.tpl.php. Действия такие же, как в настройке внешнего вида каталога.