---
title: Модалка «Купить в один клик»
section: product
theme: mebelidomanet
framework: bootstrap
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline: []
  php_partials:
    - views/product/_modal-quick-buy.php
  scss:
    - src/client/_md-modal.scss
    - src/client/modal-quick-buy/index.scss
  js:
    - src/client/modal-quick-buy/index.js
  widgets: []
  shared: []
deps_on:
  - product/product-actions
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Modal Quick Buy

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

Bootstrap-модалка `#quickBuyModal` для оформления быстрого заказа: карточка
товара, имя, телефон, e-mail, ссылка на соцсеть, промокод, чекбокс кредита/рассрочки
и согласие с политикой. Открывается **обеими** CTA-кнопками из
[product-actions](product-actions.md):

- **«Купить быстро»** — `onclick` сбрасывает `#quickCredit` в `false`;
- **«В рассрочку» / «В кредит»** (если `$domain->credit`) — тот же модал,
  `onclick` ставит `#quickCredit` в `true`.

Т.е. это **одно** окно с флагом кредита — не два разных.

## Где живёт

- **HTML:** `views/product/_modal-quick-buy.php` (рендерится в `index.php`,
  `import-pm.php`, `simpleOption.php`).
- **SCSS:** общий скин `src/client/_md-modal.scss` + карточка товара
  `src/client/modal-quick-buy/index.scss`.
- **JS:** `src/client/modal-quick-buy/index.js` — при клике по `.quick-buy`
  подтягивает товар и обновляет цену в модалке; submit — shared
  `src/cart/utils.ts` (`quickBuy`).

## Контракт (не менять при редизайне)

- **id полей**, читаемых в `src/cart/utils.ts`: `quickName`, `quickPhone`,
  `quickEmail`, `quickSoc`, `quickPolicy`, `quickCredit`, `quickPromocode`.
- Кнопка submit — `<button class="btnToCart" data-quick="true" …>` со всеми
  `data-*` товара (читаются `createCartItem`).
- `#quickBuyModal` (id) и вложенный `.modal-quick-buy__product-total span` —
  JS-хуки (`modal-quick-buy/index.js`): цена обновляется при выборе комплектации
  (`.complectation__total`).

## Редизайн (2026-07-13, стиль mebel-landing)

Было — дефолтная BS-модалка (`.modal-header`/`.modal-title`/`.form-control`/
`.form-check`, кнопка `btn-mebel-dark`), без карточки товара (хотя JS её
заполнял — код висел вхолостую). Стало:

- **Оболочка/крестик/шапка/поля/чекбоксы** — из общего скина `_md-modal.scss`
  (`.md-modal*`), **тот же, что у [модалки выбора города](../layout/modal-location.md)** →
  консистентность. Eyebrow-pill «Быстрый заказ» + `Fraunces`-заголовок +
  `Manrope`-лид.
- **Карточка товара** `.md-quick__summary` — миниатюра (`publicImageThumb`) +
  название (clamp 2 строки) + итоговая цена (`Fraunces`, акцент). Рендерится
  сервером (на странице товара модал всегда об одном товаре), цена остаётся
  JS-обновляемой через `.modal-quick-buy__product-total span`.
- **Поля** — `.md-modal__input` (те же id); **кастомные чекбоксы**
  `.md-modal__check-input` (native input с `appearance:none`, SVG-галочка) —
  `#quickCredit`/`#quickPolicy` остаются настоящими чекбоксами, `getElementById`
  и пред-отметка из `_actions.php` работают.
- **Submit** — `.md-btn.md-btn--block` (общий CTA из `buttons-md`), класс
  `btnToCart` и `data-quick` сохранены; `type="button"` (не сабмитит форму).
- Все цвета/easing — токены `_md-tokens.scss`. `prefers-reduced-motion` — в
  общем скине. Сборка `pnpm run build` — зелёная.