Главная Система управления Как менять шаблоны отображения товаров в Virtuemart
Как менять шаблоны отображения товаров в Virtuemart

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

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

Итак, для начала нам нужно узнать какой же все-таки шаблон выводит у нас страницу товара. Для этого достаточно просто зайти в административную панель магазина, зайти в панель управления Virtuemart и найти там Список категорий. К каждой категории привязывается определенный шаблон отображения товаров Virtuemart. Нам нужно посмотреть какой же шаблон привязан к нашим категориям. Если вы не устанавливали разные шаблоны к категориям то у вас он будет всего один, который привязан к ним по умолчанию. В этом случае просто откройте любую категорию товаров для редактирования и посмотрите что будет написано в окошке Просмотр представления категории.

u1.jpg

В моем случае это файл flypage_lite_pdf.tpl . Теперь нам нужно найти его на сервере и поправить так как нам необходимо.

Запустим программку WinSCP и зайдет на наш сайт по ftp. Файлы шаблонов лежать в папке ../components/com_virtuemart/themes/default/templates/product_details

Открываем наш файл на редактирование.

Разберем что же означают директивы, которые встречаются в файле

<?php echo $product_image ?> - выводится маленькое изображение товара со ссылкой Увеличить

 <?php echo $product_full_image ?> - выводится большое изображение товара

<?php echo $product_description ?> - выводится полное описание товара

 

<?php echo $related_products ?> - связанные продукты, которые покупают вместе с этим товаром

<?php echo $vendor_link ?> - ссылка на страницу продавца

<?php echo $product_price ?> - выводится цена товара

<?php echo $product_type ?> - выводятся характеристики товара, которые указаны в типе товара

 

<?php echo $ask_seller ?> - форма "Задать вопрос по товару"

<?php echo $product_reviews ?> - форма отзывов о товаре

$navigation_pathway - отображает путь до товара

<?php echo $product_name ?> - выводится название товара

<?php echo $addtocart ?> - форма вывода кнопки "Положить в корзину" и поля ввода количества

<?php echo $manufacturer_link ?> - ссылка на страницу производителя

 

 

 

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

И на последок я покажу вам пример как оформить страницу товара следующим образом:

u2.jpg

Содержимое файла с шаблоном будет следующим:


 <?php

// this template must have quirky html, because HTML2PDF doesn't fully understand

// CSS and XHTML

if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>

<br>

<div style="margin: 10px 10px 10px 10px;" align="left"><?php echo $product_image ?>

<div style="margin-left: 10px;">

<h4><?php echo $product_name ?></h4><br><h5>Цена: <?php echo $product_price ?></h5> <?php echo $addtocart ?>

<br><br><br><?php echo $product_description ?>

</div>

<br>

<?php echo $ask_seller ?>

<br>

<?php echo $product_reviews ?> 

</div>

О том как убрать поле ввода количества и изменить кнопку Купить я расскажу в следующих уроках.