[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>
Комментарии: 81
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Обновление уже установленного пакета без проблем?Ага, при установке Понял. Удаляю, меняю на новый.
Надеюсь удобство пользования будет перекрывать необходимость изучения нового синтаксиса.
Если на сайте уже подключён bootstrap и bootstrap-modal, не будет ли двойного подключения js и css bootstrap?
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
Примечание!
— для подгрузки скриптов и стилей bootstrap-modal нужно указать
— для подгрузки скриптов и стилей bootstrap-dialog нужно указать
— для подгрузки скриптов и стилей сторонних пакетов нужно перечислить их
А на второй ответ мне не понятен.
У меня в шаблоне, где собираюсь подключать сниппет QuickView.initialize уже подключён bootstrap:
В шаблоне вызова сниппета QuickView.initialize в это всё нужно оставлять? Или лучше удалить?
соответственно скрипты и стили bootstrap-modal не грузятся.
Вызов взят с демо сайта, там bootstrap и соответственно bootstrap-modal подключать не требуется.
Единственное, пока не вник, как добавить к вызываемому сниппету свой чанк
Прямой возможности передать параметры сниппету нет.
Сработает?
Крутое обновление!
спасибо!
Спасибо!
Просто товарищ обмолвился, что не сработало у него. Страница, где вызвано модальное окно при нажатии на кнопку, уходит в перезагрузку
UPD: Есть чанк, в нём форма, этот чанк вызван на странице через quickview. При нажатии на кнопку отправить, страница уходит в перезагрузку.
Я сам посмотрю, а то «сломанный телефон».
время будет лишнее — посмотрю, может и заработает.
пример 8 quickview.vgrish.ru/#ex-8
описал как необходимо вызывать, и нужна мелкая правка с скрипте ajaxform, добавить .off('submit')
Для меня это ценное дополнение, с помощью него можно не плодить html-формы, а создавать их динамически. Я вообще удивлён, что так мало обратной связи
Попробовал подключить QuickView. После этого заработал быстрый просмотр, но перестала работать фильтрация. В консоли браузера ошибка:
Инициализация:
Кнопка:
Бутстрап отключен, так как не используется
Спасибо!
модалка открывается по клику
Модальное окно отрывается и показывается товар, но сам каталог выводится через mFilter2, который перестает работать при инициализации `!QuickView.initialize`
Отключаю QuickView — фильтр снова работает!
все корректно работает…
Подскажите, пожалуйста, как можно добавить функцию на событие?
Пробую отсюда так:
Не получается.
Можно попробовать как
либо добавить в обработку
Спасибо!
Мне необходимо вывести каталог с товарами в модальном окне. Прежде чем приобрести, попробовал на тестовом хостинге это воплотить, товары выводятся, всё гуд, но у меня не работает пагинация, то есть страница обновляется.
Вызов pdopage осуществляется в чанке. При включении ajax в pdopage, товары не появляются вообще.
Не подскажите возможно ли это сделать данным дополнением? Спасибо!
P.S. также пробовал через сниппет с параметрами, тоже самое.
Напишите в ТП, приложите доступы к админке сайта и ссылку на чанк с вызовом — разберемся.
Спасибо!
Вопрос в том, чтобы избавиться от монструозных диалоговых окон и подключить лёгкий fancybox3 по умолчанию.
А вывод в селектор есть изначально. Можно использовать любые модалки и тд…
Есть вызов модального окна, вот настройки кнопки:
Сниппет вызывается с активными обеими настройками: &bootstrapModalJsCss=`1`, &bootstrapDialogJsCss=`1`
Окно вызывается нормально, все данные присутствуют. Проблемы начинаются, когда я пытаюсь создать кнопку «Закрыть» (при клике по темному фону, все закрывается нормально).
Кнопку закрыть я пытаюсь создать добавлением следующего параметра:
Именно «output», потому что dialog даже не создает кнопку.
Кнопка появляется. Я могу кликнуть по ней, но закроется только модальное окно, темный фон останется.
Это конфликт скриптов (других скриптов на сайте нет), или же я где-то в настройках ссылки ошибся?
именно
и нужно использовать если вы используете вывод в селектор.
моя недоработка. Поправил в новой версии пакета, обновитесь, все должно быть ок.
Спасибо!
Спасибо! Все заработало.
А QuickView позволяет повесить функцию закрытия на имеющуюся кнопку, а не на созданную им?
Т.е. в моем чанке есть элемент, который мог бы выполнять функцию кнопки закрытия, но прописывание ему нужных стилей не помогает…
Должно сработать.
Видимо, где-то класс терял.
Еще раз спасибо!
пожалуйста!
QuickView + AjaxForm
data-quickview-mode=«modal»
Возможно ли передать в например data-dialog-title?
Такая необходимость пришла т.к много форм на странице, и у них одинаковые поля, только title разные, а хочется знать с какой кнопки пришло сообщение.
можно в html вызова поместить нужное поле в виде data параметра, например
в чанке поле будет доступно в плейсхолдере
Спасибо большое, заработало.
можно добавить назначение своего класса css для кнопок «закрыть» и для «соседей»?
Подключен BS4 и jquery
action.php дает ишибку 400
И как в вызове указать несколько параметров сниппета?
Окно Quickview открывается, но ни тв не вызвать, ни феном не пашет. Ни знаю что делать?
— То что в чанке, то он просто текстом выдает, а если шаблоном, то pagetitle передает, description передает, стили скрипты передаёт, но ТВ не видет вообще (у меня PHP 7.3)
передаю из чанка посредством ссылки, вызовом модального окна с AjaxForm.
вывожу поле в форме
есть сниппет pagetitle_tv
И нифига, не заполняется значение сниппета в форме, не могу понять где, неделю уже бъюсь, дайте азимут направления.
передавал значение pagetitle, я просто скопировал и вставил в hidden input
Так вот вопрос такой — почему скрипты от сниппетов minishop2 не подключаются в модалку?
Другие скрипты (из своих сниппетов), подключаются. Искал в настройках, в коде компонента, так и не нашел где это всё дело «вырезается» и по какой логике…
upd разобрался