Инструменты пользователя

Инструменты сайта


tagmanager

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

tagmanager [2016/04/23 15:44] (текущий)
Строка 1: Строка 1:
 +====== Фильтрация и управление фильтрами (tagManager) ======
 +
 +tagManager — Компонент для редактирования и вывода фильтров каталога товаров.
 +Фильтрация и сортировка товаров в каталоге.
 +
 +===== Функции =====
 +
 +  * Сортировка групп фильтров и отдельно их значений.
 +  * Настройка активности групп фильтров и отдельных значений (чекбокс).
 +  * Изменение значений (по двойному клику появляется поле) для всех товаров,​ у которых есть это значение.
 +  * Ajax-фильтрация и сортировка товаров в каталоге.
 +  * Выводится число товаров по каждому фильтру. Блокируется получение пустого результата поиска.
 +  * Поддержка типов ввода TV с выбором одновременно нескольких значений — Флажки(checkbox),​ Список (множественный выбор).
 +  * Поддерживается использование MIGXDB для создания таблицы товаров в БД.
 +
 +===== Настройка компонента =====
 +
 +
 +  * После установки перейти в «Настройки системы»
 +  * В фильтре выбрать пространство имён «tag_manager».
 +  * Настроить параметры:​
 +
 +ID шаблонов через запятую (tag_mgr.templates) — ID шаблонов товаров,​ для которых нужно искать значения TV-параметров для управления в компоненте.
 +ID TV (доп. полей) через запятую (tag_mgr.tvs) — ID TV-параметров,​ уникальные значения которых нужно искать для управления в компоненте.
 +ID шаблонов категорий товаров (tag_mgr.category_templates) — ID шаблонов категорий (документов-контейнеров),​ для которых нужно искать значения TV-параметров для управления в компоненте.
 +ID документа-контейнера каталога товаров (tag_mgr.catalog_id) — ID документа первого уровня каталога товаров.
 +Название набора параметров (tag_mgr.propertySetName) — этот набор параметров сниппета getPage будет использоваться при выводе товаров в каталоге. При выводе через ajax происходит синхронизация параметров.
 +Можно задавать разные наборы параметров для разных шаблонов категорий товаров. Формат записи:​ ID шаблона==Имя набора параметров||ID шаблона==Имя набора параметров.
 +Пример:​ 10==catalog_filters||11==catalog_filters2
 +Также имя набора параметров можно указать в параметрах шаблона (prodPropertySetName).
 +tag_mgr.numericTVs — ID TV через запятую,​ у которых числовые значения (фильтр — слайдер).
 +tag_mgr.className — Имя класса таблицы в БД (ресурсы MODX или MIGXDB). Например «ShopContent». Если товары это ресурсы MODX, оставить пустым.
 +tag_mgr.packageName — Имя пакета таблицы в БД (MIGXDB). Если товары — ресурсы MODX, оставить пустым. Например «shop». Такое же имя должно быть у конфигурации MIGXDB (см. документацию Shopkeeper).
 +
 +— Перейти в компонент «Управление фильтрами». Можно сортировать,​ переименовывать,​ настраивать активность фильтров.
 +
 +Также настройки «className» и «packageName» можно указать в параметрах шаблона категории товаров.
 +
 +1. Открыть шаблон категории товаров.
 +2. Перейти на вкладку «Параметры».
 +3. Разблокировать параметры по умолчанию и добавить параметры:​
 +prodClassName — Имя класса таблицы БД (например «ShopContent»).
 +prodPackageName — Имя пакета таблицы БД (например «shop»).
 +prodTemplateId — ID шаблона по умолчанию для товров.
 +prodPropertySetName — имя набора параметров,​ используемого для фильтрации.
 +4. Сохранить изменения.
 +
 +— Для переименования всех значений параметров товаров дважды щелкнуть мышкой по фильтру и ввести новое значение,​ нажать клавишу Enter.
 +Для того чтобы в компоненте вывелись значения параметров нужно отметить соответствующие им флашки,​ нажать кнопку «Сохранить»,​ затем «Обновить кэш» (чтобы значения сохранились в БД компонента).
 +
 +Для вывода блоков фильтров на сайте использовать сниппет «tmCatalogFilters». Параметры сниппета можно увидеть на странице редактирования сниппета в админке на вкладке «Параметры».
 +
 +Примеры чанков innerTpl и outerTpl прилагаются (core/​components/​tag_manager/​elements/​chunks/​).
 +
 +Пример вызова:​
 +
 +<div id="​filters">​
 +[[tmCatalogFilters?​
 +&​jsMap=`1`
 +&​innerTpl=`filters_innerTpl`
 +&​outerTpl=`filters_outerTpl`
 +]]
 +</​div>​
 +
 +
 +
 +innerTpl — По умолчанию `@FILE innerTpl.tpl`.
 +outerTpl — По умолчанию `@FILE outerTpl.tpl`.
 +skipTV — ID TV через запятую,​ фильтры по которым выводить не нужно.
 +jsMap — Создавать JS-массив данных товаров. Используется для фильтрации и быстрого показа количества товаров по каждому фильтру.
 +categoryId — ID раздела из которого нужно выводить товары и фильтры. По умолчанию текущая страница.
 +toPlaceholder — имя плейсхолдера для вывода. Если не задано,​ выводится в месте вызова сниппета.
 +priceName — Имя TV или поля с ценой (пропускается через плагин «OnSHKgetProductPrice»).
 +
 +Если нужно брать товары и фильтры из другой категории,​ использовать параметр &​categoryId.
 +Если нужно только товары брать из другой категории (например для ajax-сортировки),​ использовать параметр &​parents.
 +
 +Параметры кэширования (полезно использовать,​ если у вас есть мультивалютность и т.п.):
 +cache — Включить кэширование (1|0). По умолчанию выключено — 0.
 +cacheId — Идентификатор кэша. По умолчанию «gpCache».
 +cache_key — Ключ кэша (название папки для файлов кэша). По умолчанию берется из настроек системы — cache_resource_key.
 +cache_handler — Обработчик кэширования. По умолчанию берется из настроек системы — cache_resource_handler (xPDOFileCache).
 +cache_expires — число секунд для кэширования. По умолчанию 0 (бесконечное).
 +
 +Пример вызова сниппета когда нужно вывести только товары с определенным ID. Фильтры берутся из категории с ID = 8:
 +
 +<div id="​filters">​
 +[[!tmCatalogFilters?​
 +&​jsMap=`1`
 +&​innerTpl=`filters_innerTpl`
 +&​outerTpl=`filters_outerTpl`
 +&​categoryId=`8`
 +&​parents=`-1`
 +&​resources=`12,​13,​14,​15`
 +&​cache=`0`
 +]]
 +</​div>​
 +
 +
 +
 +— Для вывода товаров использовать сниппет «tmGetProducts».
 +Требуются сниппеты getProducts и getPage.
 +
 +Пример вызова сниппета:​
 +
 +<div id="​products">​
 +[[!tmGetProducts]]
 +<div class="​clear"></​div>​
 +</​div>​
 +
 +<div class="​clear"></​div>​
 +<ul class="​pages"​ id="​pages">​
 +[[!+page.nav]]
 +</ul>
 +
 +
 +
 +Параметры сниппета:​
 +debug — режим отладки (выводятся парметры фильтрации).
 +numericTVs — список имен числовых TV. Используется,​ если вы не используете стандартную фильтрацию через filters.js.
 +
 +Параметры берутся по имени набора параметров указанных в конфигурации компонента («Настройки системы» -> «tag_manager»).
 +Набор параметров нужно привязать к сниппету getPage.
 +
 +!!!
 +В наборе параметров сниппета getPage указать параметр element = getProducts.
 +!!!
 +
 +Откройте в текстовом редакторе файл «assets/​components/​tag_manager/​js/​web/​filters.js» и настройте параметры (в коде есть комментарии).
 +
 +Если не используется какой-то функционал,​ например сортировка,​ то значение соответствующего параметра в filters.js нужно сделать пустым.
 +Пример:​
 +'​sorting_cont':​ '',//​Селектор контейнера с ссылками сортировок
 +
 +— Код сниппета «include»:​
 +
 +<?php
 +if (file_exists(MODX_BASE_PATH.$file)){
 +   $o = include MODX_BASE_PATH.$file;​
 +}else{ $o = '​Файл не найден:​ '​.$file;​ }
 +return $o;
 +
 +
 +
 +— Пример вывода фильтров и товаров в шаблоне каталога:​
 +
 +<link type="​text/​css"​ rel="​stylesheet"​ href="/​assets/​components/​tag_manager/​css/​ui-lightness/​jquery-ui-1.10.3.custom.css"​ />
 +<script type="​text/​javascript"​ src="/​assets/​components/​tag_manager/​js/​web/​jquery-ui-1.10.3.custom.min.js"></​script>​
 +<script type="​text/​javascript"​ src="/​assets/​components/​tag_manager/​js/​web/​jquery.history.js"></​script>​
 +<script type="​text/​javascript"​ src="/​assets/​components/​tag_manager/​js/​web/​filters.js"></​script>​
 +
 +<div style="​float:​right;">​
 +    <select style="​width:​168px;"​ id="​showLimit">​
 +        <option value="​4"​ selected="​selected">​Показывать по 4</​option>​
 +        <option value="​10">​Показывать по 10</​option>​
 +        <option value="​20">​Показывать по 20</​option>​
 +    </​select>​
 +</​div>​
 +
 +<div id="​sorting">​
 +    Сортировать по: 
 +    <a class="​active"​ href="​[[~[[*id]]]]?​sortby=pagetitle&​sortdir=desc">​названию<​span>​↓</​span></​a>​
 +     
 +    <a href="​[[~[[*id]]]]?​sortby=price&​sortdir=asc">​цене</​a>​
 +</​div>​
 +<br />
 +
 +<div id="​filters">​
 +[[!tmCatalogFilters?​
 +&​jsMap=`1`
 +&​innerTpl=`filters_innerTpl`
 +&​outerTpl=`filters_outerTpl`
 +]]
 +</​div>​
 +
 +<a name="​products"​ id="​pageAnchor"></​a>​
 +<div id="​products">​
 +[[!tmGetProducts]]
 +<div class="​clear"></​div>​
 +</​div>​
 +
 +<div class="​clear"></​div>​
 +<ul class="​pages"​ id="​pages">​
 +[[!+page.nav]]
 +</ul>
 +
 +
 +
 +— Так же не забудьте добавить jQuery (выше всех остальных скриптов). Если на сайте не используется,​ то так:
 +
 +
 +
 +— Если вы хотите чтобы URL ajax-фильтрции создавались только с location.hash (без HTML5 History), перед подключением jquery.history.js добавить:​
 +
 +<script type="​text/​javascript">​
 +    window.History = { options: { html4Mode: true, disableSuid:​ true} };
 +</​script>​
 +
 +
 +
 +— Пример вывода фильтров с мультивалютностью:​
 +
 +[[!tmCatalogFilters?​
 +&​cache=`1`
 +&​cacheId=`filters_[[!+shk_currency]]`
 +&​jsMap=`1`
 +&​innerTpl=`filters_innerTpl`
 +&​outerTpl=`filters_outerTpl`
 +&​priceName=`price`
 +]]
 +
 +
 +
 +Пример чанка «filters_outerTpl» здесь:
 +/​core/​components/​tag_manager/​elements/​chunks/​outerTpl_multicurrency.tpl
 +
 +Множественные значения
 +
 +Если нужно сделать возможность задавать множественные значения для параметра,​ нужно создать TV параметр с типом ввода «Флажки (checkbox)» или «Список (множественный выбор)».
 +Поле «Возможные значения» заполнить по такому принципу:​
 +
 +акция==#​акция#​||лидер продаж==#​лидер продаж#​||новинка==#​новинка#​
 +
 +Разделитель "#"​ можно изменить в конфигурации компонента — tag_mgr.guard_key.
 +
 +Имена таких TV нужно указать в скрипте filters.js в массиве
 +'​multitags':​ ['​tag'​]
 +
 +— Для множественных значений,​ созданных через тип ввода «param-edit»,​ если используется MIGX для создания таблицы БД товаров,​
 +в настройках поля (в MIGX) указать:​
 +Input TV = param1 (param1 — название TV с типом ввода «param-edit»)
 +Input TV type = param-edit
 +
 +Для MIGX 2.5.8 указание «Input TV» при использовании не стандартных типов ввода обязательно. Возможно в будущих версиях это будет исправлено.
 +
 +Плагин tmRefresh
 +
 +Для автоматического обновления списка фильтров при обновлении данных товара,​ нужно включить плагин «tmRefresh».
 +
 +Упрощённая фильтрация
 +
 +Прилагается JS-скрипт assets/​components/​tag_manager/​js/​web/​filters_simple.js.
 +Данный скрипт отмечает активные элементы фильтрации (значения селектов,​ чекбоксы). Настроить его можно, открыв исходный код.
 +
 +Подключить перед вызовом сниппета «catalogFilters».
 +
 +<script src="/​assets/​components/​tag_manager/​js/​web/​filters_simple.js"​ type="​text/​javascript"></​script>​
 +
 +
 +
 +Пример строки фильтрации:​
 +
 +?​sortby=price&​sortdir=asc&​f_parent[]=10&​f_size[]=1&​f_price[from]=21398&​f_price[to]=35000
 +
 +Пример формы для фильтрации:​
 +
 +<div id="​filters">​
 +    <form action="​[[~[[*id]]]]"​ method="​get">​
 +    <select name="​f_type">​
 +            <option value=""​ selected="​selected">​Пол</​option>​
 +            <option value="​1">​Мужские</​option>​
 +            <option value="​2">​Женские</​option>​
 +        </​select>​
 +        <select name="​f_parent"​ id="​model">​
 +            <option value=""​ selected="​selected">​Модель</​option>​
 +            <option value="​10">​Бренд 1</​option>​
 +            <option value="​11">​Бренд 2</​option>​
 +            <option value="​12">​Бренд 3</​option>​
 +        </​select>​
 +        <div>
 +            <label for="​f_price_from">​от</​label>​
 +            <input type="​text"​ id="​f_price_from"​ name="​f_price[from]"​ value="​0"​ />
 +            <label for="​f_price_to">​до</​label>​
 +            <input type="​text"​ id="​f_price_to"​ name="​f_price[to]"​ value="​35000"​ />
 +        </​div>​
 +        <input type="​submit"​ value="​Подобрать"​ />
 +    </​form>​
 +</​div>​
 +
 +
 +
 +У имен полей фильтрации должен быть префикс «f_». Т.е. если имя поля «f_type», то искаться будет значение доп.поля (TV) с именем «type».
 +Для задания пределов цены использовать массивы с ключами «from» (от) и «to» (до).
 +Поле «f_parent» — поиск по ID родителя.
 +
 +Для поиска подстроки использовать ключ «like». Пример URL: ?&​f_tags[like]=новинка
 +
 +Для вывода товаров использовать сниппет «tmGetProducts» (пример выше).
 +
 +Динамическое изменение шаблона вывода списка товаров
 +
 +На данный момент сделана готовая возможность изменения шаблона с помошью JS-скрипта /​assets/​components/​tag_manager/​js/​web/​view_switch.js.
 +Скрипт ставит куку и обновляет вывод.
 +
 +1. Добавить скрипт на страницу
 +
 +<script type="​text/​javascript"​ src="/​assets/​components/​tag_manager/​js/​web/​view_switch.js"></​script>​
 +
 +
 +
 +2. В набор параметров «getPage»,​ который используется для вывода товаров,​ добавить параметр «tpl_list» со списком шаблонов (чанков) через запятую.
 +Например:​ «product,​product_list».
 +
 +3. В тело страницы вставить ссылки для изменения вида. У элемента-контейнера должен быть id=«viewSwitch».
 +
 +Пример:​
 +
 +<span id="​viewSwitch">​
 +    Показывать:​
 +     
 +    <a rel="​nofollow"​ href="#"​ class="​active">​картинками</​a>​
 +     
 +    <a rel="​nofollow"​ href="#">​списком</​a>​
 +</​span>​
  
tagmanager.txt · Последние изменения: 2016/04/23 15:44 (внешнее изменение)