docs.modx.pro
  1. Компоненты
  2. mxQuickView
  3. Для разработчика
  4. Потоки и сценарии работы

Потоки (flows) ​

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

  1. Клик по элементу с data-mxqv-click.
  2. JS читает mode, data_action, element, id, title.
  3. Для native/bootstrap модалка открывается сразу (loading-состояние), затем отправляется POST в connector.php (action=render, включая modal_library).
  4. Для fancybox сначала выполняется POST, затем открывается Fancybox уже с полученным HTML.
  5. При успехе HTML вставляется в контейнер выбранного режима:
    • native -> #mxqv-modal-body .qv-modal__content-area;
    • bootstrap -> #mxqv-bootstrap-modal-body .qv-modal__content-area;
    • fancybox -> текущий slide Fancybox.
  6. После вставки диспатчится 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. Процессор для msProduct подставляет has_variants, variants_html и variants_json (если ms3Variants установлен).
  2. В чанке variants_json вставляется в data-mxqv-variants-json через :htmlent.
  3. JS ищет .qv-product[data-mxqv-variants] и обрабатывает только флаг true|1|yes|on.
  4. JS слушает click по [data-variant-id] и change на select/input в .qv-product__variants.
  5. При выборе варианта обновляет цену, old price и изображение.

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

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