[QuickView] - быстрый просмотр в модальном окне.
QuickView — быстрый просмотр любого элемента в модальном окне.
— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора fenom
Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт.
Интерактивные примеры тут quickview.vgrish.ru/
пример 1
Постановка:
— требуется по клику вывести в модальное окно чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
пример 2
Постановка:
— требуется по клику вывести в модальное окно сниппет корзины msCart
— требуется широкое модальное окно
Вызов:
пример 3
Постановка:
— требуется по клику вывести в модальное окно чанк msProduct.content
— задействовать ресурс с идентификатором 7
Вызов:
пример 4
Постановка:
— требуется по наведению вывести в селектор чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
пример 5
Постановка:
— требуется список продуктов minishop
— по клику вывести модалку с продуктом test
— задействовать актуальный ресурс
— добавить кнопку соседи
Вызов:
пример 6
Постановка:
— вывести в модальном окне чанк msProduct.content
— задействовать bootstrap-modal, без bootstrap-dialog
Вызов:
Также необходимо тело модалки, куда по клику в селектор будет подгружен результат
Код:
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
— для подгрузки скриптов и стилей bootstrap-modal нужно указать
Основные настройки 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
режим срабатывания по клику
Вызов:
режим срабатывания по наведению
Вызов:
data-quickview-mode
modal — режим работы с модальным окном
Вызов:
selector — режим работы с селектором
Вызов:
data-data-action
chunk — работа с чанком
Вызов:
snippet — работа со сниппетом
Вызов:
template — работа с шаблоном
Вызов:
data-*-buttons
задать необходмые кнопки. Доступны prev,next,close
Вызов:
задать необходимые параметры
— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора fenom
Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт.
Интерактивные примеры тут quickview.vgrish.ru/
Примеры
пример 1
Постановка:
— требуется по клику вывести в модальное окно чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
<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>пример 2
Постановка:
— требуется по клику вывести в модальное окно сниппет корзины msCart
— требуется широкое модальное окно
Вызов:
<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>пример 3
Постановка:
— требуется по клику вывести в модальное окно чанк msProduct.content
— задействовать ресурс с идентификатором 7
Вызов:
<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>пример 4
Постановка:
— требуется по наведению вывести в селектор чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно
Вызов:
<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>пример 5
Постановка:
— требуется список продуктов minishop
— по клику вывести модалку с продуктом test
— задействовать актуальный ресурс
— добавить кнопку соседи
Вызов:
<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>пример 6
Постановка:
— вывести в модальном окне чанк msProduct.content
— задействовать bootstrap-modal, без bootstrap-dialog
Вызов:
<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>Также необходимо тело модалки, куда по клику в селектор будет подгружен результат
Код:
<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>Подключение QuickView
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
[[!QuickView.initialize?
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`1`
&services=`miniShop2,msoptionsprice`
]]— для подгрузки скриптов и стилей bootstrap-modal нужно указать
&bootstrapModalJsCss=`1`&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
режим срабатывания по клику
Вызов:
<a class="quickview"
data-click
...</a>режим срабатывания по наведению
Вызов:
<a class="quickview"
data-mouseover
...</a>Режим работы
data-quickview-mode
modal — режим работы с модальным окном
Вызов:
<a class="quickview"
data-click
data-quickview-mode="modal"
...</a>selector — режим работы с селектором
Вызов:
<a class="quickview"
data-click
data-quickview-mode="selector"
...</a>Действия
data-data-action
chunk — работа с чанком
Вызов:
<a class="quickview"
data-click
data-data-action="chunk"
...</a>snippet — работа со сниппетом
Вызов:
<a class="quickview"
data-click
data-data-action="snippet"
...</a>template — работа с шаблоном
Вызов:
<a class="quickview"
data-click
data-data-action="template"
...</a>Кнопки
data-*-buttons
задать необходмые кнопки. Доступны prev,next,close
Вызов:
<a class="quickview"
data-click
data-dialog-buttons='["prev","next"]'
...</a>задать необходимые параметры
<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>
20 апреля 2017, 11:52
Поблагодарить автора
Отправить деньги
Комментарии: 81
Подключение QuickView
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
— для подгрузки скриптов и стилей bootstrap-modal нужно указать
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
[[!QuickView.initialize?
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`1`
&services=`miniShop2,msoptionsprice`
]]— для подгрузки скриптов и стилей bootstrap-modal нужно указать
&bootstrapModalJsCss=`1`&bootstrapDialogJsCss=`1`services=`miniShop2,msoptionsprice`
да, всё это уже читал выше, и так понял это исчерпывающий ответ на мой первый вопрос.
А на второй ответ мне не понятен.
У меня в шаблоне, где собираюсь подключать сниппет QuickView.initialize уже подключён bootstrap:
А на второй ответ мне не понятен.
У меня в шаблоне, где собираюсь подключать сниппет QuickView.initialize уже подключён bootstrap:
<link href="css/bootstrap.min.css" rel="stylesheet">
....
<script src="js/bootstrap.min.js"></script>
По диагонали посмотрел вживую, супер!
Единственное, пока не вник, как добавить к вызываемому сниппету свой чанк
Единственное, пока не вник, как добавить к вызываемому сниппету свой чанк
<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>Не сработало с шаблоном, но можно из него всё в чанк вынести и работать с ним. Будет работать на ура.все работает пример quickview.vgrish.ru/#ex-7
Крутое обновление!спасибо!
Чанки с формами будут работать с аяксом?
Просто товарищ обмолвился, что не сработало у него. Страница, где вызвано модальное окно при нажатии на кнопку, уходит в перезагрузку
UPD: Есть чанк, в нём форма, этот чанк вызван на странице через quickview. При нажатии на кнопку отправить, страница уходит в перезагрузку.
Я сам посмотрю, а то «сломанный телефон».
Просто товарищ обмолвился, что не сработало у него. Страница, где вызвано модальное окно при нажатии на кнопку, уходит в перезагрузку
UPD: Есть чанк, в нём форма, этот чанк вызван на странице через quickview. При нажатии на кнопку отправить, страница уходит в перезагрузку.
Я сам посмотрю, а то «сломанный телефон».
Чанки с формами будут работать с аяксом?
пример 8 quickview.vgrish.ru/#ex-8
описал как необходимо вызывать, и нужна мелкая правка с скрипте ajaxform, добавить .off('submit')
$(document).off('submit').on('submit', afConfig['formSelector'], function (e) {
...
});
Володя, у меня такой вопрос: а зачем в настройках параметр «Разрешенные чанки»? Почему бы не сделать так, чтобы любой подключенный чанк можно было вызывать и работать с ним. Такая инициализация «на лету».
Для меня это ценное дополнение, с помощью него можно не плодить html-формы, а создавать их динамически. Я вообще удивлён, что так мало обратной связи
Для меня это ценное дополнение, с помощью него можно не плодить html-формы, а создавать их динамически. Я вообще удивлён, что так мало обратной связи
Привет. столкнулся с такой проблемой. есть каталог с фильтрацией (mFilter2).
Попробовал подключить QuickView. После этого заработал быстрый просмотр, но перестала работать фильтрация. В консоли браузера ошибка:
Попробовал подключить QuickView. После этого заработал быстрый просмотр, но перестала работать фильтрация. В консоли браузера ошибка:
TypeError: a.indexOf is not a function. (In 'a.indexOf(" ")', 'a.indexOf' is undefined){$_modx->runSnippet('!QuickView.initialize', [
'frontСss' => 0,
'frontJs' => 0,
'bootstrapDialogJsCss' => 0,
'bootstrapModalJs' => 0,
'bootstrapModalCss' => 0,
'bootstrapDialogJs' => 0,
'bootstrapDialogCss' => 0,
'services' => 'miniShop2'
])}<button type="button" class="uk-icon-link uk-button-small uk-button-link uk-margin-small-left uk-float-right quickview"
uk-toggle="target: #productShow"
data-click
data-quickview-mode="selector"
data-data-element="Shop.Content.Product.QuickView"
data-quickview-output=".bs-quickview-output"
data-data-id="{$id}"
data-dialog-title=""
data-dialog-size=""
uk-icon="icon: info"></button>
Так и вызвано через селектор:
Отключаю QuickView — фильтр снова работает!
uk-toggle="target: #productShow"
data-click
data-quickview-mode="selector"
data-data-element="Shop.Content.Product.QuickView"
data-quickview-output=".bs-quickview-output"
data-data-id="{$id}"
data-dialog-title=""
data-dialog-size=""uk-toggle="target: #productShow"Отключаю QuickView — фильтр снова работает!
попробовал на пустом шаблоне, вот код.
<script src="/assets/components/themebootstrap/js/jquery.min.js"></script>
[[!QuickView.initialize?
&services=`miniShop2,AjaxForm`
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`0`
]]
[[!mFilter2?
&parents=`0`
&element=`msProducts`
&filters=`
ms|price:number,
parent:categories,
msoption|tags,
ms|vendor:vendors,
ms|old_price:boolean,
`
&tpl=`@INLINE
<a class='quickview'
data-click
data-quickview-mode="selector"
data-data-element="product.quickview"
data-quickview-output=".bs-quickview-output"
data-output-buttons='["close"]'
data-data-id="[[+id]]"
data-dialog-title="">[[+pagetitle]]</a>
`
&class=`msProduct`
&sort=`ms|price:desc`
&tplOuter=`tpl.mFilter2.outer`
&tplFilter.outer.ms|price=`tpl.mFilter2.filter.slider`
&tplFilter.row.ms|price=`tpl.mFilter2.filter.number`
]]
<hr>
<div class="bs-quickview-output"></div>
Здравствуйте.
Подскажите, пожалуйста, как можно добавить функцию на событие?
Пробую отсюда так:
Подскажите, пожалуйста, как можно добавить функцию на событие?
Пробую отсюда так:
$('.modal').on('shown.bs.modal', function(e) {
console.log('qwe');
});
Добрый вечер.
Можно попробовать как
Можно попробовать как
$(document).on('quickview:content-show.quickview', function (e, data) {
console.log('show1');
});$(document).ready(function () {
if (typeof QuickView != 'undefined') {
QuickView.addMethodAction('show', 'custom_action', function(r){
console.log('show');
});
}
});
Здравствуйте. У меня возник вопрос.
Мне необходимо вывести каталог с товарами в модальном окне. Прежде чем приобрести, попробовал на тестовом хостинге это воплотить, товары выводятся, всё гуд, но у меня не работает пагинация, то есть страница обновляется.
Вызов pdopage осуществляется в чанке. При включении ajax в pdopage, товары не появляются вообще.
Не подскажите возможно ли это сделать данным дополнением? Спасибо!
P.S. также пробовал через сниппет с параметрами, тоже самое.
Мне необходимо вывести каталог с товарами в модальном окне. Прежде чем приобрести, попробовал на тестовом хостинге это воплотить, товары выводятся, всё гуд, но у меня не работает пагинация, то есть страница обновляется.
Вызов pdopage осуществляется в чанке. При включении ajax в pdopage, товары не появляются вообще.
Не подскажите возможно ли это сделать данным дополнением? Спасибо!
P.S. также пробовал через сниппет с параметрами, тоже самое.
Добрый вечер. Прошу подсказать мне, что я упускаю.
Есть вызов модального окна, вот настройки кнопки:
Окно вызывается нормально, все данные присутствуют. Проблемы начинаются, когда я пытаюсь создать кнопку «Закрыть» (при клике по темному фону, все закрывается нормально).
Кнопку закрыть я пытаюсь создать добавлением следующего параметра:
Кнопка появляется. Я могу кликнуть по ней, но закроется только модальное окно, темный фон останется.
Это конфликт скриптов (других скриптов на сайте нет), или же я где-то в настройках ссылки ошибся?
Есть вызов модального окна, вот настройки кнопки:
<a
data-click
data-data-id="[[+id]]"
data-toggle="modal"
data-quickview-mode="selector"
data-data-element="pop_service"
data-target=".bs-modal"
data-quickview-output=".bs-quickview-output"
class="read-more quickview" href="#">Подробнее</a>Окно вызывается нормально, все данные присутствуют. Проблемы начинаются, когда я пытаюсь создать кнопку «Закрыть» (при клике по темному фону, все закрывается нормально).
Кнопку закрыть я пытаюсь создать добавлением следующего параметра:
data-output-buttons='["close"]'Кнопка появляется. Я могу кликнуть по ней, но закроется только модальное окно, темный фон останется.
Это конфликт скриптов (других скриптов на сайте нет), или же я где-то в настройках ссылки ошибся?
Доброе утро.
Спасибо!
Кнопку закрыть я пытаюсь создать добавлением следующего параметра:именно
data-output-buttons='[«close»]'
Именно «output», потому что dialog даже не создает кнопку.
data-output-buttons='["close"]'Я могу кликнуть по ней, но закроется только модальное окно, темный фон останется.моя недоработка. Поправил в новой версии пакета, обновитесь, все должно быть ок.
Спасибо!
А QuickView позволяет повесить функцию закрытия на имеющуюся кнопку, а не на созданную им?попробуйте добавить в чанк как
<div class="quickview quickview-buttons"><button class="btn quickview quickview-remove btn-default quickview-action" data-button='{ "action":"close" }'>×</button></div>
А можно пример работы с Office?
Подключен BS4 и jquery
И как в вызове указать несколько параметров сниппета?
Подключен BS4 и jquery
[[!QuickView.initialize?
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`1`
&services=`officeAuth`
]]<a class="quickview"
data-click
data-quickview-mode="modal"
data-data-action="officeAuth"
data-dialog-size="size-wide"
>Кнопка</a>И как в вызове указать несколько параметров сниппета?
У меня не работает Quickview. Точнее перестал работать, после того как обновил MODX до последней версии и pdoTools.
Окно Quickview открывается, но ни тв не вызвать, ни феном не пашет. Ни знаю что делать?
— То что в чанке, то он просто текстом выдает, а если шаблоном, то pagetitle передает, description передает, стили скрипты передаёт, но ТВ не видет вообще (у меня PHP 7.3)
Окно Quickview открывается, но ни тв не вызвать, ни феном не пашет. Ни знаю что делать?
— То что в чанке, то он просто текстом выдает, а если шаблоном, то pagetitle передает, description передает, стили скрипты передаёт, но ТВ не видет вообще (у меня PHP 7.3)
Здравия желаю граждане.
передаю из чанка посредством ссылки, вызовом модального окна с AjaxForm.
передаю из чанка посредством ссылки, вызовом модального окна с AjaxForm.
[[!QuickView.initialize?
&services=`miniShop2,AjaxForm,FormIt,recaptchav2,pagetitle_tv`
&bootstrapModalJsCss=`1`
&bootstrapDialogJsCss=`1`
]]
<a href="form?page_id=[[+pagetitle]]" class="quickview" style="color: #fff;"
data-click
data-quickview-mode="modal"
data-data-action="chunk"
data-data-element="connect_map_tv_standart"
data-data-id="[[+id]]"
data-dialog-title="[[+pagetitle]]"
data-dialog-buttons='["close"]'
type="submit">ссылка</a><input type="hidden" name="pagetitle_tv" value="[[!pagetitle_tv]]"><?php
$pageID = strip_tags($_GET["page_id"]);
echo $pageID;
?>
Хочу в модальном окне подгружать информацию о товаре. На самой странице нет ни одного вызова сниппета от miniShop2. Если вызывать модальное окно с чанком, в котором вызывается любой из сниппетов от miniShop2, тогда скрипты от miniShop2 НЕ подключаются в чанке (даже если указать и как в инструкции написано). Если указать в параметре services значение minishop2, тогда скрипт подгружается. Но!!! Он подгружается не в модальном окне, а сразу на странице! А раз он подгружается сразу, значит это автоматом замедляет загрузку и отрисовку страницы! Зачем это надо? (вопрос риторический) может человек ниразу не зайдет в модалку.
Так вот вопрос такой — почему скрипты от сниппетов minishop2 не подключаются в модалку?
Другие скрипты (из своих сниппетов), подключаются. Искал в настройках, в коде компонента, так и не нашел где это всё дело «вырезается» и по какой логике…
Так вот вопрос такой — почему скрипты от сниппетов minishop2 не подключаются в модалку?
Другие скрипты (из своих сниппетов), подключаются. Искал в настройках, в коде компонента, так и не нашел где это всё дело «вырезается» и по какой логике…
А как-то можно сервис другой подключить? А то стоит компонент со скидками msDiscount и он в modal цену не подгружает
upd разобрался
public_html/core/components/pdotools/model/pdotools/pdoparser.class.php(64):
modParser->processElementTags('', '\\r\\n\\r\\n\\r\\n[[!QuickV...', true, false, '[[', ']]',
Array, 9)\n#5 /home/i/public_html/core/model/modx/modresource.class.php(546):
pdoParser->processElementTags('', '\\ in /home/i/public_html/core/cache/includes/elements/modsnippet/69.include.cache.php on line 22upd разобрался
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| QuickView | 2.2.2-beta от 19.10.2023 | 1 208 |
| miniShop2 | 4.4.0-pl от 06.08.2024 | 26 135 |
| pdoTools | 2.13.2-pl от 02.09.2021 | 54 189 |
| AjaxForm | 1.2.2-pl от 17.10.2021 | 19 542 |
| mSearch2 | 1.14.11-pl от 02.05.2023 | 18 928 |
| AjaxSnippet | 1.1.1-pl от 13.10.2014 | 3 009 |
| ms2Gallery | 2.0.12-pl от 25.09.2020 | 4 576 |
| Office | 1.9.5-pl от 01.10.2021 | 7 029 |
| msDiscount | 1.3.13-pl от 06.01.2021 | 1 346 |
