Skip to content
mxQuickView
Быстрый просмотр карточки товара и блоков по AJAX для MODX 3 и MiniShop3
  1. Компоненты
  2. mxQuickView
  3. Для разработчика
  4. Потоки и сценарии работы

Потоки (flows)

1. Рендер в модалке по клику

  1. Клик по элементу с data-mxqv-click.
  2. JS читает mode, data_action, element, id, title.
  3. Отправляется POST в connector.php (action=render).
  4. При успехе HTML вставляется в .qv-modal__content-area.
  5. Открывается встроенная модалка и диспатчится mxqv:loaded.

2. Рендер по наведению (mouseover)

  1. Наведение на элемент с data-mxqv-mouseover.
  2. Запускается таймер mouseoverDelay из window.mxqvConfig.
  3. Если курсор не ушёл до истечения таймера, выполняется тот же render-запрос.
  4. Если курсор ушёл раньше, таймер отменяется.

3. Режим selector (без встроенной модалки)

  1. На триггере задано data-mxqv-mode="selector" и data-mxqv-output.
  2. JS вставляет loading-индикатор в целевой контейнер.
  3. После ответа заменяет контейнер на html или сообщение об ошибке.
  1. Триггер находится внутри контейнера data-mxqv-parent data-mxqv-loop="true".
  2. JS формирует список триггеров внутри контейнера.
  3. Кнопки [data-mxqv-nav="prev|next"] переключают текущий индекс.
  4. При достижении границ списка кнопки скрываются.

5. Добавление в корзину из quick view

  1. В рендере используется форма MiniShop3 (data-ms3-form, ms3_action=cart/add).
  2. После подстановки HTML вызывается ms3.productCardUI.reinit() (если доступен).
  3. Добавление в корзину работает без перезагрузки страницы.

6. ms3Variants внутри quick view

  1. Процессор подставляет variants_html и variants_json (если ms3Variants установлен).
  2. JS ищет .qv-product[data-mxqv-variants="true"].
  3. По клику/выбору варианта обновляет цену, old price и изображение.

7. Поток ошибок

  1. При ошибке валидации коннектор возвращает {success:false, message, html:''}.
  2. В modal-режиме сообщение отображается в контенте модалки.
  3. В selector-режиме сообщение вставляется в целевой контейнер.