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

Сопутствующие товары VirtueMart

Сопутствующие товары – это те товары, которые наиболее часто покупают вместе с основным товаром, или товары, которые могут заинтересовать покупателя, который просматривает тот, или иной товар на сайте.

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

Как добавить сопутствующие товары в VirtueMart

Чтобы добавить сопутствующие товары в карточке товара необходимо перейти на вкладку «Настраиваемые поля» и начать вводить название нужного товара в поле Поиск сопутствующих товаров. Когда вам будет подобран нужный товар, всё что остается – это кликнуть по нему, и он будет добавлен в список сопутствующих товаров.

Сопутствующие товары VirtueMart

По умолчанию «Сопутствующие товары» в VirtueMart 3 включены. Но если по какой-либо причине их у вас нет, то можно самостоятельно добавить «Сопутствующие товары» в разделе «Настраиваемые поля».

Сопутствующие товары VirtueMart

В полях «Название», «Описание», «Всплывающая подсказка» указаны языковые переменные. Их можно заменить на любой другой текст, или вообще очистить эти поля (кроме поля «Заголовок»).

Сопутствующие товары VirtueMart

Настройка шаблона вывода сопутствующих товаров

За вывод похожих товаров в карточке товара отвечает код, находящийся в файле \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;
}

 Теперь наши сопутствующие товары будут выглядеть так:

Сопутствующие товары VirtueMart

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

Сопутствующие товары VirtueMart

Здесь же можно указать ширину и высоту картинки похожих товаров.

Наши рекомендации

Сollaborator

Hosting Ukraine

АВТОРИЗАЦИЯ