• Joomla
• VirtueMart
• php

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

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

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

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

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

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

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

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

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

На 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;
}

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