--- title: Страница товара section: product theme: mebelidomanet framework: bootstrap redesign_status: in_progress last_updated: 2026-07-13 files: php_inline: [] php_partials: - views/product/index.php - views/product/import-pm.php - views/product/simpleOption.php - views/product/_canonical.php - views/product/_labels.php scss: - src/client/product-page/index.scss js: - src/client/product-page/index.js widgets: [] shared: [] deps_on: - product/product-actions - product/product-tabs - product/product-complectation - product/product-collection - product/product-related - product/product-similar - product/product-reviews - product/modal-quick-buy - product/product-files - product/product-options themes_with_analog: - mebelmall - dommebeli - mebelmart - freshshop - mebelmag - mebelbazar - hormebel - cartzilla - mebelmarket - stolkomebeli --- # Страница товара ## Назначение Карточка товара (`/product/`). У товара может быть один из трёх типов, и под каждый — своя обёрточная вьюха: - `index.php` — обычный товар (`type` = `import`/`donor`/прочие). - `import-pm.php` — товар с импортированными модулями (комплектациями). - `simpleOption.php` — товар с опциями `property`/`productPropertyValue` (выбор размера/цвета/материала). Все три рендерят общий набор partials (actions, tabs, related, similar, reviews, ...). ## Где живёт - **HTML:** `views/product/index.php`, `views/product/import-pm.php`, `views/product/simpleOption.php`, `views/product/_canonical.php`. - **SCSS:** `src/client/product-page/index.scss`. - **JS:** `src/client/product-page/index.js`. - **Лейблы (Хит/Новинка/Sale):** над ценой, `.product-page__labels` (flex-строка пилюль). Рендерятся общим partial `views/product/_labels.php` (`wrapClass => 'product-page__labels'`) — те же современные SVG-бейджи `.product-label--{hit,new,sale}`, что и в тайле `views/category/_product.php`. Стили пилюль — верхнеуровневый `.product-label` в `src/client/product-card/index.scss` (шарятся между тайлом и страницей). Раньше — растровые PNG-звёзды. ## Зависит от блоков - [product/product-actions](product-actions.md) — кнопки «Купить» / «В корзину». - [product/product-tabs](product-tabs.md), [product/product-complectation](product-complectation.md), [product/product-collection](product-collection.md), [product/product-related](product-related.md), [product/product-similar](product-similar.md), [product/product-reviews](product-reviews.md), [product/modal-quick-buy](modal-quick-buy.md), [product/product-files](product-files.md), [product/product-options](product-options.md). ## Редизайн (2026-07-11) — `index.php` + `simpleOption.php` **In-place** редизайн двух из трёх вьюх в стиле ../mebel-landing (токены `_md-tokens.scss`, Fraunces/Manrope). `import-pm.php` **пока не тронут** — статус блока `in_progress`. Что переверстано (весь SCSS переписан на токены — убраны хардкод `#4d1616`, `$mainColor` и растровые иконки `icCart.png` / `aLeft-aRight.png` / `icLike.png`): - **Правая инфо-колонка** → мягкая карточка. В разметке `col-md-6 bg-light rounded` заменён на `col-md-6` + внутренняя обёртка `.product-page__panel` (тёплый фон `$md-bg`, border `$md-line`, radius 18px). Цена `.product-page__price` — serif Fraunces; бейджи «Узнайте у менеджера» / «В наличии» — мягкие пилюли; блок производителя, лейблы `.product-page__labels`. - **Галерея** (левая колонка) получила класс-обёртку `.product-page__gallery`. Медиа-рамка обеих галерей — `$md-bg` + border + radius 18px; активный thumbnail — рамка `$md-accent`; стрелки owl — CSS-шевроны (вместо PNG); точки owl и splide-стрелки тонированы. Разметка галерей **не менялась** (owl `#sync1/#sync2` в index, splide в simpleOption). - **Селекты опций** (`.select-block/.select__btn/.optionList`) — токен-дропдауны с шевроном; поповер `.optionList` — белая карточка с тенью, строки с превью. Классы/data-атрибуты сохранены (обработчик — `src/product-options/`). - **Кнопки**: `.btnToCart` — accent-fill CTA, `.quick-buy/.product-page__quick` — outline, `.btnToFavorite` — icon-кнопка. Заголовки нижних секций `.name_category` — Fraunces (scoped под `.product-page`). Проверено вживую (nginx localhost) на обеих вьюхах: панель/цена/бейджи/кнопки в стиле mebel-landing, дропдаун опций открывается (JS цел), сборка зелёная. Фото галереи локально 404 (ассеты `/storage/...` не синхронизированы) — рамки и навигация при этом стилизуются корректно. > **Важно про `import-pm.php`:** он делит класс-обёртку `.product-page`, поэтому > получил часть новых стилей (цена, кнопки, бейджи, рамка owl-галереи), но **без** > обёртки `.product-page__panel` его правая колонка осталась на старом > `bg-light rounded`. Чтобы вид был консистентным — нужно добавить те же > обёртки `.product-page__gallery` / `.product-page__panel` в `import-pm.php` > (3 правки, как в index/simpleOption). ## Заголовок (h1) — консистентность с категорией (2026-07-13) **done.** H1 товара теперь переиспользует общий блок `.md-cat-head` / `.md-cat-head__title` (Fraunces 600, sentence-case, `clamp(2rem,4vw,3rem)`) — тот же, что на странице категории (`views/category/detail.php`) и в корневом каталоге (`views/category/index.php`). Обёртка добавлена во **все три** вьюхи (`index.php`, `simpleOption.php`, `import-pm.php`): ```php

title ?>

``` `itemprop="name"` сохранён (микроразметка Product). Стили — глобальный `src/client/category-head-md/style.scss` (уже в бандле, `index.scss:70`), правок SCSS для товара не требовалось. Прежнее локальное правило `.product-page > h1` (Fraunces 700, но капс от глобального `h1{uppercase}` и меньший размер — расходилось с категорией) **удалено** из `src/client/product-page/index.scss`; h1 больше не прямой потомок `.product-page`, поэтому селектор не сработал бы. У следующего за h1 `.row` убран `mt-4` — вертикальный отступ теперь даёт `.md-cat-head { margin-bottom: 1.5rem }`, ровно как на категории. **Хлебные крошки** уже консистентны без правок: рендерятся общим виджетом layout (`views/layouts/main.php:424`, `BreadcrumbsMicrodata`, `class="breadcrumb mt-4"`) одинаково на всех страницах — цепочка товара строится тем же `array_reduce` по `$parentsCategory`, что и на категории.