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

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


tagmanager

Фильтрация и управление фильтрами (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/).

Пример вызова:

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:

— Для вывода товаров использовать сниппет «tmGetProducts». Требуются сниппеты getProducts и getPage.

Пример вызова сниппета:

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

  <select style="width:168px;" id="showLimit">
      <option value="4" selected="selected">Показывать по 4</option>
      <option value="10">Показывать по 10</option>
      <option value="20">Показывать по 20</option>
  </select>
  Сортировать по: 
  <a class="active" href="[[~[[*id]]]]?sortby=pagetitle&sortdir=desc">названию<span>↓</span></a>
   
  <a href="[[~[[*id]]]]?sortby=price&sortdir=asc">цене</a>

<br />

<a name=«products» id=«pageAnchor»></a>

<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` &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 Пример формы для фильтрации:

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

У имен полей фильтрации должен быть префикс «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». Пример: Показывать: <a rel=«nofollow» href=«#» class=«active»>картинками</a> <a rel=«nofollow» href=«#»>списком</a>

tagmanager.txt · Последние изменения: 2016/04/23 15:44 (внешнее изменение)