Настройка сопутствующих категорий в VirtueMart 3

Сопутствующие категории VirtueMart

В карточке товара VirtueMart 3 можно выводить сопутствующие категории. Это те категории, которые могут заинтересовать покупателя, просматривающего конкретный товар.

Например, когда покупатель подбирает себе кровать, то вполне возможно, что его заинтересуют матрасы, подушки, или одеяла. В таком случае можно вывести эти категории под описанием товара, чтобы покупатель обратил на них внимание и как следствие купил ещё что-нибудь.

Как добавлять сопутствующие категории

Сопутствующие категории в VirtueMart 3 включены по умолчанию. Но если их нет, то создать сопутствующие категории можно в настраиваемых полях.

Сопутствующие категории VirtueMart

Сопутствующие категории VirtueMart

В полях «Название», «Описание», «Всплывающая подсказка» указаны языковые переменные. Их можно заменить на любой другой текст, или вообще очистить эти поля (кроме поля «Заголовок»).

Сопутствующие категории VirtueMart

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

За вывод сопутствующих категорий в карточке товара отвечает код, находящийся в файле \components\com_virtuemart\views\productdetails\tmpl\default.php.

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

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

Сопутствующие категории VirtueMart

После этого в файле \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.

Сопутствующие категории VirtueMart

АВТОРИЗАЦИЯ