Настраиваем сортировку в 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" />');
После этого при повторном клике на выбранном пункте, по которому идет сортировка, будет меняться картинка рядом с этим пунктом, которая покажет в каком направлении (возрастающем или убывающем) сортируется товар. У меня получилось следующее.