---
title: Модалка выбора города
section: layout
theme: mebelidomanet
framework: mixed
redesign_status: done
last_updated: 2026-07-13
files:
  php_inline:
    - views/layouts/main.php:662
  php_partials: []
  scss:
    - src/client/_md-modal.scss
    - src/client/modal-location-md/style.scss
  js:
    - src/client/modal-location/modal-location.jsx
  widgets: []
  shared: []
deps_on: []
themes_with_analog:
  - mebelmall
  - dommebeli
  - mebelmart
  - freshshop
  - mebelmag
  - mebelbazar
  - hormebel
  - cartzilla
  - mebelmarket
  - stolkomebeli
---

# Модалка выбора города

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

Открывается из шапки — ссылка с названием города. Позволяет переключить домен на
другой город (от города зависят цена и сроки доставки).

**Реализация — React-компонент**, монтируется в `<div id="modal-location">`
(`main.php:662`). При этом сама механика показа/скрытия — **штатная Bootstrap
modal**: триггеры в шапке помечены `data-toggle="modal" data-target="#modalLocation"`,
BS4-JS сам открывает окно. React отвечает только за поиск и рендер списка городов.

## Где живёт

- **Точка монтирования:** `<div id="modal-location"></div>` в `main.php:662`.
- **JSX:** `src/client/modal-location/modal-location.jsx` (импортируется в
  `src/client/index.js:51`).
- **SCSS (редизайн):** `src/client/modal-location-md/style.scss`, подключён в
  `src/client/index.scss` рядом с другими layout-редизайнами.
- **Триггеры:**
  - десктоп-топбар — `main.php:213` (`.md-topbar__city-value`);
  - мобильная шапка — `main.php:62` (`.mhd-strip__city`).

## Как работает поиск

- Ввод в поле → `debounce(500ms)` → `fetch('/api/get-city-by-name?query=…')`.
- Ответ — массив `{ name, url }`; клик по строке ведёт на домен нужного города.
- Пустой ввод сбрасывает список; при пустом ответе от API показываем строку
  «Ничего не нашлось…» (флаг `state.searched`, чтобы не мигать пустым состоянием
  до первого запроса). `query` уходит через `encodeURIComponent`.

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

Было — дефолтная BS-модалка (`.modal-quick-buy`, `.form-control`, простой
`<ul>`-список ссылок, всегда рендерился пустой `<ul>` из-за бага
`locations != []`). Стало — theme-specific `.md-location`:

- **Оболочка/крестик/шапка/поле** — из общего скина `_md-modal.scss`
  (`.md-modal*`), **того же, что у [модалки быстрого заказа](../product/modal-quick-buy.md)** →
  консистентность модалок: карточка `#fff` `border-radius: 24px`, хайрлайн
  `$md-line`, круглый крестик, eyebrow-pill «Доставка» + `Fraunces`-заголовок.
- **Поле поиска** — база `.md-modal__input` + `.md-location__input`
  (padding под иконку-лупу); focus → белый фон + акцентный бордер + `box-shadow`.
- **Список** `.md-location__list` — строки-ссылки с pin-иконкой и стрелкой,
  появляющейся на hover; hover-подложка `$md-accent-soft`; `max-height: 46vh`
  + кастомный тонкий скроллбар в палитре токенов.
- Все цвета/easing — из `_md-tokens.scss` (hex не хардкодим). `prefers-reduced-motion`
  гасит переходы. Сборка `pnpm run build` — зелёная.

Механику BS-модалки и контракт API (`{ name, url }`) не меняли — только вид и
мелкие UX-правки (сброс/empty-state, экранирование query).