QuickView / стр. 2 из 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="30.12.2024 12:17"
			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>

Результат:

наведите