Сопутствующие категории — это категории, которые могут быть потенциально интересны покупателям данного товара, например, категории с различными аксессуарами.

Данная статья является логическим продолжением предыдущей статьи про работу с сопутствующими товарами.

Добавление сопутствующих категорий

Для добавления сопутствующих категорий в virtuemart 3 переходим в админ панели во вкладку Настраиваемые поля и в поле Поиск сопутствующих категорий вводим поочередно название нужных категорий.

dobavlenie soputstvuyushchikh kategoriy 450x146

После установки или обновления до virtuemart 3 в Virtuemart > Товары > Настраиваемые поля должно быть создано новое настраиваемое поле Сопутствующие категории.

nastraivaemoe pole dlya soputstvuyushchikh kategoriy 450x62

Если его нет, то можно создать заново со следующими настройками.

nastroyki1 450x344

В полях Название, Описание, Всплывающая подсказка указаны языковые переменные. Их можно заменить на произвольный текст.

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

После сохранения настраиваемого поля станут доступны настройки внешнего вида категорий.

nastroyki2 450x165

На virtuemart 3.0.6 они не работают, т.е. название и изображение категории показывается всегда, в независимости от настроек. Это нам и нужно.

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

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

Так же в virtuemart 3.0.6 заголовок настраиваемого поля с сопутствующими категориями выводится в блоке с первой категорий. Это неправильно и, скорее всего, будет исправлено в следующих версиях.

Для вывода названия перед категориями в настройках настраиваемого поля деактивируем опцию Показать название и в файле\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 стилей в файл стилей шаблона или в файл стилей virtuemart /components/com_virtuemart/assets/css/vmsite-ltr.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;
}

В результате сопутствующие категории будут выглядеть так.

konechnyy vid soputstvuyushchikh kategoriy 450x135