QuickView / стр. 5 из 9 / MODX Revolution

QuickView

QuickView - быстрый просмотр любого элемента в модальном окне.

- работа с любыми ресурсами
- работа с чанками, сниппетами, шаблонами
- вывод в модальное окно, либо в указанный селектор
- поддержка шаблонизатора fenom

Примеры

пример 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-data-element="msProduct.content"
			data-data-topics='["minishop2:product"]'
			data-data-id="7"
			data-dialog-title=""
			data-dialog-size="size-wide"
			>продукт</a>

Результат:

продукт

пример 4

Постановка:
- требуется по наведению вывести в селектор чанк 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>

Результат:

наведите

Вывод:

пример 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-quickview-group="product"
			data-dialog-title="[[+pagetitle]]"
			>[[+pagetitle]]</a>
			`
			]]

			[[!+page.nav]]</div>

Результат:

Копия Товар 11

Копия Товар 12

Копия Товар 13

Копия Товар 14

Копия Товар 15

Копия Товар 16

Копия Товар 17

Копия Товар 18

Копия Товар 19

Копия Товар 20

пример 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"
			data-output-buttons='["close"]'
			>ссылка</a>

Результат:

ссылка

Также необходимо тело модалки, куда по клику в селектор будет подгружен результат

Код:


			<div class="bs-modal modal fade">
			
				
					
				
			
			</div>

пример 7

Постановка:
- вывести в модальном окне шаблон test

Вызов:

<a class="quickview"
			data-click
			data-quickview-mode="modal"
			data-data-action="template"
			data-data-element="test"
			data-data-id="7"
			data-dialog-size="size-wide"
			>шаблон</a>

Результат:

шаблон

пример 8

Постановка:
- вывести в модальном окне форму
- задействовать 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`
			]]

пример 9

Постановка:
- вывести в модальном окне 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>

пример 10

Постановка:
- вывести в модальном окне форму авторизации
- задействовать 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]]

пример 11

Постановка:
- вывести в модальном окне форму авторизации
- задействовать 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;

пример 12

Постановка:
- вывести в модальном окне форму
- задействовать 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>

Результат:

форма

пример 13

Постановка:
- вывести в модальном окне форму обратного звонка
- задействовать 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>

Результат:

наведите