Сопутствующие товары — это товары, которые чаще всего покупают с основным товаром (например, различные аксессуары), либо просто похожие товары из той же категории.

Добавление сопутствующих товаров

Для добавления похожих товаров в virtuemart 3 нужно зайти во вкладку Настраиваемые поля и начать вводить название нужного товара в поле Поиск сопутствующих товаров.

 

Если вы установили или обновили virtuemart до версии 3, то в Virtuemart > Товары > Настраиваемые поля уже должно быть создано новое настраиваемое поле Сопутствующие товары.

nastraivaemoe pole s soputstvuyushchimi tovarami 450x103

Если данного поля нет, то его можно создать. Основные настройки приведены на скриншоте.

nastroyki polya 450x347

В полях Заголовок, Описание, Всплывающая подсказка указаны языковые переменные. Вместо них можно просто указать свой текст.

 

Изменение шаблона вывода сопутствующих товаров

По умолчанию показывается только список ссылок на похожие товары.

vid pokhozhikh tovarov po umolchaniyu

Для показа цены и изображения изменяем настройки настраиваемого поля Сопутствующие товары.

nastroyki soputstvuyushchikh tovarov 450x189

Так же здесь можно задать размер миниатюр изображений товара и показ краткого описания.

За вывод похожих товаров в карточке товара отвечает код, находящийся в файле \components\com_virtuemart\views\productdetails\tmpl\default.php.

echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_products','class'=> 'product-related-products','customTitle' => true ));

Сам шаблон похожих товаров находится по адресу \components\com_virtuemart\sublayouts\related.php. В той же папке находятся и другие части кода, которые зачаcтую повторяются на разных страницах магазина. Это облегчает редактирование шаблона магазина в целом.

Для сохранения изменений шаблона похожих товаров после обновления virtuemart создадим папку  \templates\имя_шаблона\html\com_virtuemart\sublayouts и скопируем туда файл related.php.

Для улучшения внешнего вида немного изменим шаблон вывода. В файле \templates\имя_шаблон\html\com_virtuemart\sublayouts\related.php заменим

 

echo JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $related->virtuemart_product_id . '&virtuemart_category_id=' . $related->virtuemart_category_id), $thumb   . $related->product_name, array('title' => $related->product_name,'target'=>'_blank'));

на

echo '<div class="related-product-image">' . JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $related->virtuemart_product_id . '&virtuemart_category_id=' . $related->virtuemart_category_id), $thumb, array('title' => $related->product_name,'target'=>'_blank')) . '</div>';
echo JHtml::link (JRoute::_ ('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $related->virtuemart_product_id . '&virtuemart_category_id=' . $related->virtuemart_category_id),$related->product_name, array('title' => $related->product_name,'target'=>'_blank'));

Добавим немного стилей в файл стилей шаблона.

/*
Related Products
*/
 
.product-field-type-R {
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 10px;
}
.product-field-type-R img {
    max-width: 90%;
    max-height: 100%;
    height: auto;
    padding: 10px 0;
    display: block;
    margin: 0 auto
}
.related-product-image {
    height: 200px;
    display: table;
    width: 100%;
}
.related-product-image a {
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

После этого похожие товары будут выглядеть примерно так.

vid pokhozhikh tovarov posle redaktirovaniya 450x154

Для вывода не только окончательной цены, но и цены без скидки после строки

 

echo $currency->createPriceDiv ('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $related->prices);

Добавим

 

if (round($related->prices['basePriceWithTax'],$currency->_priceConfig['salesPrice'][1]) != $related->prices['salesPrice']) {
    echo '<span class="price-crossed" >' . $currency->createPriceDiv ('basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $related->prices) . "</span>";
}