Супутні товари – це ті товари, які найбільш часто купують разом з основним товаром, або товари, які можуть зацікавити покупця, який переглядає той, чи інший товар на сайті.
Наприклад, покупець вибирає ліжко і цілком резонно буде показати йому матраци, ковдри, або подушки, які підходять саме до цієї моделі ліжка. Також можна показати інші моделі ліжок, щоб якщо дане ліжко не зацікавило покупця, то він міг звернути увагу на інші подібні вироби .
Як додати супутні товари в 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. У тій же папці знаходяться і інші частини коду, які як правило повторюються на різних сторінках магазину. Це полегшує редагування шаблону магазину в цілому.
Для збереження змін шаблону схожих товарів після оновлення 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;
}
Тепер наші супутні товари будуть виглядати так:
Для того, щоб показувалася ціна і картинка потрібно виставити налаштування в налаштовуваному полі «Супутні товари» як показано на малюнку нижче .
Тут же можна вказати ширину і висоту картинки схожих товарів .
Пригостити автора кавою