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

API и интерфейсы

Сниппет mxQuickView.initialize

Подключает CSS/JS quick view и выводит HTML встроенной модалки.

Минимальный вызов

fenom
{'!mxQuickView.initialize'|snippet}
modx
[[!mxQuickView.initialize]]

Параметры

ПараметрПо умолчаниюОписание
frontCssиз mxquickview_front_cssПодключать CSS
frontJsиз mxquickview_front_jsПодключать JS
modalSizeиз mxquickview_modal_sizeРазмер модалки: modal-sm, modal-lg, modal-xl
mouseoverDelayиз mxquickview_mouseover_delayЗадержка перед загрузкой по наведению
modalLibrarynativeЗначение передаётся в window.mxqvConfig

Примеры вызова с параметрами

fenom
{'!mxQuickView.initialize'|snippet:[
  'modalSize' => 'modal-xl',
  'mouseoverDelay' => 350
]}
modx
[[!mxQuickView.initialize?
  &modalSize=`modal-xl`
  &mouseoverDelay=`350`
]]

Что добавляет на страницу

  • <link ... mxqv.css?v=filemtime> (если frontCss=1)
  • <script>window.mxqvConfig = ...</script>
  • <script src="...mxqv.js?v=filemtime" defer></script> (если frontJs=1)
  • разметку модалки (#mxqv-modal-backdrop, #mxqv-modal)

Коннектор assets/components/mxquickview/connector.php

Endpoint

  • Метод: POST
  • Content-Type запроса: application/x-www-form-urlencoded
  • Ответ: JSON { success, html?, message? }

Параметры POST

ПараметрОбязательныйОписание
actionдаТолько render
data_actionнетchunk, snippet, template (по умолчанию chunk)
elementдаИмя чанка/сниппета/шаблона
idдаID ресурса (целое > 0)
contextнетКлюч контекста рендера. Если невалиден, используется web, но при несовпадении с context_key ресурса возвращается Access denied

Успешный ответ

json
{
  "success": true,
  "html": "<div>...</div>"
}

Ответ с ошибкой

json
{
  "success": false,
  "message": "Chunk not allowed",
  "html": ""
}

Ошибки и сообщения

Условиеmessage
Метод не POSTInvalid request method
action != rendermxqv_invalid_action (лексикон)
Не найден index.phpindex.php not found
element пуст или id <= 0Missing element or id
Ресурс не найденResource not found
context не совпадает с context_key ресурсаAccess denied
Ресурс не опубликован/вне окна публикации и нет права view_unpublishedAccess denied
Нет права просмотраAccess denied
Чанк не в whitelistChunk not allowed
Сниппет не в whitelistSnippet not allowed
Шаблон не в whitelist (при непустом списке)Template not allowed
Неподдерживаемый data_actionInvalid action

JS API (через события)

Компонент не экспортирует отдельный объект API, но публикует события CustomEvent на document:

СобытиеКогдаdetail
mxqv:openмодалка открыта{ title }
mxqv:closeмодалка закрыта
mxqv:loadedконтент вставлен в модалку{ content }

Пример запроса

javascript
const response = await fetch('/assets/components/mxquickview/connector.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    action: 'render',
    data_action: 'chunk',
    element: 'mxqv_product',
    id: '7'
  })
});

const data = await response.json();