В поисках верного пути: как фасетная навигация влияет на SEO (перевод). PINQ - Опрашиваемые наборы данных
Встроенный фасетный поискВстроен в продуктВстроенный в интернет-магазин фасетный поиск - внутренний поиск - работает быстро по многим параметрам и не нагружает при этом систему.
- Встроен в продукт
- Очень быстрый
- Не нагружает сайт
- Является основной частью API инфоблоков
- Не требует переделки сайтов
- Автоматически переиндексируется
Клиенту моментально выводится заранее подготовленные результаты поиска - по любой комбинации параметров - фасете. Система заранее просчитывает фасеты для товара - всевозможные пересечения этих свойств в фильтре. Эти готовые поисковые наборы потом выдаются клиентам.
Почему не нагружает сайт?
В момент выдачи результата клиенту не происходит никаких вычислений, потому что результат уже готов. Фасета для нового товара создается сразу же при добавлении его в торговый каталог. Поиск автоматически переиндексируется в зависимости от новых товаров и новых свойств.
Преимущества для клиентов
Преимущества фасетного поиска Ваш клиент очень быстро находит товар, легко играя настройками фильтра. Клиент не ждет и моментально получает результат. Скорость поиска не зависит от количества элементов в каталоге.
«Умный» фильтр 2.0
Ваш клиент очень быстро находит товар, последовательно сужая поисковый запрос. И на каждом шаге он моментально получает результаты - список товаров по запросу. Ему не нужно ждать, пока его запрос обработается. Потому что система заранее просчитала все возможные варианты, и просто выдает заготовки. Постепенно интернет-магазин выдает в качестве результатов все меньше товаров. Эти товары все ближе подходят под запрос покупателя.
Интерактивность и многомерность
Выбор товара для покупателя напоминает игру. Клиент перетаскивает позунки параметров (цена, вес), переключает свойства (цвет, размер), задает дополнительные условия (бренд, материал, вкус и т.д.), - и система немедленно перестраивает результаты. При этом настраиваемых параметров может быть сколько угодно - их количество не сказывается на скорости формирования результата.
Удобство и дружелюбность
С фасетной навигацией даже неопытный пользователь легко подберет себе товар в магазине. Манипулировать инструментами поиска очень удобно. К тому же система подсказывает покупателю все параметры, по которым он может выбирать товар. Магазин как бы демонстрирует клиенту основные свойства товара.
Клиент не ждет обработки запроса!
Например, ваш клиент покупает фотоаппарат. Первоначально он указывает в умном фильтре всего 3 параметра: цена, бренд, размер. Его фасета включает 3 пересечения, результатов поиска много, но клиент их получает немедленно. Клиент задает вес - ему нужен легкий гаджет. Система тут же, без задержки выдает ему меньший список товаров. Клиент задает размер экрана, потом уточняет нужный функционал. Перед ним - искомые товары.
Скорость поиска
Скорость поиска имеет значение Скорость поиска влияет на число совершаемых покупокНичто так не выводит клиента из себя, как проблемы с поиском товаров на вашем сайте. Клиент уйдет в другие магазины, если будет искать слишком долго. Даже если ваш магазин содержит большой выбор товаров и множество инструментов для их фильтрации. Клиент может не дождаться результатов по запросу.
Видеооурок: Почему фасетный поиск ускоряет умный фильтр в разы
Использование «фасеты» на порядок ускоряет поиск внутри магазина.
При этом скорость не зависит от количества элементов в каталоге.
Почему поиск работает слишко медленно?
Поиск товара на витрине магазина может выполняться значительно дольше обычного времени загрузки страниц. Особенно при наличии большого количества товаров в магазине и свойств у этих товаров. Поисковый запрос по многим параметрам создает очень много обращений к базе данных и значительно нагружает сайт. Если клиентов и запросов много, поиск ощутимо замедляется.
- Компонент умного фильтра – в 15 раз быстрее!
- Компонент каталога – в 5 раз быстрее!
Быстро даже без «фасеты»! В продукте постоянно ведется работа над ускорением самих компонетов каталога. Сервис «Скорость сайта» показывает значительное повышение скорости от версии к версии!
Реконструкция
Выполняется постоянная реконструкция индексации и выдачи поиска. Перерабатывается и ускоряется алгоритм индексации контента. Повышается качество представления результатов поиска - в частности, снижается «зашумленность». В планах разработчиков - выводить в результатах поиска персонализированные данные для текущего клиента.
Разработчкам: прозрачность для API
Прежний вид
- Ускорение метода CIBlockElement::GetList
- Полная интеграция с умным фильтром
Полная интеграция с умным фильтром
Теперь, выполняя настройки в административной части, для свойств товаров можно не только проставить активность - участвовать или нет в умном фильтре. Передавая свойство в Умный фильтр, вы можете сразу же выбрать вариант их отображения. В каком виде показывать свойство клиентам: кнопки, размеры, ползунки, выпадающие списки, списки с выбором цвета и т.д.
Показывать свойство в Умном фильтре
Умный фильтр стал выглядеть красивее. Разработчики могут легко кастомизировать и настраивать дополнительно его внешний вид.
Умный фильтр или Фасетный поиск – это фильтр по категориям товара, которую можно видеть в крупных интернет магазинах и том же яндекс.маркете. Он помогает последовательно сортировать товары с нужными пользователю свойствами, отсеявая все лишнее. Это очень удобная опция, позволяющая быстро найти нужный товар или материал на сайте.
И так давайте перейдем непосредственно к установке и настройке нужных нам модулей
Для начала нам понадобятся скачать и установить следующие модули: Search API , Search API Database Search , Entity API и Views .
На странице модулей включаем:
- Search API
- Search views
- Database search
- Entity API
- Views
- Views UI
- Ctools
Идем в Конфигурация > Поиск и метаданные >
Search API
(/admin/config/search/search_api) и нажимаем Добавить сервер
.
Затем вводим имя сервера, в выпадающем списке Класс сервиса (Service class)
выбираем Database service
и сохраняем.
Идем в Конфигурация > Поиск и метаданные >
Search API
(/admin/config/search/search_api), жмем Добавить сервер
(Add index)
.
Вводим название индекса, в поле Тип элемента
(Item type)
выбираем ‘Материал
‘, в поле Сервер
выбираем Database server
, жмем Создание индекс.
В открывшейся форме отмечаем галочками поля, по которым будет производится сортировка, и сохраняемся.
Чтобы можно было делать сортировку по названию ноды, включаем title и напротив него в выпадающем списке выбираем тип string
, а не fulltext
. По fulltext сортировку делать нельзя.
В следующей открывшейся форме Фильтры
(workflow) я оставил все по умолчанию, переходим на вкладку Просмотр
(Status
), и нажимаем Индексировать сейчас
(Index Now
).
После завершения индексации, создадим страницу поиска.
Идем в Structure > Views
и жмем Добавить новое представление
(Add new view)
.
В новом представление в выпадающем списке Показать
(Show)
выбираем ранее созданный нами индекс, остальные поля (название, title и путь) заполняете так как вам нужно.
Далее нажимаем Сохранить и настроить
(Continue & edit),
настраиваем представление как обычно. В критериях фильтрации я добавил показ только опубликованных материалов и нужный тип node и настроил отображение необходимых полей (нужно добавить эти поля в индекс, чтобы иметь возможность фильтровать по ним).
На данном этапе с настройкой представления мы закончили, теперь перейдем непосредственно к фасетному фильтру.
A/search_api_ranges.module +++ b/search_api_ranges.module @@ -144,11 +144,8 @@ function search_api_ranges_minmax($variables, $order = "ASC") { // otherwise our min/max would always equal user input. $filters = &$query->getFilter()->getFilters(); foreach ($filters as $key => $filter) { - - // Check for array: old style filters are objects which we can skip. - if (is_array($filter)) { - if ($filter == $variables["range_field"] || ($filter != $variables["range_field"] && $filter == "")) { - $current_filter = $filters[$key]; + if(isset($filter->tags) && is_array($filter->tags)){ + if(in_array("facet:".$variables["range_field"], $filter->tags)){ unset($filters[$key]); } }
Патчим JQuery UI Slider: настраиваем редиректВ версии модуля 7х-1.5 я столкнулся с тем, что если виджет слайдера расположен на странице, отличной от страницы поиска, то после изменения диапазона цены проиходило пере направление на текущую страницу, а не на страницу поиска.
Ошибка кроется в функии search_api_ranges_block_slider_view_form_submit()
(файл search_api_ranges.module, строка 364).
Я не стал особо разбираться, что там и зачем, просто немного изменил код в строке 427:
Drupal_goto($path, array("query" => array($params), "language" => $language)); + drupal_goto($values["path"], array("query" => array($params), "language" => $language));
после чего проблема решилась.
В сегодняшнем уроке мы с вами попробуем воссоздать имитацию фасетного (фасеточного) поиска средствами Javascript. Я подразумеваю, что вы уже знаете что такое фасетный поиск, раз читаете данный туториал, в противном случае погуглите или загляните на Amazon или мою Демку .
Для начала нам понадобится библиотека github.com/eikes/facetedsearch. Скачайте её и подключите файл facetedsearch.js к нашему проекту. Так же нам понадобятся библиотеки jQuery и Underscore.
Дисклеймер: Я понимаю, что JQ уже давно не торт, но использую его как привычный синтаксический сахар, вы можете перепилить это под более привычные вам библиоетки или на ванильном JS.
Итак для начала сделаем простенькую разметку с подключенными зависимостями:
Document // Сюда мы выведем фасетные фильтры // А тут будут наши элементы
Теперь нам нужно описать настройки нашего приложения и создать шаблон вывода элементов массива которые мы будем сортировать при помощи фасетов:
$(function(){
var item_template = // Описывем шаблон
"" +
"
Ну и собственно создать сам JSON массив с элементами для отображения в нашем фасетном поиске на JS:
Var items = [ { "firstname": "Mary", "lastname": "Smith", "imageURL": "http://lorempixel.com/150/150/cats/2", "description": "Sed Ea Amet. Stet Voluptua. Nonumy Magna Takimata ", "category": "Mouse", "language": ["Smalltalk", "XSLT"], "continent": "Africa" }, { "firstname": "Patricia", "lastname": "Johnson", "imageURL": "http://lorempixel.com/150/150/cats/3", "description": "Ut Takimata Sit Aliquyam Labore Aliquyam Sit Sit Lorem Amet. Ipsum Rebum. ", "category": "Lion", "continent": "North America" }, ... ];
Данный массив я бы вынес в отдельный JS файл который бы формировался динамически, из БД например.
Вот собственно и всё, мы получаем фасетный поиск на JavaScript и можем его кастомизировать. Далее я привожу переведённую документации библиотеки, где вы можете подсмотреть необходимые вам триггеры.
Документация ФункцииДве функции экспортируются в пространство имен jQuery.
facetelize Используется для инициализации фасетного поиска с заданными настройками.
facetUpdate Может использоваться, если вы хотите изменить состояние фасетного поиска извне.
Настройки объектовitems: Массив элементов, которые будут отфильтрованы и отсортированы в процессе.
facets: Объект, для которого ключи соответствуют ключам элементов и значениям, является заголовком для этого фасета. Элементы будут отфильтрованы на основе того, какое значение они имеют для этих ключей.
orderByOptions: Подобно фасетам, за исключением того, что эти пары «ключ-значение» используются только для сортировки. Когда ключ RANDOM включен, результаты могут быть рандомизированы.
facetSelector: Это селектор, который используется для поиска DOM-узла, из которого выбираются фильтры фасетов.
resultSelector: Это селектор, который используется для поиска DOM-узла, где отображаются результаты.
resultTemplate: Строка, которая используется Underscore шаблонизатором Для рендеринга каждого элемента из массива items . Следующие атрибуты добавляются к каждому элементу, который также можно использовать в шаблоне: batchItemNr , batchItemCount и totalItemCount .
state: Этот объект сохраняет текущие фильтры, сортирует: currentResult и прочие. Вы можете предоставить строку orderBy или объект filters для их предварительной настройки.
enablePagination: Boolean для включения пагиналора и кнопи "load more", по умолчанию true .
paginationCount: Если включен пагинатор, задаёт количество элементов на страницу, по умолчанию - 50.
facetSortOption: Используйте эту функцию, чтобы изменить порядок элементов фасетов. Принимает объект, в котором ключи соответствуют именам фасетов и значениям в массив значений фасетов, которые могут быть расположены в том порядке, в котором вы хотели бы их видеть. В этом примере будут отсортированы континенты в другом порядке, элементы, не включенные в массив, будут добавлены в алфавитном порядке:
FacetSortOption: {"continent": ["North America", "South America"]}
Есть еще несколько шаблонов, пожалуйста, посмотрите исходный код facetedsearch.js , чтобы увидеть все доступные параметры шаблона.
СобытияВы можете привязываться к некоторым событиям, которые должны отправить уведомления, когда произошли некоторые действия. Для этого используем систему событий jquery:
facetuicreated: Вы можете привязать эту функцию к DOM элементу settings.facetSelector который должен быть уведомлен, когда пользовательский интерфейс был создан.
facetedsearchresultupdate: Вы можете привязать эту функцию к DOM элементу settings.resultSelector что бы получить уведомление о результатах обновления.
facetedsearchfacetclick: Это событие вызывается при щелчке фасета и его срабатывании на settings.facetSelector элементе. Который получает идентификатор фасета как аргумент.
facetedsearchorderby: Это событие вызывается при щелчке элемента сортировки по элементу settings.facetSelector. Он получает ID order в качестве аргумента.
$(settings.resultSelector).bind("facetedsearchresultupdate", function(){ // do something, maybe });
{ "query": { "and": [ { "terms": {"country": ["be", "fr"]} }, { "terms": {"category": ["books", "movies"]} } ] } }
Для счетчиков мы можем использовать встроенные агрегаты из Elasticsearch. Каждый из двух фасетов хранится как одно поле в индексе, поэтому мы можем использовать агрегирование терминов в каждом из этих полей. Агрегация вернет счетчик за значение этого поля.
{ "query": { "and": [ { "terms": {"country": ["be", "fr"]} }, { "terms": {"category": ["books", "movies"]} } ] }, "aggregations": { "countries": { "terms": {"field": "country"} }, "categories": { "terms": {"field": "category"} } } }
Если бы вы выполнили этот запрос, вы заметите, что счетчики отключены. В двух не отобранных странах, в Португалии и Бразилии, есть счетчик 0. Хотя есть фактические результаты, если мы хотим их выбрать (из-за ORвнутренней грани). Это происходит потому, что по умолчанию Elasticsearch выполняет свои агрегирования в результирующем наборе. Это означает, что если вы выберете Францию, фильтры другой страны будут иметь счет 0, потому что в результирующем наборе содержатся только элементы из Франции.
Чтобы исправить это, нам нужно дать команду Elasticsearch выполнить агрегацию во всем наборе данных, игнорируя запрос. Мы можем сделать это, определив наши скопления как глобальные.
{ "query": { "and": [ { "terms": {"country": ["be", "fr"]} }, { "terms": {"category": ["books", "movies"]} } ] }, "aggregations": { "all_products": { "global": {}, "aggregations": { "countries": { "terms": {"field": "country"} }, "categories": { "terms": {"field": "category"} } } } } }
Если бы мы просто сделали это, наши счетчики всегда были бы одинаковыми, потому что они всегда будут рассчитывать на весь набор данных, независимо от наших фильтров. Наши агрегаты должны стать немного более сложными, чтобы это работало, нам нужно добавить к ним фильтры. Каждое агрегирование должно рассчитывать на набор данных со всеми применяемыми фильтрами, за исключением собственных. Таким образом, агрегация за счет во Франции рассчитывает на набор данных с применением фильтра категории, но не фильтр стран:
{ "query": { "and": [ { "terms": {"country": ["be", "fr"]} }, { "terms": {"category": ["books", "movies"]} } ] }, "aggregations": { "all_products": { "global": {}, "aggregations": { "countries": { "filter": { "and": [ { "terms": {"category": ["books","movies"]} } ] }, "aggregations": { "filtered_countries": { "terms": {"field": "country"} } } }, "categories": { "filter": { "and": [ { "terms": {"country": ["be","fr"]} } ] }, "aggregations": { "filtered_categories": { "terms": {"field": "category"} } } } } } } }
{ "took": 153, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 3, "max_score": 0, "hits": ["..."] }, "aggregations": { "all_products": { "doc_count": 21, "filterted categories": { "doc_count": 13, "categories": { "doc_count_error_upper_bound": 0, "sum_other_doc_count": 0, "buckets": [ { "key": "movies", "doc_count": 6 }, { "key": "music", "doc_count": 4 }, { "key": "books", "doc_count": 3 } ] } }, "filtered_countries": { "doc_count": 15, "countries": { "doc_count_error_upper_bound": 0, "sum_other_doc_count": 0, "buckets": [ { "key": "fr", "doc_count": 6 }, { "key": "br", "doc_count": 4 }, { "key": "be", "doc_count": 3 }, { "key": "pt", "doc_count": 2 } ] } } } } }
Yii2 framework $terms = QueryHelper:: terms ("categories.name" , "my category" ) ; $nested = QueryHelper:: nested ("string_facet" , QueryHelper:: filter ([ QueryHelper:: term ("string_facet.facet_name" , [ "value" => $id , "boost" => 1 ] ) , QueryHelper:: term ("string_facet.facet_value" , [ "value" => $value , "boost" => 1 ] ) , ] ) ) ; $filter = QueryHelper:: should ($nested ) ;Современный человек старается тратить на покупки все меньше времени. Медленные каталоги товаров отталкивают покупателей, магазин теряет клиентов и часть прибыли. Сделайте свой интернет-магазин привлекательнее вместе с технологией фасетного Фасетный - т.е. предопределенный. поиска. Создайте фасетные индексы и значительно ускорьте поиск товаров и работу всего каталога.
Примечание: Механизм фасетного поиска доступен с версии 15.0.1 модуля Информационные блоки и интегрирован с компонентом Компонент - это программный код, оформленный в визуальную оболочку, выполняющий определённую функцию какого-либо модуля по выводу данных в Публичной части. Мы можем вставлять этот блок кода на страницы сайта без непосредственного написания кода. Умный фильтр Компонент подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов. Компонент должен подключаться перед компонентом вывода элементов каталога, иначе список элементов фильтроваться не будет. Компонент стандартный, входит в дистрибутив модуля и содержит три шаблона: .default , visual_horizontal и visual_vertical . (Последние два шаблона не поддерживаются, остались для сохранения совместимости.)
В визуальном редакторе компонент расположен по пути Контент > Каталог > Умный фильтр .
Компонент относится к модулю Информационные блоки.
|
Рассмотрим на примере:
Мы заходим в интернет-магазин и в фильтре выбираем, что нам нужна футболка красного цвета:
|
Создадим фасетные индексы за несколько простых действий:
Фасетные индексы пересоздаются автоматически или требуется пересоздать их вручную в зависимости от произведенных действий:
|
Фасетный поиск улучшает работу каталога товаров. Для его использования необходимо: