---
title: Карусель товаров с табами (new/top/special)
section: main-page
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-11
files:
  php_inline:
    - views/site/index.php:160-186
  php_partials:
    - views/category/_product.php
  scss:
    - src/client/product-carousel-md/style.scss
  js:
    - src/client/product-carousel/index.js
  widgets: []
  shared:
    - views/category/_product.php
deps_on:
  - catalog/product-card
themes_with_analog:
  - mebelmall
  - mebelmart
  - mebelmag
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Product Carousel Tabs

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

Три таба (`new` / `top` / `special`) над owl-каруселью карточек товаров. По клику JS дёргает `/api/get-html-products-by-flag?flag=…`, подменяет содержимое карусели и пересобирает owl.

**Редизайн 2026-07-11:** переверстана **только обвязка** блока в стиле `../mebel-landing`: секция `<section class="product-carousel md-showcase">` с eyebrow «Витрина» + заголовком **Fraunces** «Популярные товары», табы-пилюли (`.md-tabs` + `.product-carousel__btn`: активный — акцентная заливка, остальные — outline), стилизованы owl nav (акцентные кружки-стрелки) и dots (активная — вытянутая акцентная пилюля). owl **оставлен** (для карусели товаров уместен, и на нём завязан AJAX-свитчер). Реализация на **чистом Bootstrap + SCSS, БЕЗ Tailwind**. Стили — `src/client/product-carousel-md/style.scss`.

## ⚠️ Карточка товара НЕ трогалась (shared!)

`views/category/_product.php` (`.product-card`) — **shared-компонент**, рендерится в: листинге категорий (`category/detail.php`), на странице товара (`product/index.php`, `_related`, `_similar`, `_collection`, `import-pm`, `simpleOption`), в поиске (`search/detail.php`), у фабрики (`factory/detail.php`), в API (`api/get-html-products-by-flag.php`) и здесь. Его редизайн — отдельный блок [catalog/product-card](../catalog/product-card.md), делать осторожно и разом для всех мест. Здесь карточку не меняли.

## JS (важно)

- `src/client/product-carousel/index.js` — theme-client (не shared). **Отрефакторен:** хрупкий обход `$(this).parent().parent().parent()` заменён на `$btn.closest('.product-carousel')`, чтобы разметку табов можно было менять свободно. Пересобираемая каруль теперь получает класс `owl-max-height` (равная высота карточек после свитча).
- **Нельзя переименовывать** классы `.product-carousel` (корень), `.product-carousel__btn` (+ `data-flag`), `.product-carousel__block`, `.product-carousel_carousel` — на них завязан этот JS.

## Где живёт (после редизайна)

- **Вёрстка:** `views/site/index.php` — inline `<section class="product-carousel md-showcase">`.
- **SCSS:** `src/client/product-carousel-md/style.scss`, подключён в `src/client/index.scss` после `factory-md`. Старый `src/client/product-carousel/index.scss` — **импорт закомментирован** (можно удалить позже).
- **JS:** `src/client/product-carousel/index.js`.

## Bootstrap-классы

- В обёртке — только `pt-3 pb-5 mt-3`. Табы и owl-элементы стилизованы своим SCSS. Внутри — shared `.product-card` (BS, не трогаем).