Настраиваем сортировку в virtuemart 2
Сортировка товаров в категории — функция, присутствующая практически во всех более-менее крупных интернет-магазинах. По умолчанию в virtuemart 2 так же заложена возможность сортировать товар. В этой статье рассмотрим, как сделать сортировку более удобной. Но для начала, если вам не нужна сортировка, то убрать ее можно в файле components/com_virtuemart/views/category/tmpl/default.php, удалив строки сортировка по параметрам:
<?php echo $this->orderByList['orderby']; ?>
сортировка по производителям:
<?php echo $this->orderByList['manufacturer']; ?>
Для выбора параметров, по которым будет сортироваться товар в категории, нужно зайти в Компоненты->Virtuemart->Настройки->Настройки сортировки. Здесь можно выбрать сортировку по умолчанию, а так же дополнительные поля для сортировки. Для примера выберем 3 поля: Название, Цена и Артикул. По умолчанию оставим Название товара. Справа от выбора сортировки по умолчанию так же можно выбрать как сортировать: по возрастанию или по убыванию.
Если в категории выводятся товары нескольких производителей, то поле с сортировкой по производителю появляется автоматически. После всех настроек страница категории будет выглядеть примерно так.
Все параметры для сортировки находятся в выпадающих списках. Для большей наглядности выведем их в строчку. Перенесем производителей на новую строку. Для этого в файле components/com_virtuemart/views/category/tmpl/default.php сразу после
<?php echo $this->orderByList['orderby']; ?>
вставим
<?php echo '<br>'?>
Теперь подредактируем стили в файле components/com_virtuemart/assets/css/vmsite-ltr.css вместо
.orderlistcontainer div.activeOrder {
background: #FFF top right no-repeat url(../images/vmgeneral/arrow_down.png);
cursor: pointer;
border: solid #CAC9C9 1px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
font-size: 12px;
padding: 2px 24px 1px 12px;
}
добавим
.orderlistcontainer div.activeOrder {
cursor: pointer;
border: solid #CAC9C9 1px;
font-size: 12px;
padding: 2px 24px 1px 12px;
float: left;
margin-right: 3px;
}
вместо
.orderlistcontainer div.orderlist {
display: none;
position: absolute;
border: solid #CAC9C9 1px;
background: #FFF;
cursor: pointer;
}
добавим
.orderlistcontainer div.orderlist {
display: block !important;
background: #FFF;
cursor: pointer;
float: left;
}
вместо
.orderlistcontainer div.orderlist div {
padding: 2px 12px 1px;
}
добавим
.orderlistcontainer div.orderlist div {
padding: 2px 12px 1px;
float: left;
border: 1px solid #CAC9C9;
margin: 0 3px;
}
Если вы хотите убрать знак +/-, который выводится в поле Сортировать по. Для этого в файле administrator/components/com_virtuemart/models/product.php заменим
$orderByList = '<div class="orderlistcontainer"><div class="title">' . JText::_ ('COM_VIRTUEMART_ORDERBY') .
'</div><div class="activeOrder"><a title="' .
$orderTxt . '" href="' . $link . '">' . JText::_ ('COM_VIRTUEMART_SEARCH_ORDER_' . $orderby) . ' '
. $orderTxt . '</a></div>';
на
$orderByList = '<div class="orderlistcontainer"><div class="title">' .
JText::_ ('COM_VIRTUEMART_ORDERBY') .
'</div><div class="activeOrder"><a href="' .
$link . '">' . JText::_ ('COM_VIRTUEMART_SEARCH_ORDER_' . $orderby) .
' </a></div>';
Знак +/- можно не удалять, а поставить вместо него картинку со стрелкой, которая покажет порядок сортировки. Для этого нужно в файле administrator/components/com_virtuemart/models/product.php заменить
$orderTxt = JText::_ ('COM_VIRTUEMART_SEARCH_ORDER_DESC');
на
$orderTxt = JText::_ ('<img alt="" src="/путь к файлу 1" />');
и
$orderTxt = JText::_ ('COM_VIRTUEMART_SEARCH_ORDER_ASC');
на
$orderTxt = JText::_ ('<img alt="" src="/путь к файлу 2" />');
После этого при повторном клике на выбранном пункте, по которому идет сортировка, будет меняться картинка рядом с этим пунктом, которая покажет в каком направлении (возрастающем или убывающем) сортируется товар. У меня получилось следующее. 