В днешния урок ще се опитаме да пресъздадем симулирано фасетно (фасетно) търсене с помощта на Javascript. Искам да кажа, че вече знаете какво е фасетно търсене, като прочетете този урок, в противен случай го потърсете в Google или проверете в Amazon или моята демонстрация.

Първо имаме нужда от библиотеката github.com/eikes/facetedsearch. Изтеглете го и включете файла facetedsearch.js в нашия проект. Ще ни трябват и библиотеките jQuery и Underscore.

Опровержение:Разбирам, че JQ вече не е торта, но като го използвате като обичайна синтактична захар, можете да го нарежете на по-познати библиотеки или ванилен JS.

Така че първо, нека направим просто маркиране със свързани зависимости:

Сега трябва да опишем настройките на нашето приложение и да създадем шаблон за показване на елементи от масив, които ще сортираме с помощта на фасети:

Е, всъщност създайте самия 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 ", "категория": "Мишка", "език": ["Smalltalk", "XSLT"], "континент": "Африка" ​​), ( "първо име": "Патриша ", "lastname": "Johnson", "imageURL": "http://lorempixel.com/150/150/cats/3", "description": "Ut Takimata Sit Aliquyam Labore Aliquyam Sit Sit Lorem Amet. Ipsum Rebum ." , "категория": "Лъв", "континент": "Северна Америка"), ... ];

Даден масивБих го поставил в отделен JS файл, който да се формира динамично, от базата данни, например.

Това е всичко, получаваме фасетно търсене в JavaScript и можем да го персонализираме. След това предоставям преведената документация на библиотеката, където можете да надникнете в тригерите, от които се нуждаете.

Документация

Функции

Двете функции се експортират в пространството от имена на jQuery.

facetelize Използва се за инициализиране на фасетно търсене с дадените настройки.

facetUpdate Може да се използва, ако искате да промените състоянието на търсене на фасет отвън.

Настройки на обекта

елементи: масив от елементи, които да бъдат филтрирани и сортирани в процеса.

аспекти: Обект, чиито ключове съответстват на ключовете и стойностите на елемента, е заглавието за този аспект. Елементите ще бъдат филтрирани въз основа на това каква стойност имат за тези ключове.

orderByOptions: Подобно на фасетите, но тези двойки ключ/стойност се използват само за сортиране. Когато ключът RANDOM е активиран, резултатите могат да бъдат рандомизирани.

facetSelector: Това е селекторът, който се използва за намиране на DOM възела, от който са избрани филтрите за аспекти.

resultSelector: Това е селекторът, който се използва за намиране на DOM възела, където се показват резултатите.

resultTemplate: Низ, който се използва от машината за шаблони Underscore за изобразяване на всеки елемент от масива items. Към всеки елемент, който може да се използва и в шаблон, се добавят следните атрибути: batchItemNr, batchItemCount и totalItemCount.

състояние: Този обект запазва текущите филтри, сортира: currentResult и други. Можете да предоставите низ orderBy или обект за филтри, за да ги конфигурирате предварително.

enablePagination: Булева стойност за активиране на страница или бутон "зареждане на още", вярно по подразбиране.

paginationCount: Ако странирането е активирано, задава броя на елементите на страница, по подразбиране е 50.

facetSortOption: Използвайте тази функция, за да промените реда на фасетните елементи. Взема обект, където ключовете съответстват на имената и стойностите на фасети, в масив от стойности на фасети, които могат да бъдат подредени в реда, в който искате да ги видите. Този пример ще сортира континентите в различен ред, елементите, които не са включени в масива, ще бъдат добавени по азбучен ред:

FacetSortOption: ("континент": ["Северна Америка", "Южна Америка"])

Има още няколко шаблона, моля, вижте изходния код на facetedsearch.js, за да видите всички налични опциишаблон.

Разработки

Можете да се свържете с някои събития, които трябва да изпращат известия, когато е извършено някакво действие. За да направим това, използваме системата за събития jQuery:

facetuicreated: Можете да свържете тази функция към DOM елемента settings.facetSelector, който трябва да бъде уведомен, когато потребителският интерфейс е създаден.

facetedsearchresultupdate: Можете да свържете тази функция към DOM елемента settings.resultSelector, за да бъдете уведомени за резултатите от актуализацията.

facetedsearchfacetclick: Това събитие се задейства, когато се щракне върху фасет и се задейства върху елемента settings.facetSelector. Което получава ИД на фасет като аргумент.

facetedsearchorderby: Това събитие се задейства, когато върху елемента за сортиране се щракне върху елемента settings.facetSelector. Получава ID реда като аргумент.

$(settings.resultSelector).bind("facetedsearchresultupdate", function()( // направи нещо, може би ));

В тази статия (ниво уебмастър - напреднали), ще говорим за, пресичащи се по различни начини, т.нар. фасетна навигация. За да опростите усвояването на материала, препоръчвам да прегледате статията в Уикипедия „Класификация на аспектите“ и публикациите на английски език(но със снимки!) „Проектирайте по-добра фасетна навигация за вашите уебсайтове“.

Фасетната навигация, филтрирана по цвят или ценови диапазон, може да бъде полезна за вашите посетители, но често е вредна за търсенето, като създава множество адресни комбинации с дублирано съдържание. Поради дубликати търсачките няма да могат бързо да сканират сайта за актуализации на съдържанието, което съответно се отразява на индексирането. За да минимизираме този проблем и да помогнем на уеб администраторите да направят фасетираната навигация удобна за търсене, бихме искали да:

Идеален за потребители и търсене в Google

Ясен път към страниците с продукти/статии:

Представяне на URL адреса за страницата на категорията:
http://www.example.com/category.php?category=гумени-бонбони

Представяне на URL адрес за конкретен продукт:
http://www.example.com/product.php?item=swedish-fish

Нежелани дубликати, причинени от фасетна навигация

Една и съща страница е достъпна от различни уеб адреси:

Канонична страница

Дублирана страница

Грешки:

• Няма смисъл за Google, тъй като потребителите рядко търсят [$9:55 мармалад].
• Няма смисъл роботите да намират същия артикул („плодова салата“) от страниците на родителска категория („Gummi“ или „Sour Gummy“).
• Отрицателна точка за собственика на сайта, тъй като заявките за индексиране се разреждат с множество версии на една и съща категория.
• Отрицателна точка за собственика на сайта, защото това е безполезна и ненужна тежест честотна лентасайт

Грешки:

• Неправилно даден код за търсачки (в този случай страницата трябва да дава код 404)
• Празна страница за потребители

Най-лошите (неудобни за търсене) решения за фасетна навигация

Пример #1: В URL адреса се използват нестандартни параметри: запетаи и скоби, вместо ключ=стойност&:

• example.com/category? [ категория:гумени-бонбони ][ sort:price-low-to-high ][ sid:789 ]
• example.com/category?category, гумени бонбони, sort, lowtohigh, sid, 789

Пример #2: Използване на директории или файлови пътища вместо опции в списъци със стойности, които не променят съдържанието на страницата:
example.com/c123/s789/product?swedish-fish
(където /c123/ е категорията, /s789/ е идентификаторът на сесията, който не променя съдържанието на страницата)

Добро решение:

• example.com /гумени-бонбони/ product?item=swedish-fish&sid=789(директорията, /gummy-candy/, променя съдържанието на страницата по смислен начин)

• example.com/product?item=swedish-fish& category=гумени-бонбони&sid=789 (URL параметрите дават повече гъвкавост на търсачките, за да определят как да обхождат ефективно)

Общите стойности, които не променят съдържанието на страницата и трябва да бъдат посочени като URL параметри, включват:

• Сесиен идентификатор
• ID проследяване
• Идентификатори на референт
• Времеви отпечатъци

• example.com/find-a-doctor? радиус=15&ширина=40.7565068&дължина=-73.9668408
• example.com/article?category=health&преди дни=7

• example.com/find-a-doctor? city=san-francisco&neighborhood=soma
• example.com/articles?category=health& дата=януари-10-2014

• example.com /филтриране/ find-a-doctor?radius=15&latitude=40.7565068&longitude=-73.9668408
• example.com /филтриране/статии?category=health&days-ago=7

Пример #4. Добавяне на URL параметри без логика.

• example.com /гумени-бонбони/близалки/гумени-бонбони/гумени бонбони/продукт?шведска риба
• example.com/product? cat=гумени-бонбони&cat=близалки&cat=гумени-бонбони&cat=гумени-бонбони&item=шведска-риба

• example.com /гумени-бонбони/ product?item=swedish-fish

• example.com/product? item=swedish-fish&category=гумени-бонбони

Пример #5: Предложете допълнителни уточнения (филтриране), когато има нулеви резултати.

Зле:
Позволете на потребителите да избират филтри, когато има нулеви елементи за прецизиране.

Как да:
Създавайте връзки само когато има елементи, които потребителят да избира. Ако резултатът е нула, маркирайте връзката като "сива" (т.е. невъзможна за кликване). За да подобрите допълнително използваемостта, обмислете включването на индикатор за брой артикули до всеки филтър.

Необходимо е да се предотвратят ненужните URL адреси и да се минимизира пространството на посетителите, като се генерират URL адреси само когато продуктите са налични. Това ще помогне на потребителите да останат ангажирани с вашия сайт (по-малко кликвания върху бутона за връщане назад, когато не е намерен продукт), ще намали броя на възможните URL адреси, известни на търсачките. Освен това, ако страницата не е просто „временно изчерпана“, но е малко вероятно някога да съдържа подходяща информация, помислете дали да й дадете код за отговор 404. На страницата 404 можете да проектирате полезно съобщение за потребителите с повече опции за навигация или поле за търсене, така че потребителите да могат да намерят свързани продукти.

За нови сайтове, чиито уеб администратори обмислят внедряване на фасетна навигация, има няколко опции за оптимизиране на обхождането (съвкупността от адреси на вашия сайт, известни на Googlebot) на страници с уникално съдържание и намаляване на индексирането от търсачката на дублиращи се страници (консолидиране на сигнали за индексиране).

Определете какви URL параметри са необходими на търсачките, за да обхождат всяка отделна страница със съдържание (т.е. определете какви параметри са необходими, за да създадете поне един път на кликване до всеки елемент). Задължителните параметри могат да включват item-id, category-id, page и др.

Определете кои параметри ще бъдат полезни за посетителите с техните заявки и кои е по-вероятно да причинят дублиране при обхождане и индексиране. В примера със сладкарски изделия (мармалад) URL параметърът „вкус“ може да бъде полезен за потребителите със заявките в примера вкус=кисел . Логично е обаче параметърът "цена" да се счита за причиняващ ненужно дублиране категория=гумени-бонбони&вкус=кисело& цена=над-10 . Други често срещани примери:

• Ценни параметри за търсачките: item-id, category-id, name, brand ...
• Ненужни параметри: идентификатор на сесията, ценови диапазон ...

Вариант 1: и вътрешни връзки

Маркирайте всички ненужни URL адреси с . Това ще намали разходите за труд робот за търсенеи предотвратяване на спад на скоростта на сканиране. Трябва да управлявате глобално обхождането чрез robots.txt (Бележка на преводача: вижте статията „“).
Използвайте атрибута rel="canonical", за да отделите страниците за индекса за търсене от страниците, които не са необходими там (например на страницата цена=5-10 можете да напишете атрибута rel="canonical", указващ категорията на всички кисели мармалади example.com/category.php?category=гумени-бонбони&вкус=кисел& страница=всички ).

Вариант 2: Robots.txt и Disallow

URL адресите с ненужни параметри се включват в директорията /filtering/, която ще бъде затворена в robots.txt (забрана disallow). Това ще позволи на всички търсачки да обхождат само "правилната" вътрешна връзка (съдържание) на сайта, но ще блокират обхождането на нежелани URL адреси наведнъж. Например ( example.com/category.php?category=гумени-бонбони), ако ценните параметри са артикул, категория и вкус, а идентификаторът на сесията и цената са излишни, тогава URL адресът за вкус ще бъде:
example.com/category.php?category=гумени-бонбони& вкус=кисел, но всички ненужни параметри, като например цена, URL ще включва в предварително дефинирана директория - /филтриране/:
example.com /филтриране/ category.php?category=гумени-бонбони&price=5-10,
който след това ще бъде забранен чрез robots.txt:
Потребителски агент: *
Disallow: /филтриране/

Вариант 3: Отделни хостове

Уверете се, че най-добрите решения, изброени по-горе (например за ненужни адреси) все още се прилагат. Иначе търсачките вече са формирали голяма линк маса в индекса. Така вашата работа ще бъде насочена към намаляване на по-нататъшния растеж. ненужни страницигледано с робот на googleи консолидиране на индексиращи сигнали.

Използвайте параметри със стандартно кодиране и формат ключ=стойност.

Уверете се, че стойностите, които не променят съдържанието на страницата, като идентификатори на сесии, са внедрени като ключ=стойност, а не като директории.

Не позволявайте кликвания и не генерирайте URL адреси, когато няма елементи за филтриране.

Добавете логика към съпоставянето на URL параметри: премахнете ненужните параметри, вместо да добавяте стойности през цялото време (напр. избягвайте генерирането на връзка като тази: example.com/product?cat=gummy-bonbon&cat=lollipops &cat=gummy-candy&item=swedish-fish).

Съхранявайте ценни параметри в URL адреса, като ги посочите първи (тъй като URL адресите се виждат в резултатите от търсенето) и по-малко подходящи параметри накрая (като ID на сесията).
Избягвайте тази структура на връзката: example.com/category.php? session-id=123&tracking-id=456&category=гумени-бонбони&вкус=кисел
Коригирайте URL настройките в Инструменти за уеб администратори, ако имате ясна представа как работят връзките на вашия сайт.

Уверете се кога използвайки JavaScriptза динамичен контролсъдържание (сортиране/филтриране/скриване) без актуализиране на URL адреса, на вашия сайт има реални уеб адреси, които имат стойност за търсене, като основните категории и продуктови страници, които могат да се обхождат и индексират. Опитайте се да не използвате само начална страница(т.е. един URL) за целия ви сайт и чрез JavaScript за динамична промяна на съдържанието на навигацията - това, за съжаление, ще даде на потребителите само един URL адрес в търсенето. Също така се уверете, че производителността не се влияе от динамичното филтриране най-лошата страна, тъй като ще попречи на потребителя да работи със сайта.

Подобрете индексирането на различни страници с едно и също съдържание, като посочите атрибута rel="canonical" на привилегированата версия на страницата. Атрибутът rel="canonical" може да се използва в рамките на един или повече домейни.

Оптимизирайте индексирането на "страницирано" съдържание (напр. page=1 и page=2 от категорията "гумени бонбони") чрез (или):

• Добавете атрибут rel="canonical" към поредица от страници, като посочите каноничната категория с параметъра "view-all" (напр. page=1, page=2 и page=3 от категорията "гумени бонбони" с rel=” каноничен” на категория=гумени-бонбони&страница=всички), като се уверите, че страницата е подходяща за потребителите и се зарежда бързо.
• Използвайте маркиране на страници rel="next" и rel="prev", за да посочите връзката между отделните страници (вижте "Пагинация с rel="next" и rel="prev" ").