---
title: Комплектация товара (подтовары)
section: product
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-11
files:
  php_inline: []
  php_partials:
    - views/product/_complectation.php
  scss:
    - src/client/product-page/_complectation/index.scss
  js:
    - src/client/product-page/_complectation/index.js
  widgets: []
  shared:
    - src/product-modules/
deps_on:
  - shared/product-modules
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Комплектация (подтовары)

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

Блок «Комплектация» на странице товара для `type='import'` (когда у товара есть подтовары — `$model->subproducts`). Каждый подтовар — отдельный модуль с фото, размерами, объёмом, весом, чекбоксом включения и количеством. Внизу — итоговая сумма выбранных модулей. Кнопка «Собрать свой комплект» ведёт сюда якорем.

Полный контекст — в `docs/subProducts.md`.

## Где живёт

- **HTML:** `views/product/_complectation.php`.
- **JS:** `src/product-modules/` (shared) — событийная логика суммирования, чекбоксы, инкременты.
- **Fancybox** для увеличения картинок: `data-fancybox="complectation"`.

## Разметка (после редизайна)

Блок обёрнут в мягкую карту `.complectation` (токены `_md-tokens.scss`, стиль
mebel-landing), BS-грид `row/col-*` убран — раскладка карточки модуля на CSS
Grid внутри `src/client/product-page/_complectation/index.scss`:

- **Обёртка:** `.complectation` — карта `$md-bg` / border `$md-line` / radius 18.
- **Заголовок:** `.complectation__head` → `.complectation__eyebrow` (pill
  «Соберите комплект») + `.complectation__title` (Fraunces H2, слева).
- **Модуль:** `.complectation__module` — CSS Grid `84px 1fr auto auto`
  (на `<sm` — 2 колонки с `grid-template-areas`): `.complectation__image`
  (media-рамка `$md-accent-soft`) · `.complectation__description` (`.name` +
  `ul>li` мета-пилюли) · `.complectation__counter` (степпер `input-number`) ·
  `.complectation__price-wrap` (`.complectation__price` Fraunces + `₽`).
- **Итог:** `.complectation__itog` — акцентная подложка `$md-accent-soft`,
  сумма `.complectation__total` (Fraunces); кнопки `.complectation__quick`
  (outline) и `.complectation__buy` (`.btnToCart`, accent-fill CTA).

Все JS-хуки сохранены: `#product-page__complectation`, `.complectation__module`
с `data-id/-price/-title`, `.complectation__price`, `.complectation__total`,
разметка степпера `.input-number`, `.btnToCart` / `.quick-buy`.

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

- `@fancyapps/fancybox` для preview изображений.
- `src/product-modules/` — основная логика (shared, используется и другими темами).