Настройка сопутствующих категорий в 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.