---
title: Теги (популярные группы товаров)
section: catalog
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline:
    - views/site/index.php:151-158
    - views/category/detail.php (обёртка .md-tags--listing)
  php_partials:
    - views/_component/tags.php
  scss:
    - src/client/tags-md/style.scss
    - src/client/tag/index.scss
  js:
    - src/client/tag/index.js
    - src/client/tags-md/index.js
  widgets:
    - components/Tags.php
deps_on: []
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Теги

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

«Популярные группы товаров» — плитки-ссылки на теги/группы. Виджет `components/Tags.php` рендерит `views/_component/tags.php`: owl-карусель первых 11 тегов + кнопка «Показать все», раскрывающая скрытый `.tag__all` со всеми тегами. Виден на главной (если `$domain->showTag`) и на листинге категорий (`category/detail.php:126`).

**Редизайн 2026-07-11 (ТОЛЬКО главная):** на главной вызов обёрнут в `<section class="md-tags">` (eyebrow «Категории» + заголовок **Fraunces** «Популярные группы товаров»), и **локально в scope `.md-tags`** блок превращён в статичное «облако» пилюль в стиле `../mebel-landing`: owl-карусель и кнопка «Показать все» скрыты, а уже отрендеренный виджетом `.tag__all` (все теги) показан как flex-обёртка пилюль (белые, rounded-full, accent-hover). Реализация на **чистом Bootstrap + SCSS, БЕЗ Tailwind**. Стили — `src/client/tags-md/style.scss`.

## Листинг категорий (редизайн 2026-07-13)

- Вызов виджета в `category/detail.php` обёрнут в `<div class="md-tags md-tags--listing mb-4">` → тот же приём, что на главной: owl и виджетная «Показать все» скрыты, `.tag__all` показан пилюлями.
- **Отличие от главной:** у категории тегов бывают десятки → облаком заняли бы пол-экрана. Поэтому `--listing` — это **горизонтальная лента в один ряд** (`flex-wrap: nowrap; overflow-x: auto`, snap, скрытый скроллбар). Все теги в DOM (перелинковка/SEO), но компактно (~35px). Без секции-заголовка.
- **Десктоп (≥768):** flex-раскладка «лента слева + контролы справа». Контролы (`.md-tags__controls`, инъектируются `src/client/tags-md/index.js`): стрелки ‹ › (`.md-tags__nav`, скролл ленты, disable на краях, скрыты если всё влезло) и `.md-tags__toggle` «Показать все» → добавляет `.is-expanded` (лента → облако с переносом, стрелки прячутся, текст → «Свернуть»).
- **Мобилка (<768):** контролы скрыты, нативный тач-скролл — как договорено «оставить как есть».
- **Выравнивание:** внутри `--listing` обнулены отриц. поля BS-`.row`/`.col-12` (`> .tag { margin:0 }`, `.tag__all { padding:0 }`), иначе первая пилюля торчала на 15px левее тела контента. **Ховер без подъёма** (`transform:none`) — `overflow-x` ленты обрезал бы вертикальный сдвиг.
- **Виджет и общий JS НЕ трогались:** `components/Tags.php`, `views/_component/tags.php`, `src/client/tag/index.js`, `src/client/tag/index.scss` — без изменений (общие для главной, листинга и других тем). Новый JS — отдельный модуль `tags-md/index.js`.

## Где живёт

- **Обёртка на главной:** `views/site/index.php` — `<section class="md-tags">`.
- **SCSS редизайна:** `src/client/tags-md/style.scss` (scoped `.md-tags`), подключён в `src/client/index.scss` после `product-carousel-md`.
- **Старый SCSS:** `src/client/tag/index.scss` — остаётся (нужен листингу).
- **JS:** `src/client/tag/index.js` — owl + toggle «Показать все» (для листинга).

## Bootstrap-классы

- Внутри виджета — BS-сетка (`row`, `col-sm-8/4`, `col-12`) и утилиты. На главной перекрыты локально; на листинге работают как раньше.