Додавання супутніх (схожих) товарів в 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. У тій же папці знаходяться і інші частини коду, які як правило повторюються на різних сторінках магазину. Це полегшує редагування шаблону магазину в цілому.

Для збереження змін шаблону схожих товарів після оновлення 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

Тут же можна вказати ширину і висоту картинки схожих товарів .

АВТОРИЗАЦІЯ