QuickView
QuickView - быстрый просмотр любого элемента в модальном окне.
- работа с любыми ресурсами
- работа с чанками, сниппетами, шаблонами
- вывод в модальное окно, либо в указанный селектор
- поддержка шаблонизатора fenom
Примеры
Постановка:
- требуется по клику вывести в модальное окно чанк 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>
Результат:
ссылка
Постановка:
- требуется по клику вывести в модальное окно сниппет корзины 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>
Результат:
корзина
Постановка:
- требуется по клику вывести в модальное окно чанк msProduct.content
- задействовать ресурс с идентификатором 7
Вызов:
<a class="quickview"
data-click
data-data-element="msProduct.content"
data-data-topics='["minishop2:product"]'
data-data-id="7"
data-dialog-title=""
data-dialog-size="size-wide"
>продукт</a>
Результат:
продукт
Постановка:
- требуется по наведению вывести в селектор чанк test
- задействовать ресурс с идентификатором 1
- добавить кнопку закрыть окно
Вызов:
<a class="quickview"
data-mouseover
data-windowload
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>
Результат:
наведитеВывод:
Постановка:
- требуется список продуктов 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-quickview-group="product"
data-dialog-title="[[+pagetitle]]"
>[[+pagetitle]]</a>
`
]]
[[!+page.nav]]</div>
Постановка:
- вывести в модальном окне чанк 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"
data-output-buttons='["close"]'
>ссылка</a>
Результат:
ссылкаТакже необходимо тело модалки, куда по клику в селектор будет подгружен результат
Код:
<div class="bs-modal modal fade">
</div>
Постановка:
- вывести в модальном окне форму
- задействовать AjaxForm
Вызов:
<a class="quickview"
data-click
data-quickview-mode="modal"
data-data-action="chunk"
data-data-element="form.1"
data-data-id="1"
data-data-time="16.10.2024 10:30"
data-dialog-title='форма'
data-dialog-buttons='["close"]'
>форма</a>
Результат:
формаПримечание!
Чанк с формы должен содержать элементы <head></head><body></body> для подгрузки скриптов сниппета AjaxForm
пример:
<head></head>
<body></body>
[[!AjaxForm?
&snippet=`MySnippet`
&formSelector=`ajax_form_[[*id]]`
&form=`tpl.AjaxForm.example`
]]
Постановка:
- вывести в модальном окне fancybox форму
- задействовать AjaxForm
Вызов:
<a class="quickview"
data-fancybox
data-src="#fancybox-content"
data-click
data-quickview-mode="selector"
data-quickview-output="#fancybox-content"
data-data-element="form.1"
data-data-id="1"
>fancybox</a>
Результат:
fancyboxПримечание!
Также необходимо тело модалки, куда по клику в селектор будет подгружен результат
пример:
<div id="fancybox-content" style="display: none;width: 40%"></div>
Постановка:
- вывести в модальном окне форму авторизации
- задействовать Office
Вызов:
<a class="quickview"
data-click
data-quickview-mode="modal"
data-data-action="chunk"
data-data-element="@FILE auth.tpl"
data-data-id='[[*id]]'
data-dialog-title="Авторизация"
data-dialog-size="size-wide"
data-dialog-buttons='["close"]'
>Вход</a>
Результат:
ВходПримечание!
Чанк auth.tpl должен содержать элементы head и body для подгрузки скриптов
пример:
<head></head>
<body></body>
[[!Office]]
Постановка:
- вывести в модальном окне форму авторизации
- задействовать Login
Вызов:
<a class="quickview"
data-click
data-quickview-mode="modal"
data-data-action="chunk"
data-data-id='[[*id]]'
data-dialog-title="Авторизация"
data-dialog-size="size-wide"
data-dialog-buttons='["close"]'
data-quickview-html=''
>Вход</a>
Результат:
ВходПримечание!
Страница auth должен содержать вызов сниппета Login
пример:
{'!Login'|snippet:[
'redirectLogin' => 1,
'postHooks' => 'hook.login'
]}
{switch $.request.redirect}
{case 'login', 'logout'}
{var $redirect = $.request.id|url}
{default}
{var $redirect = ''}
{/switch}
{if $redirect?}
{/if}
Примечание!
hook.login
пример:
controller->getProperty('actionKey', 'service');
$action = isset($_REQUEST[$actionKey]) ? $_REQUEST[$actionKey] : '';
if ($resource_id = $modx->resource->id AND $id = $hook->controller->getProperty('redirectLogin')) {
$url = $modx->makeUrl($resource_id, '', ['redirect' => $action, 'id' => $id], 'full');
$modx->sendRedirect($url);
}
return true;
Постановка:
- вывести в модальном окне форму
- задействовать alertify,AjaxForm
Вызов:
<a class="quickview"
data-click
data-quickview-mode="alertify"
data-quickview-size="small"
data-quickview-spinner="true"
data-alertify-modal="true"
data-alertify-buttons='[ { "action":"close","label":"закрыть","title":"закрыть","cls":"tm-close" } ]'
data-alertify-title='форма'
data-data-action="chunk"
data-data-element="form.1"
data-data-id='[[*id]]'
>форма</a>
Результат:
форма
Постановка:
- вывести в модальном окне форму обратного звонка
- задействовать AjaxForm
Вызов:
<a class="quickview"
data-click
data-quickview-spinner="true"
data-quickview-mode="modal"
data-data-action="chunk"
data-data-element="modal.callback.tpl"
data-data-id='[[*id]]'
data-dialog-title='Перезвоните мне'
data-dialog-buttons='["close"]'
>форма</a>
Результат:
Обратный звонокЧанк modal.callback.tpl
пример:
{'!AjaxForm'|snippet:[
'snippet' => 'FormIt',
'hooks' => 'email',
'formSelector' => 'ajax-form-callback',
'form' => '@FILE chunks/forms/callback.tpl',
'emailTo' => 'email@mail.ru',
'emailSubject' => 'Обратный звонок',
'emailTpl' => '@FILE chunks/emails/callback.tpl',
'validate' => 'name:required,phone:required',
'validationErrorMessage' => 'В форме содержатся ошибки!',
'successMessage' => 'Сообщение успешно отправлено',
]}
Подключение QuickView
В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
[[!QuickView.initialize?
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`1`
&services=`miniShop2,msoptionsprice`
]]
Примечание!
- для подгрузки скриптов и стилей 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
режим срабатывания по клику
Вызов:
<a class="quickview"
data-click
...</a>
data-mouseover
режим срабатывания по наведению
Вызов:
<a class="quickview"
data-mouseover
...</a>
data-windowload
режим срабатывания по загрузке окна
Вызов:
<a class="quickview"
data-windowload
...</a>
Режим работы
data-quickview-mode
modal - режим работы с модальным окном
Вызов:
<a class="quickview"
data-click
data-quickview-mode="modal"
...</a>
data-quickview-mode
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>
data-data-action
snippet - работа со сниппетом
Вызов:
<a class="quickview"
data-click
data-data-action="snippet"
...</a>
data-data-action
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":"закрыть","cls":"tm-close" }
]'
>наведите</a>
Результат:
наведите