- Проверено Modstore
- Бесплатные будущие обновления
- Работа на тестовом и публичном домене
- 12 месяцев тех. поддержки
QuickView — быстрый просмотр любого элемента в модальном окне.

— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора fenom
Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт.
Интерактивные примеры тут quickview.vgrish.ru/
<cut/>
Примеры
пример 1
Постановка:
— требуется по клику вывести в модальное окно чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
<code data-language="html"><a class="quickview" data-click data-quickview-mode="modal" data-data-action="chunk" data-data-element="test" data-data-id="1" data-dialog-buttons='["close"]' >ссылка</a></code>
пример 2
Постановка:
— требуется по клику вывести в модальное окно сниппет корзины msCart
— требуется широкое модальное окно
Вызов:
<code data-language="html"><a class="quickview" data-click data-quickview-mode="modal" data-data-action="snippet" data-data-element="!msCart" data-dialog-size="size-wide" data-dialog-title="cart" >корзина</a></code>
пример 3
Постановка:
— требуется по клику вывести в модальное окно чанк msProduct.content
— задействовать ресурс с идентификатором 7
Вызов:
<code data-language="html"><a class="quickview" data-click data-quickview-mode="modal" data-data-element="msProduct.content" data-data-id="7" data-dialog-title="" data-dialog-size="size-wide" >продукт</a></code>
пример 4
Постановка:
— требуется по наведению вывести в селектор чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
<code data-language="html"><a class="quickview" data-mouseover data-quickview-mode="selector" data-data-action="chunk" data-data-element="test" data-data-id="1" data-quickview-output=".quickview-output-1" data-output-buttons='["close"]' >наведите</a></code>
пример 5
Постановка:
— требуется список продуктов minishop
— по клику вывести модалку с продуктом test
— задействовать актуальный ресурс
— добавить кнопку соседи
Вызов:
<code data-language="html"><div class="quickview-parent" data-quickview-mode="modal" data-data-action="chunk" data-data-element="product.quickview" data-quickview-loop="true" data-quickview-viewhash="true" data-dialog-size="size-wide" data-dialog-buttons='["prev","next"]'> [[!pdoPage? &parents=`0` &element=`msProducts` &tpl=`@INLINE <a class='quickview' data-click data-data-id="[[+id]]" data-dialog-title="[[+pagetitle]]" >[[+pagetitle]]</a> ` ]] [[!+page.nav]]</div></code>
пример 6
Постановка:
— вывести в модальном окне чанк msProduct.content
— задействовать bootstrap-modal, без bootstrap-dialog
Вызов:
<code data-language="html"><a class="quickview" data-click data-toggle="modal" data-target=".bs-modal" data-quickview-mode="selector" data-quickview-output=".bs-quickview-output" data-data-element="msProduct.content" data-data-id="7" >ссылка</a></code>
Также необходимо тело модалки, куда по клику в селектор будет подгружен результат
Код:
<code data-language="html"> <div class="bs-modal modal fade"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="bs-quickview-output"></div> </div> </div> </div> </code>
Подключение QuickView
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
<code data-language="html"> [[!QuickView.initialize? &bootstrapModalJsCss=`0` &bootstrapDialogJsCss=`1` &services=`miniShop2,msoptionsprice` ]] </code>
Примечание!
— для подгрузки скриптов и стилей bootstrap-modal нужно указать
&bootstrapModalJsCss=`1`
— для подгрузки скриптов и стилей bootstrap-dialog нужно указать
&bootstrapDialogJsCss=`1`
— для подгрузки скриптов и стилей сторонних пакетов нужно перечислить их
services=`miniShop2,msoptionsprice`
Настройка QuickView
Основные настройки QuickView находяться Настройки системы -> QuickView
allowed_chunk — список разрешенных чанков
allowed_snippet — список разрешенных сниппетов
allowed_template — список разрешенных шаблонов
front_css — стили фронтенда
front_js — скрипты фронтенда
Основное
Вы можете использовать QuickView где угодно на странице. Для этого нужно подключить сниппет
QuickView.initialize, указать нужным элементам необходимые параметры вызова.
Примечание!
data-quickview-mode — режим работы, modal или selector
data-data-action — действие, chunk, snippet, template
data-data-element — название элемента
data-data-id — идентификатор обрабатываемого ресурса
data-dialog-* — параметры вывода при модальном окне
data-output-* — параметры вывода при селекторе
Режим срабатывания
data-click
режим срабатывания по клику
Вызов:
<code data-language="html"><a class="quickview" data-click ...</a></code>
data-mouseover
режим срабатывания по наведению
Вызов:
<code data-language="html"><a class="quickview" data-mouseover ...</a></code>
Режим работы
data-quickview-mode
modal — режим работы с модальным окном
Вызов:
<code data-language="html"><a class="quickview" data-click data-quickview-mode="modal" ...</a></code>
data-quickview-mode
selector — режим работы с селектором
Вызов:
<code data-language="html"><a class="quickview" data-click data-quickview-mode="selector" ...</a></code>
Действия
data-data-action
chunk — работа с чанком
Вызов:
<code data-language="html"><a class="quickview" data-click data-data-action="chunk" ...</a></code>
data-data-action
snippet — работа со сниппетом
Вызов:
<code data-language="html"><a class="quickview" data-click data-data-action="snippet" ...</a></code>
data-data-action
template — работа с шаблоном
Вызов:
<code data-language="html"><a class="quickview" data-click data-data-action="template" ...</a></code>
Кнопки
data-*-buttons
задать необходмые кнопки. Доступны prev,next,close
Вызов:
<code data-language="html"><a class="quickview" data-click data-dialog-buttons='["prev","next"]' ...</a></code>
кастомизация
задать необходимые параметры
<code data-language="html"><a class="quickview" data-mouseover data-quickview-mode="modal" data-data-element="test" data-data-id="1" data-dialog-buttons='[ {"action":"close","label":"закрыть","title":"закрыть"} ]' >наведите</a></code>
2.1.19-beta (02.03.2019)
- Improved "getButtons" [js]
2.1.18-beta (01.03.2019)
- Improved "setParamHash", "removeParamHash" [js]
2.1.17-beta (21.02.2019)
- Improved "getContent" [js]
2.1.16-beta (27.12.2018)
- Improved "getNeighbor" [js]
2.1.15-beta (24.10.2018)
- Change triggering javascript event "quickview:content"
2.1.14-beta (10.10.2018)
- Improved "modQuickViewContentProcessor" processor
2.1.13-beta (20.07.2018)
- Improved "methodActions" [js]
2.1.12-beta (14.07.2018)
- Improved "fancybox" [js]
- Improved "methodActions" [js]
2.1.10-beta (14.05.2018)
- Improved "bootstrap 4.1" [js]
2.1.9-beta (14.04.2018)
- Change "showOutput" [js]
2.1.8-beta (30.03.2018)
- Improved "modQuickViewContentProcessor"
- Add "QuickViewOnBeforeProcessContent", "QuickViewOnProcessContent" event
2.1.7-beta (21.02.2018)
- Improved compatibility with "bootstrap 4.0.0" [js]
2.1.6-beta (19.02.2018)
- Change "process" [modQuickViewContentProcessor]
2.1.5-beta (01.02.2018)
- Fix "miniShop2.Gallery.initialize" method [js]
2.1.4-beta (29.01.2018)
- Add "msfavorites.initialize" method [js]
2.1.3-beta (08.11.2017)
- Change "spinner" [css]
2.1.2-beta (14.09.2017)
- Change "initialize,runProcessor" [QuickView]
2.1.1-beta (26.08.2017)
- Improved "methodActions" [js]
2.1.0-beta (26.08.2017)
- Improved "setParamHash", "removeParamHash" [js]
2.0.9-beta (20.08.2017)
- Fix "clear output for selector" [js]
2.0.8-beta (14.08.2017)
- Add "actionFormSubmit" [js]
2.0.7-beta (12.08.2017)
- Fix "AjaxForm.submit.success" [js]
- Add "setParamHash", "removeParamHash" [js]
2.0.6-beta (27.06.2017)
- Add "addMethodAction", "removeMethodAction" [js]
2.0.5-beta (14.06.2017)
- Improved "getScript" [modQuickViewContentProcessor]
2.0.4-beta (26.05.2017)
- Add "AjaxForm.submit.success" [js]
- Improved "process" [modQuickViewContentProcessor]
2.0.3-beta (25.05.2017)
- Fix "selector" [js]
- Improved "initialize" [QuickView]
2.0.2-beta (04.05.2017)
- Fix "resource render"
2.0.1-beta (22.04.2017)
- Fix "processContext"
- Add "processLexicon"
- Add "data-windowload"
2.0.0-beta (20.04.2017)
- Initial
1.1.9-beta (06.04.2017)
- Improved "processTags"
1.1.8-beta (22.03.2017)
- Improved compatibility with "jQuery 3.x"
- Add "en" lexicon
1.1.7-beta (19.01.2017)
- Change "format hash"
1.1.6-beta (19.01.2017)
- Add "processUrl"
- Add "Hash" js
1.1.5-beta (15.09.2016)
- Fix "scriptProperties tpl"
- Reformat code
1.1.4-beta (22.08.2016)
- Fix "dialog" css
1.1.3-beta
- Updated bootstrap-modal
- Updated bootstrap-dialog
1.1.2-beta
- Improvement load script
1.1.1-beta
- Fix load mainJsCss
1.1.0-beta
- Add setting withLoop
- Fix boolean setting
1.0.6-beta
- Add EN lexicon
1.0.5-beta
- Fix work with different contexts
1.0.4-beta
- Fix work with phpthumbof
Последние обсуждения в сообществе MODX.pro