Уроки Joomla

Изучение CMS. Работа с компонентами, модулями и плагинами.

Настройка шаблона отображения категории товаров Virtuemart 2. Урок 4.

Настройка шаблона отображения категории товаров Virtuemart 2.

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

Но прежде, чем что-то редактировать, нужно разобраться где что лежит. Чем я и предлагаю сейчас заняться.

В первую очередь будем отталкиваться от того, что сам компонент находится вот здесь - /components/com_virtuemart.

Шаблоны отображения тех или иных элементов интернет-магазина :

/components/com_virtuemart/views

Примечание. В папке views лежат еще папки, присущие соответствующим шаблонам. Рассмотрим теперь, какая папка и за какой шаблон отвечает.

/components/com_virtuemart/views/askquestion – шаблоны формы – “Задайте вопрос по этому товару”.

Покупатели вашего интернет-магазина могут задавать вам вопросы по товару, в том случае, если в настройках Virtuemart на вкладке Внешний вид, стоит галочка напротив Ссылка 'Задать вопрос об этом товаре'?

/components/com_virtuemart/views/cart – шаблоны отображения самой корзины, которая собственно изначально и организована слишком криво, и которую мы будем потом править, приводя в юзабильный вид.

/components/com_virtuemart/views/categories – честно говоря, так и не разобрался, что правится в этом шаблоне. По идее должно отображение товаров в категории. А на деле – никаких изменений мною замечено не было, однако если вы сможете разобраться за что в итоге отвечает этот шаблон, то буду признателен.)

/components/com_virtuemart/views/category – шаблон отвечает за отображение товаров в категории, а от предыдущего отличается тем, что работает) Изначально шаблон кривой… И в отличии от предыдущего Виртуемарта, мы никак не можем через админку повлиять, чтобы дизайн был табличным. Ну что ж, ладно, невелика беда… В одном из своих уроков я расскажу, как придать шаблону табличный вид, путем редактирования самого шаблона.

/components/com_virtuemart/views/invoice – шаблоны формирования PDF отчетов, и формирования писем, приходящих на почту клиенту.

/components /com_virtuemart/views/manufacturer – здесь находятся все шаблоны, отвечающие за отображение товаров по производителю.

/components /com_virtuemart/views/orders – шаблон отправки письма на почту пользователю с информацией о сделанном им заказе.

/components /com_virtuemart/views/pdf – шаблон формирования показа товара в PDF-документе, при щелчке по соответствующей иконке.

Примечание. Отображение самой иконки настраивается в настройках Virtuemart на вкладке “Внешний вид”. Галочка напротив пункта – “Показывать иконку PDF? “.

/components/com_virtuemart/views /pluginresponse - подтверждение оплаты платежа.

/components/com_virtuemart/views /productdetails – отображение товара.

/components/com_virtuemart/views /recommend ­ - форма показа рекомендуемых товаров.

/components/com_virtuemart/views /user – информация о покупателе.

/components/com_virtuemart/views /vendor – информация о продавце.

/components/com_virtuemart/virtuemart/ - отображение шаблонов по умолчанию.

Еще пару слов о том, как устроены шаблоны.

В тех папочках, которые я перечислил выше, есть подпапка tmpl, в ней хранятся файлы шаблона, которые отвечают за просмотр только тех пунктов меню, которые не отображают корневую страницу Virtuemart, на которой выведен всех список категорий. За редактирование этого шаблона отвечает файл view.html.php.

Может быть это звучит несколько запутанно, но если попробовать объяснить попроще, то если у меня есть пункт меню, который привязан к главной странице Виртуемарта и я хочу отредактировать шаблон просмотра категории товаров, то мне нужен будет именно файл view.html.php. Во всех остальных случаях, допустим когда у меня пункт меню привязан к отдельной категории, мне нужно будет редактировать файл default.php, который находится в подпапке tmpl соответствующей директории шаблона.

Как обновить Virtuemart 2 и при этом не затереть файлы шаблона?

Это еще одна проблема, с которой вы можете столкнуться, если решите вдруг обновить компонент до последней версии. Дело в том, что при обновлении меняется не только ядро компонента, но также и файлы шаблонов. Чтобы избежать этого, нам нужно будет переопределить шаблон.

Для этого будет нужно в папке нашего шаблона Джумлы, который находится в папке templates, в папку html(а если ее не было, то необходимо будет ее создать) скопировать содержимое папки /components/com_virtuemart/views/ в /templates/мой_шаблон/html/com_virtuemart/ с той лишь поправкой, что структура должна быть скопирована полностью без папки tmpl.

К примеру шаблон категории, который изначально находился здесь - components\com_virtuemart\views\category\tmpl\default.php в итоге, по завершении нашей операции, должен будет располагаться тут - templates\имя_нашего_шаблона\html\com_virtuemart\category\default.php.

Итак, чего же мы добьемся таким вот копированием? Прежде всего того, что при обновлении компонента Virtuemart, файлы наших шаблонов теперь не перезапишутся со всеми проведенными с ними изменениям, потому что отныне, все шаблоны будут находиться по тому пути, по которому мы их скопировали. Соответственно, все изменения по работе с шаблонами, мы уже будем проводить именно там.

Как настроить табличное отображение товаров в Virtuemart 2?

Одним из недостатков Виртуемарт является то, что у него нельзя настроить из-под коробки настроить так, чтобы все товары отображались в виде таблички. Поэтому нам придется отредактировать стили. Что ж, приступим.

Следующее, чем мы сейчас займемся, так это редактированием шаблона, а именно – непосредственно файла default.php, который находится по адресу:

/components/com_virtuemart/views/category/ или /templates/имя_нашего_шаблона/html/com_virtuemart/category , если вы согласно моему совету переопределили шаблон Virtuemart.

Приступим к редактированию файла стилей, который у меня допустим лежит в паке components/com_virtuemart/assets/css/ и называется vmsite-ltr.css(это стандартный виртуематовский шаблон). У вас он может быть свой, в зависимости от того, какой шаблон вы используете.

Я видоизменяю стандартный, поэтому он и будет взят за основу. Не буду описывать процедуру эту подробно, где и что мне приходилось менять, потому что это тема для отдельной истории, - основы HTML и CSS. Вместо этого, я дам ссылки на то, что у меня получилось в итоге.

Вот что у меня получилось в итоге – default.php

Здесь файл со стилями - vmsite-ltr.css

До встречи в следующих уроках!