Налаштування супутніх категорій в VirtueMart 3

У картці товару VirtueMart 3 можна виводити супутні категорії. Це ті категорії, які можуть зацікавити покупця, що переглядає конкретний товар.

Наприклад, коли покупець підбирає собі ліжко, то цілком можливо, що його зацікавлять матраци, подушки, або ковдри. В такому випадку можна вивести ці категорії під описом товару, щоб покупець звернув на них увагу і як наслідок купив ще що-небудь.

Як додавати супутні категорії

Супутні категорії в VirtueMart 3 включені за замовчуванням. Але якщо їх немає, то створити супутні категорії можна в настроюваних полях.

У полях «Назва», «Опис», «Спливаюча підказка» вказані мовні змінні. Їх можна замінити на будь-який інший текст, або взагалі очистити ці поля (крім поля «Тема»).

Налаштовуємо шаблон виводу супутніх категорій

За виведення супутніх категорій в картці товару відповідає код, що знаходиться в файлі \components\com_virtuemart\views\productdetails\tmpl\default.php.

echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_categories','class'=> 'product-related-categories'));

Для виведення назви перед категоріями в налаштуваннях настроюваного поля деактивуємо опцію «Показати назву».

Після цього в файлі \components\com_virtuemart\sublayouts\customfields.php перед

$custom_title = null;

додаємо

if($position == 'related_categories'){ ?>
 <div class="product-fields-title-wrapper"><span class="product-fields-title"><?php echo vmText::_('COM_VIRTUEMART_RELATED_CATEGORIES'); ?></span>
</div>
<?php }

І щоб все виглядало гарно, додамо в наш файл зі стилями наступні CSS правила :

/*Related Categories*/ 
.product-related-categories {
    display: flex;
    flex-wrap: wrap;
}
.product-related-categories .product-fields-title-wrapper {
    width: 100%;
    margin-bottom: 15px;
}
.product-related-categories .product-field {
    width: 25%;
    float: left;
    text-align: center;
}
.product-related-categories img {
    max-height: 90%;
    max-width: 90%;
    width: auto;
    margin: 0 auto;
    padding-bottom: 10px;
}
.product-related-categories .product-field-display {
    display: table;
    width: 100%;
    height: 200px;
}
.product-related-categories a {
    display: table-cell;
    vertical-align: bottom;
    height: 200px;
}

В результаті ми отримаємо ось такий вигляд супутніх категорій в картці товару VirtueMart 3.