---
title: Фильтр товаров
section: catalog
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline: []
  php_partials:
    - views/_component/filter.php
  scss:
    - src/client/filter/index.scss
    - src/client/range-slider/index.scss
  js:
    - src/client/filter/index.js
  widgets: []
  shared:
    - src/filter/
deps_on:
  - shared/filter-module
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Фильтр товаров

## Назначение

Боковой/мобильный фильтр на странице категории. Содержит:

- Range slider «Цена» (через пакет `kartik\slider\Slider`).
- Чекбоксы параметров, опций, фабрик (`checkboxParam`, `checkboxOption`, `checkboxFactory`).
- Динамические фильтры (`filterRange`).

На mobile открывается через [filter-btn](sorting-bar.md) (`.filter-btn`) с overlay `.filter__mobile-back`.

## Где живёт

- **HTML:** `views/_component/filter.php`.
- **SCSS:** `src/client/filter/index.scss` (тема), `src/client/range-slider/index.scss` (слайдер цены).
- **JS:** `src/client/filter/index.js` (тема) + **shared** `src/filter/` (общий JS-движок фильтра для всех тем).

## Bootstrap-классы

- **Display:** `d-sm-none` (для mobile overlay/close).
- **Border/bg:** `border`, `border-light`, `mb-sm-4`, `p-4`.
- **Position:** `position-absolute`.

## JS-зависимости

- **Shared `src/filter/`** — конечный автомат фильтра, работает во всех темах.
- `kartik\slider\Slider` — bootstrap-slider, jQuery-зависимый.

## Зависит от блоков

- [shared/filter-module](../shared/filter-module.md) — **критично**: shared-фильтр используется ВСЕМИ темами в `themes/`. На него **нельзя ломать** при редизайне темы mebelidomanet.

## Редизайн

**Выполнен** (2026-07-13) в стиле ../mebel-landing — **только визуальный скин темы** в `src/client/filter/index.scss` (+ `_range-slider/`). Поведение НЕ трогали.

- Карточка `.filter__block` — hairline `$md-line`, скругление 18px (на мобильном drawer — 0).
- Заголовки `.filter__title` — Manrope 600, sentence-case, hairline-underline, шеврон-«галочка» на CSS-бордерах (был юникод `\2304`), `position: relative` → шеврон у правого края заголовка.
- Чекбоксы `.filter__checkbox` — `accent-color: $md-accent`; лейблы hover → `$md-accent`.
- Range-slider (kartik) — выбранная зона `.slider-selection` перекрашена в `$md-accent` **через `!important`** (стиль kartik TYPE_GREY грузится ПОСЛЕ бандла и иначе оставляет серый `#BABABA`); трек — `$md-line`, ручки — accent-dark (inline `handleColor`).
- Кнопка «Применить фильтр» (`.filter__link .btn`) — акцентный pill поверх `.btn-mebel-dark`.
- Тонкий скроллбар в `.filter__values_checkout`; мобильный drawer (fixed + `translateX`) сохранён 1:1.
- **Шапка drawer обновлена (2026-07-13) для консистентности с сортировкой:** `.filter__mobile-close`+`.filter__mobile-title` обёрнуты в flex-шапку `.filter__mobile-head` (Fraunces-заголовок + hairline снизу), крестик — круглая accent-soft кнопка на CSS-кресте (`::before/::after`) вместо `close.svg`, + тень `box-shadow` у `.filter__block`. Стили — миксины `src/client/_drawer.scss` (`md-drawer-head/title/close`), общие с `.md-sorting__*` drawer. Ширина 280px и слайд `translateX(-280)` (JS) НЕ трогались — хук `.filter__mobile-close` сохранён.
- **Fix перекрытия шапкой (моб.):** `.filter` на `xs` поднят с `z-index:101` → **`1040`** (выше sticky `mobile-header-md` = 1031/1032, ниже модалок 1050). `.filter` — fixed+z-index, т.е. контекст наложения → одним значением поднимается весь drawer (overlay/list/block), внутренний порядок (99/102/103) не меняется. Раньше шапка (1031) перекрывала «Фильтры» и крестик закрытия.

**Хуки НЕ менялись:** `.filter__values_disable` (max-height аккордеон), `.filter__title` (toggle), `.filter__checkbox` (URL), `.filter__link`/`#filterLinkContainer`, `.filter__mobile-back/close`, `#filterContainer`.

## Заметки

- **Особое предупреждение:** `src/filter/` — один из двух пользователей `bootstrap` в проекте (второй — `src/admin/`). Поэтому `bootstrap` из `package.json` не удаляем, и shared-фильтр оставляем на BS. Редизайн темы его **не касается** (в билд mebelidomanet `src/filter/` не входит — подключается только theme-scss `src/client/filter/`).