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

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


— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора 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`

— для подгрузки скриптов и стилей 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-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":"закрыть"}
			]'
			>наведите</a>

<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>

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>

$('.modal').on('shown.bs.modal', function(e) {
	console.log('qwe');
});

<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-dialog-buttons='[
			{"action":"close","label":"закрыть","title":"закрыть"}
			]'

[[!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>

<a href="{$_modx->resource.id | url}">Подробнее</a>

[[!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;
?>