Сопутствующие товары – это те товары, которые наиболее часто покупают вместе с основным товаром, или товары, которые могут заинтересовать покупателя, который просматривает тот, или иной товар на сайте.
Например, покупатель выбирает кровать и вполне резонно будет показать ему матрасы, одеяла, или подушки подходящие к конкретной модели кровати. Также можно показать другие модели кроватей, чтобы если данная кровать не заинтересовала покупателя, то он мог обратить внимание на другие подобные изделия.
Как добавить сопутствующие товары в VirtueMart
Чтобы добавить сопутствующие товары в карточке товара необходимо перейти на вкладку «Настраиваемые поля» и начать вводить название нужного товара в поле Поиск сопутствующих товаров. Когда вам будет подобран нужный товар, всё что остается – это кликнуть по нему, и он будет добавлен в список сопутствующих товаров.
По умолчанию «Сопутствующие товары» в VirtueMart 3 включены. Но если по какой-либо причине их у вас нет, то можно самостоятельно добавить «Сопутствующие товары» в разделе «Настраиваемые поля».
В полях «Название», «Описание», «Всплывающая подсказка» указаны языковые переменные. Их можно заменить на любой другой текст, или вообще очистить эти поля (кроме поля «Заголовок»).
Настройка шаблона вывода сопутствующих товаров
За вывод похожих товаров в карточке товара отвечает код, находящийся в файле \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;
}
Теперь наши сопутствующие товары будут выглядеть так:
Для того, чтобы показывалась цена и картинка нужно выставить настройки настраиваемого поля «Сопутствующие товары» как показано на рисунке ниже.
Здесь же можно указать ширину и высоту картинки похожих товаров.