QuickView

Быстрый просмотр товаров и ресурсов.
Автор дополнения
Володя Володин
Пакетов
43
Закачек
21 790
Автор дополнения
Пакетов
43
Закачек
21 790
Обычно отвечает в течение нескольких дней
Версия 2.1.19-beta
Дата выпуска 02.03.2019
Загрузки 1 127
Просмотры 14 668

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



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


Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт.
Интерактивные примеры тут quickview.vgrish.ru/



<cut/>

Примеры



пример 1


Постановка:
— требуется по клику вывести в модальное окно чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно


Вызов:


<code data-language="html"><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></code>



пример 2


Постановка:
— требуется по клику вывести в модальное окно сниппет корзины msCart
— требуется широкое модальное окно


Вызов:


<code data-language="html"><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></code>



пример 3


Постановка:
— требуется по клику вывести в модальное окно чанк msProduct.content
— задействовать ресурс с идентификатором 7


Вызов:


<code data-language="html"><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></code>




пример 4


Постановка:
— требуется по наведению вывести в селектор чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно


Вызов:


<code data-language="html"><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></code>





пример 5


Постановка:
— требуется список продуктов minishop
— по клику вывести модалку с продуктом test
— задействовать актуальный ресурс
— добавить кнопку соседи


Вызов:


<code data-language="html"><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></code>




пример 6


Постановка:
— вывести в модальном окне чанк msProduct.content
— задействовать bootstrap-modal, без bootstrap-dialog


Вызов:


<code data-language="html"><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></code>



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


Код:


<code data-language="html">
			<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>
		</code>





Подключение QuickView


В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize



<code data-language="html">
			[[!QuickView.initialize?
			&bootstrapModalJsCss=`0`
			&bootstrapDialogJsCss=`1`
			&services=`miniShop2,msoptionsprice`
			]]
		</code>

Примечание!


— для подгрузки скриптов и стилей 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
режим срабатывания по клику


Вызов:


<code data-language="html"><a class="quickview"
			data-click
			...</a></code>

data-mouseover
режим срабатывания по наведению


Вызов:


<code data-language="html"><a class="quickview"
			data-mouseover
			...</a></code>


Режим работы



data-quickview-mode
modal — режим работы с модальным окном



Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-quickview-mode="modal"
			...</a></code>

data-quickview-mode
selector — режим работы с селектором


Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-quickview-mode="selector"
			...</a></code>



Действия



data-data-action
chunk — работа с чанком


Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-data-action="chunk"
			...</a></code>

data-data-action
snippet — работа со сниппетом


Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-data-action="snippet"
			...</a></code>

data-data-action
template — работа с шаблоном


Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-data-action="template"
			...</a></code>






Кнопки



data-*-buttons
задать необходмые кнопки. Доступны prev,next,close



Вызов:


<code data-language="html"><a class="quickview"
			data-click
			data-dialog-buttons='["prev","next"]'
			...</a></code>

кастомизация
задать необходимые параметры


<code data-language="html"><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></code>


2.1.19-beta (02.03.2019)

  • Improved "getButtons" [js]

2.1.18-beta (01.03.2019)

  • Improved "setParamHash", "removeParamHash" [js]

2.1.17-beta (21.02.2019)

  • Improved "getContent" [js]

2.1.16-beta (27.12.2018)

  • Improved "getNeighbor" [js]

2.1.15-beta (24.10.2018)

  • Change triggering javascript event "quickview:content"

2.1.14-beta (10.10.2018)

  • Improved "modQuickViewContentProcessor" processor

2.1.13-beta (20.07.2018)

  • Improved "methodActions" [js]

2.1.12-beta (14.07.2018)

  • Improved "fancybox" [js]
  • Improved "methodActions" [js]

2.1.10-beta (14.05.2018)

  • Improved "bootstrap 4.1" [js]

2.1.9-beta (14.04.2018)

  • Change "showOutput" [js]

2.1.8-beta (30.03.2018)

  • Improved "modQuickViewContentProcessor"
  • Add "QuickViewOnBeforeProcessContent", "QuickViewOnProcessContent" event

2.1.7-beta (21.02.2018)

  • Improved compatibility with "bootstrap 4.0.0" [js]

2.1.6-beta (19.02.2018)

  • Change "process" [modQuickViewContentProcessor]

2.1.5-beta (01.02.2018)

  • Fix "miniShop2.Gallery.initialize" method [js]

2.1.4-beta (29.01.2018)

  • Add "msfavorites.initialize" method [js]

2.1.3-beta (08.11.2017)

  • Change "spinner" [css]

2.1.2-beta (14.09.2017)

  • Change "initialize,runProcessor" [QuickView]

2.1.1-beta (26.08.2017)

  • Improved "methodActions" [js]

2.1.0-beta (26.08.2017)

  • Improved "setParamHash", "removeParamHash" [js]

2.0.9-beta (20.08.2017)

  • Fix "clear output for selector" [js]

2.0.8-beta (14.08.2017)

  • Add "actionFormSubmit" [js]

2.0.7-beta (12.08.2017)

  • Fix "AjaxForm.submit.success" [js]
  • Add "setParamHash", "removeParamHash" [js]

2.0.6-beta (27.06.2017)

  • Add "addMethodAction", "removeMethodAction" [js]

2.0.5-beta (14.06.2017)

  • Improved "getScript" [modQuickViewContentProcessor]

2.0.4-beta (26.05.2017)

  • Add "AjaxForm.submit.success" [js]
  • Improved "process" [modQuickViewContentProcessor]

2.0.3-beta (25.05.2017)

  • Fix "selector" [js]
  • Improved "initialize" [QuickView]

2.0.2-beta (04.05.2017)

  • Fix "resource render"

2.0.1-beta (22.04.2017)

  • Fix "processContext"
  • Add "processLexicon"
  • Add "data-windowload"

2.0.0-beta (20.04.2017)

  • Initial

1.1.9-beta (06.04.2017)

  • Improved "processTags"

1.1.8-beta (22.03.2017)

  • Improved compatibility with "jQuery 3.x"
  • Add "en" lexicon

1.1.7-beta (19.01.2017)

  • Change "format hash"

1.1.6-beta (19.01.2017)

  • Add "processUrl"
  • Add "Hash" js

1.1.5-beta (15.09.2016)

  • Fix "scriptProperties tpl"
  • Reformat code

1.1.4-beta (22.08.2016)

  • Fix "dialog" css

1.1.3-beta

  • Updated bootstrap-modal
  • Updated bootstrap-dialog

1.1.2-beta

  • Improvement load script

1.1.1-beta

  • Fix load mainJsCss

1.1.0-beta

  • Add setting withLoop
  • Fix boolean setting

1.0.6-beta

  • Add EN lexicon

1.0.5-beta

  • Fix work with different contexts

1.0.4-beta

  • Fix work with phpthumbof

Последние обсуждения в сообществе MODX.pro