---
title: Панель сортировки и количества на странице
section: catalog
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline: []
  php_partials:
    - views/category/_sorting.php
  scss:
    - src/client/sorting-bar/index.scss
    - src/client/_drawer.scss
    - src/client/filter-btn/index.scss
    - src/client/page-size/index.scss
  js:
    - src/client/sorting-bar/index.js
  widgets: []
  shared: []
deps_on:
  - catalog/filter
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Sorting Bar

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

Над листингом категории — панель `.md-sorting` (soft-обёртка `$md-bg` + hairline `$md-line`, скругление 18px) с тремя элементами:

1. **Кнопка «Фильтр»** (`.filter-btn.md-sorting__filter`) — открывает мобильный фильтр (только на `sm-`, через `d-sm-none`). Акцентный pill с inline-SVG воронкой.
2. **«Сортировать: Новинкам / Названию / Цене / Оценке»** — pill-чипы `.md-sort-chip`, кликом меняют GET-параметр `sort`. Активный чип — подложка `$md-accent-soft`; стрелка `.md-sort-chip__arrow` флипается вверх/вниз (asc/desc).
3. **«Выводить по N тов.»** (`.md-sorting__pagesize`) — select `.md-sorting__select` (кастомный chevron-SVG в background) смены `per-page`, прижат вправо (`margin-left:auto`).

## Где живёт

- **HTML:** `views/category/_sorting.php` (перевёрстан: `$sortOptions`-цикл вместо 4 копипаст-блоков).
- **SCSS:** `src/client/sorting-bar/index.scss` — весь `.md-sorting*` (объединил бывшие sorting-bar + filter-btn + page-size). `src/client/filter-btn/index.scss` и `page-size/index.scss` — пустые заглушки-комментарии.

## Хуки (не менять при правках)

- `.filter-btn` — JS-хук открытия мобильного фильтра (`src/client/filter/index.js:121`, `src/filter/index.js:143`).
- `#sortingNew/#sortingName/#sortingPrice/#sortingRecomend` — id ссылок сортировки.
- `onchange="location = this.value"` — нативный JS для select-смены `per-page`.

## Редизайн

**Выполнен** (2026-07-13) в стиле ../mebel-landing на чистом BS4+SCSS. Убраны `btn-mebel-dark`, `$gray-600`, `form-control`, BS-`order-*`; вместо PNG-иконки воронки — inline-SVG. Три бывших блока (sorting-bar/filter-btn/page-size) слиты в один `.md-sorting`. Логика сортировки/пагинации/URL сохранена 1:1.

**Мобильная раскладка (xs):** над листингом — ряд из двух кнопок `.md-sorting__mobile-bar` (грид `1fr 1fr`, `d-sm-none`): **«Фильтр»** (`.filter-btn`, тот же JS-хук открытия фильтра) + **«Сортировка»** (`.md-sorting__toggle`).

- **Кнопка «Сортировка» → выезжающий боковой drawer** (справа), консистентный с фильтром. Разметка сортировки **не дублируется**: единый `.md-sorting__panel` на десктопе `display:contents` (инлайн-бар, раскладка не меняется), а на xs становится `position:fixed` drawer (`transform: translateX(100%)` → `0` по классу `.md-sorting_open` на корне `.md-sorting`).
- Оверлей `.md-sorting__back` (+ шапка `.md-sorting__drawer-head` с крестиком `.md-sorting__close`) — только xs (`d-sm-none`). Общий вид шапки/крестика/ширины — миксины `src/client/_drawer.scss` (`md-drawer-head/title/close/back`, `$md-drawer-width`), теми же пользуется фильтр.
- Тоггл/закрытие — `src/client/sorting-bar/index.js` (класс `.md-sorting_open`, aria-expanded; закрытие по `.md-sorting__close`/`.md-sorting__back`). z-index drawer 1041 / оверлей 1040 (выше sticky-шапки).
- Внутри drawer чипы — вертикальным списком (`grid-template-columns: 1fr`), «Выводить по» — отдельной строкой с hairline сверху. Клик по чипу/смена select сразу перезагружают страницу (apply-кнопка не нужна).