Битрикс кастомизация умного фильтра
часто возникает задача поменять шаблон catalog.smart.filter — например, селект сделать картинками, а на range slider цен навесить свои ползунки. Разобраться в битриксовом винегрете из html, php, js можно в этом посте.
Шаблон условно легко поделить на фильтр по св-вам, к-е указали в админке (Магазин — Основной каталог товаров — Настройки каталога), и фильтр по ценам. Это 2 цикла с пометками //prices //not prices
1. Начнем со св-в. Здесь идет проверка на тип св-ва (Вид в умном фильтре). Нам нужен
case "P"://DROPDOWN
блок
<div class="bx-filter-select-text" data-role="currentOption">
— это отмеченная опция. Если нет отмеченной, по умолчанию показывается Все, значение к-го передается в скрытом инпуте.
Далее в цикле идет вывод самих опций селекта с соответсвующими input type=»hidden».
// выпадающий блок с опциями
<div class="bx-filter-select-popup" data-role="dropdownContent" style="display: none;">
// это заголовок самого св-ва, напр. Цвет, Размер, Марка.
<div class="bx-filter-parameters-box-title" onclick="smartFilter.hideFilterProps(this)">
Range slider для цен
Фильтр по ценам работает, если миним. цена действительно меньше максимальной. После проверки есть переменная $step_num. Обнулив ее легко убрать шкалу.
// отвечает за вывод шкалы.
for ($i = 0; $i < $step_num; $i++)
2 инпута min-price/max-price. Изначально пустые.
// установит min/max цены.
$arItem["VALUES"]["MIN"]["HTML_VALUE"] = $arItem["VALUES"]["MIN"]["VALUE"]; // curMinPrice
$arItem["VALUES"]["MAX"]["HTML_VALUE"] = $arItem["VALUES"]["MAX"]["VALUE"]; // curMaxPrice
// ползунок
<div class="bx-ui-slider-track" id="drag_track_<?=$key?>">
И в самом конце блок
<div class="col-xs-12 bx-filter-button-box">
— 2 кнопки Показать, очистить, а также всплывашка с количеством результатов фильтра «bx-filter-popup-result».
аффтар,ну чес слово… что за обман? как называется статья? «кастомизация умного фильтра». а что имеем по факту? отчет капитана очевидности? я уж думал будет что то интереснее, чем описание части кода шаблона…
не стал выносить весь код своего шаблона, чтобы не засорять глаз. Сосредоточился на конкретном.