---
title: Табы товара (Описание/Доставка/Характеристики/Отзывы)
section: product
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline: []
  php_partials:
    - views/product/_tabs.php
  scss:
    - src/client/product-tab/index.scss
  js:
    - src/client/product-tab/index.js
  widgets: []
  shared: []
deps_on:
  - product/product-reviews
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Product Tabs

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

Bootstrap nav-tabs на странице товара: «Описание», «Доставка и оплата», «Характеристики», «Отзывы». Использует BS JS-биндинг `data-toggle="tab"`.

## Где живёт

- **HTML:** `views/product/_tabs.php`.
- **SCSS:** `src/client/product-tab/index.scss`.
- **JS:** `src/client/product-tab/index.js`.

## Bootstrap-классы

- `nav nav-tabs`, `nav-item`, `nav-link`, `active`, `tab-content`, `tab-pane`, `fade`, `show`.
- ARIA: `role="tab"`, `role="tablist"`, `aria-controls`, `aria-selected`.

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

- **`data-toggle="tab"`** — из `import 'bootstrap'`. Это **прямая зависимость от bootstrap.js**.
- Аккордеон «Доставка» — `data-toggle="collapse"` + `data-parent` (BS collapse).
- Сворачивание описания — BS collapse (`.collapsedText`); текст кнопки
  «+ Показать еще / − Скрыть» задаётся через `::after` в
  `src/client/collapsed-text/index.scss` по классу `.collapsed`.
- Форма отзыва монтируется React'ом в `.product-tab__review-form[data-id]`.

## Редизайн (2026-07-11)

**In-place** редизайн в стиле ../mebel-landing (токены `_md-tokens.scss`,
Fraunces/Manrope). SCSS `product-tab/index.scss` переписан с BS-дефолтов
(`$gray-100`/`$border-color`) на токены. Вся JS-обвязка сохранена.

- **Навигация** — из BS-«коробок» превращена в **подчёркивание-табы**: единый
  хайрлайн `$md-line` снизу, активный таб — цвет `$md-accent` + анимированное
  подчёркивание (`::after`, `scaleX`). Бейдж кол-ва отзывов — пилюля
  `$md-accent-soft`. На узких экранах — горизонтальный скролл.
- **Контент** — мягкая белая карточка (border `$md-line`, radius снизу 18px)
  вместо серого `$gray-100`-бокса.
- **Аккордеон «Доставка»** — токен-строки с hover `$md-accent-soft` и
  **шевроном** (`::after`), поворот по `[aria-expanded="true"]`. В `_tabs.php`
  закрытым триггерам (`collapseTwo…Five`) проставлены корректные
  `aria-expanded="false"` + класс `.collapsed` (было ошибочно `true` у всех —
  из-за этого начальный шеврон/ARIA не совпадали с состоянием).
- **Таблица характеристик** — убран `table-bordered`; зебра-строки (`$md-bg`),
  тонкие бордеры `$md-line`, левый столбец приглушён, правый — bold.
- **Инструкции/Сертификаты** — список файлов со SVG-иконкой документа (mask).
- **Кнопка «Показать еще»** и заголовки «Отзывы» (Fraunces) — тонированы.

Проверено вживую (nginx localhost) на всех вкладках: переключение табов,
раскрытие аккордеона (шевроны/hover), таблица, форма отзыва (React-маунт) —
работают; сборка зелёная.

## Навигация → чипсы (2026-07-13)

Навигация табов переделана из подчёркивания-табов в **чипсы (пилюли)**
(`src/client/product-tab/index.scss`, блок `.nav-tabs`). BS JS
(`data-toggle="tab"`) не тронут.

- **Чипы:** неактивные — контурные (border `$md-line`, фон белый, текст
  `$md-ink-soft`), hover → `$md-accent-soft`+`$md-accent`, активный — заливка
  `$md-accent-dark` + белый текст, `border-radius: 999px`. Бейдж отзывов на
  активном (тёмном) чипе — полупрозрачная белая пилюля.
- **Мобиль — горизонтальный свайп:** `.nav-tabs` — `flex-wrap: nowrap` +
  `overflow-x: auto` + `scroll-snap-type: x proximity` (чипсы `scroll-snap-align:
  start`), скроллбар скрыт (`scrollbar-width: none` + `::-webkit-scrollbar`).
  Чипы `flex: 0 0 auto`, сжатия нет.
- **Контентная карточка** отвязана от «папочного» верха: `.product-tab__block`
  теперь `border` со всех сторон + `border-radius: 18px` (было `border-top:0` /
  `radius: 0 0 18px 18px`), сверху зазор `margin-bottom: 18px` у `.nav-tabs`.

> **Подводный камень (решён):** vendor `src/client/vendor/media.css`
> (`@media max-width:768`) содержит легаси-правило для мобильного navbar-меню
> `.nav li a { width:100% }`, а у `.nav-tabs` тоже класс `.nav` — на мобиле
> чипсы растягивались во всю ширину (по одному в ряд, свайп ломался). Вендорный
> файл не трогаем; перебито `width: auto` на `.nav-item`/`.nav-link` в scoped
> `.product-tab` (специфичность 0,3,0 > вендорных 0,1,2 / 0,1,1). Падинги/бордер/
> цвет чипсов и так выигрывали по специфичности — протекала только ширина.