PINQ – Interogated datasets. Fazetové vyhľadávanie

Zabudované fazetové vyhľadávanie Zabudované do produktu

Fazetové vyhľadávanie zabudované do internetového obchodu – interné vyhľadávanie – funguje v mnohých ohľadoch rýchlo a nezaťažuje systém.

  • Zabudované do produktu
  • Veľmi rýchlo
  • Nenačítava web
  • Je hlavnou súčasťou API infoblokov
  • Nevyžaduje redizajn webovej stránky
  • Automaticky preindexované
Prečo tak rýchlo?

Klientovi sú okamžite prezentované vopred pripravené výsledky vyhľadávania - pre akúkoľvek kombináciu parametrov - aspekt. Systém vopred vypočíta fazety produktu - všetky možné priesečníky týchto vlastností vo filtri. Tieto hotové vyhľadávacie sady sú potom vydávané klientom.

Prečo sa stránka nenačítava?

V momente, keď je výsledok vystavený klientovi, nedochádza k žiadnym výpočtom, pretože výsledok je už pripravený. Fazeta pre nový produkt sa vytvorí ihneď po pridaní do predajného katalógu. Vyhľadávanie sa automaticky preindexuje na základe nových produktov a nových vlastností.

Výhody pre klientov

Výhody fazetového vyhľadávania Váš klient nájde produkt veľmi rýchlo, jednoducho sa pohrá s nastavením filtra. Klient nečaká a výsledky má okamžite. Rýchlosť vyhľadávania nezávisí od počtu položiek v katalógu.


Inteligentný filter 2.0

Zákazník rýchlo nájde tovar

Váš klient nájde produkt veľmi rýchlo dôsledným zužovaním vyhľadávacieho dopytu. A na každom kroku okamžite dostáva výsledky - zoznam produktov na požiadanie. Nemusí čakať na vybavenie jeho žiadosti. Pretože systém vopred vypočítal všetko možné možnosti a jednoducho vydáva prázdne miesta. Postupne internetový obchod ako výsledky zobrazuje čoraz menej produktov. Tieto produkty sú čoraz bližšie k požiadavke kupujúceho.

Interaktivita a viacrozmernosť

Výber produktu pre kupujúceho je ako hra. Klient ťahá posuvníky parametrov (cena, hmotnosť), prepína vlastnosti (farba, veľkosť), množiny dodatočné podmienky(značka, materiál, chuť atď.) – a systém okamžite prestaví výsledky. V tomto prípade môže byť toľko prispôsobiteľných parametrov, koľko chcete - ich počet neovplyvňuje rýchlosť generovania výsledku.

Pohodlie a priateľskosť

Vďaka fazetovej navigácii si v obchode ľahko vyberie produkt aj neskúsený používateľ. Manipulácia s vyhľadávacími nástrojmi je veľmi pohodlná. Okrem toho systém vyzve kupujúceho so všetkými parametrami, podľa ktorých si môže vybrať produkt. Obchod, ako to bolo, demonštruje klientovi hlavné vlastnosti produktu.

Klient nečaká na vybavenie žiadosti!
Váš klient si napríklad kúpi fotoaparát. Spočiatku v inteligentnom filtri uvádza iba 3 parametre: cenu, značku, veľkosť. Jeho fazeta zahŕňa 3 križovatky, výsledkov vyhľadávania je veľa, ale klient ich dostane okamžite. Klient si nastaví váhu – potrebuje odľahčenú vychytávku. Systém mu okamžite, bez meškania, dá menší zoznam tovaru. Klient nastaví veľkosť obrazovky a potom špecifikuje požadovanú funkčnosť. Pred ním je požadovaný tovar.


Rýchlosť vyhľadávania

Na rýchlosti vyhľadávania záleží Rýchlosť vyhľadávania ovplyvňuje počet uskutočnených nákupov

Nič nedráždi zákazníka viac ako problém nájsť produkty na vašej webovej stránke. Klient odíde do iných obchodov, ak bude hľadať príliš dlho. Aj keď váš obchod obsahuje veľký výber produkty a mnoho nástrojov na ich filtrovanie. Klient nemusí dostať výsledky z požiadavky.


Videonávod: Prečo fazetové vyhľadávanie výrazne zrýchľuje inteligentný filter
Použitie „fazety“ zrýchľuje vyhľadávanie v obchode o rád. V tomto prípade rýchlosť nezávisí od počtu prvkov v adresári.

Prečo je vyhľadávanie také pomalé?
Hľadanie produktu vo výklade môže trvať podstatne dlhšie ako bežné časy načítania stránky. Najmä ak je v predajni veľké množstvo produktov a vlastnosti týchto produktov. Vyhľadávací dopyt v mnohých ohľadoch vytvára množstvo databázových volaní a výrazne zaťažuje stránku. Ak je klientov a požiadaviek veľa, vyhľadávanie sa výrazne spomalí.

Rýchlosť práce je pôsobivá! Výsledky testov verzie 15.0 produktu na troch kategóriách katalógov obsahujúcich 500 tisíc položiek ukázali, že v porovnaní s predchádzajúcimi verziami:
  • Inteligentný komponent filtra – 15-krát rýchlejší!
  • Katalógový komponent – ​​5-krát rýchlejšie!
Inteligencia vyhľadávania zostáva konštantná!
Rýchlo aj bez „fazety“! Produkt neustále pracuje na zrýchlení samotných katalógových komponentov. Služba „Site Speed“ vykazuje výrazné zvýšenie rýchlosti z verzie na verziu!

Rekonštrukcia

Vykonáva sa neustála rekonštrukcia indexovania a výsledkov vyhľadávania. Algoritmus indexovania obsahu sa prepracúva a zrýchľuje. Zlepšuje sa kvalita prezentácie výsledkov vyhľadávania - najmä sa znižuje „šum“. Vývojári plánujú zobrazovať personalizované údaje pre aktuálneho klienta vo výsledkoch vyhľadávania.

Pre vývojárov: API Transparency


Predchádzajúce zobrazenie

„Facet“ je transparentný pre API „Fazeta“ zabudovaná do produktu je transparentná pre API. Je hlavnou súčasťou API infoblokov. Preto jeho používanie nevyžaduje od vývojárov ďalšie úsilie. Taktiež nie je potrebné redizajnovať stránky.
  • Zrýchlenie metódy CIBlockElement::GetList
  • Plná integrácia s inteligentným filtrom
GetList teraz funguje rýchlejšie, pretože k fungovaniu automaticky pripája „fazetu“. Na D7 je aj samostatné API.

Plná integrácia s inteligentným filtrom

Teraz, keď robíte nastavenia v administratívnej časti, pre vlastnosti produktu môžete nielen uviesť aktivitu - či sa zúčastniť alebo nie v inteligentnom filtri. Odovzdaním vlastnosti do inteligentného filtra si môžete okamžite vybrať, ako sa má zobraziť. V akej forme sa má nehnuteľnosť klientom zobrazovať: tlačidlá, veľkosti, posuvníky, rozbaľovacie zoznamy, zoznamy s výberom farieb atď.



Zobraziť vlastnosť v inteligentnom filtri

Dá sa prispôsobiť!

Inteligentný filter teraz vyzerá krajšie. Vývojári si môžu jednoducho prispôsobiť a ďalej upravovať jeho vzhľad.

Zbežne sme sa pozreli na inštaláciu a základnú syntax PINQ, portu LINQ do PHP. V tomto článku sa pozrieme na to, ako použiť PINQ na simuláciu funkcie fazetového vyhľadávania v MySQL.

V tomto článku sa nebudeme zaoberať všetkými aspektmi fazetového vyhľadávania. Záujemcovia si môžu vyhľadať vhodné informácie na internete.

Typické fazetové vyhľadávanie funguje takto:

  • Používateľ zadá kľúčové slovo alebo niekoľko kľúčových slov na vyhľadávanie. Napríklad „smerovač“ na vyhľadávanie produktov, v ktorých sa slovo „smerovač“ vyskytuje v popise, kľúčových slovách, názve kategórie, štítkoch atď.
  • Stránka vráti zoznam produktov, ktoré zodpovedajú týmto kritériám.
  • Stránka poskytuje niekoľko odkazov na prispôsobenie hľadaných výrazov. Môže vám napríklad umožniť určiť konkrétnych výrobcov smerovačov alebo nastaviť cenové rozpätie či iné funkcie.
  • Používateľ môže pokračovať v zadávaní ďalších kritérií vyhľadávania, aby získal súbor údajov, ktorý ho zaujíma.

Fazetové vyhľadávanie je pomerne populárny a výkonný nástroj, ktorý možno vidieť na takmer každej webovej stránke elektronického obchodu.

Bohužiaľ, fazetové vyhľadávanie nie je zabudované do MySQL. Čo by sme teda mali robiť, ak stále používame MySQL, ale chceme dať používateľovi túto príležitosť?

Pomocou PINQ, ktorý má podobný, výkonný a jednoduchý prístup, môžeme dosiahnuť rovnaké správanie, ako keby sme používali iné databázové nástroje.

Rozšírenie ukážky z prvého dielu

Poznámka: všetok kód z tejto časti a z prvej časti možno nájsť v úložisku.

V tomto článku rozvinieme ukážku z 1. časti s výrazným vylepšením v podobe fazetového vyhľadávania.

Začnime s index.php a pridáme k nemu nasledujúce riadky:

$app->get("demo2", function () use ($app) (global $demo; $test2 = new pinqDemo\Demo($app); return $test2->test2($app, $demo->test1) ($app)); $app->get("demo2/facet/(key)/(value)", funkcia ($key, $value) use ($app) (global $demo; $test3 = new pinqDemo\Demo($app); return $test3->test3($app, $demo->test1($app), $key, $value ));

Prvá trasa nás zavedie na stránku, kde sa zobrazia všetky záznamy, ktoré zodpovedajú vyhľadávaniu podľa kľúčové slovo. Aby bol príklad jednoduchý, vyberieme všetky knihy z tabuľky kniha_kniha. Zobrazí tiež výsledný súbor údajov a súbor odkazov na určenie kritérií vyhľadávania.

V reálnych aplikáciách sa po kliknutí na takéto odkazy všetky fazetové filtre prispôsobia hraničným hodnotám výsledného súboru údajov. Používateľ tak bude môcť postupne pridávať nové podmienky vyhľadávania, napríklad najprv vybrať výrobcu, potom určiť cenové rozpätie atď.

V tomto príklade však toto správanie neimplementujeme – všetky filtre budú odrážať hraničné hodnoty pôvodnej množiny údajov. Toto je prvé obmedzenie a prvý kandidát na zlepšenie v našom deme.

Ako môžete vidieť v kóde vyššie, skutočné funkcie sa nachádzajú v inom súbore s názvom pinqDemo.php. Poďme sa pozrieť na zodpovedajúci kód, ktorý poskytuje funkciu fazetového vyhľadávania.

Trieda aspektov

Prvým krokom je vytvorenie triedy, ktorá predstavuje aspekt. Vo všeobecnosti by aspekt mal obsahovať niekoľko vlastností:

  • Dáta, s ktorými pracuje ($data)
  • Kľúč, ktorým sa zoskupovanie vykonáva ($key)
  • Typ kľúča ($type). Môže to byť jedna z nasledujúcich možností:
    • zadajte celý reťazec pre presnú zhodu
    • označte časť reťazca (zvyčajne počiatočnú) na vyhľadávanie podľa vzoru
    • uveďte rozsah hodnôt na zoskupenie podľa rozsahu
  • ak je typ kľúča rozsah hodnôt, musíte definovať hodnotový krok na určenie dolnej a hornej hranice rozsahu; alebo ak je typ súčasťou reťazca, musíte určiť, koľko prvých písmen sa použije na zoskupenie (rozsah $)

Zoskupovanie je najkritickejšou časťou aspektu. Všetky súhrnné informácie, ktoré môže aspekt vrátiť, závisia od kritérií zoskupenia. Zvyčajne najpoužívanejšie hľadané výrazy sú „ Plný riadok“, „Časť reťazca“ alebo „Rozsah hodnôt“.

Priestor názvov classFacet ( použite Pinq\ITraversable, Pinq\Traversable; class Facet ( verejné $údaje; // Pôvodná množina údajov verejný $kľúč; // pole, podľa ktorého sa má zoskupiť verejný $typ; // F: celý riadok; S: počiatočné reťazce ; R: public $rozsah // zohráva rolu iba ak $typ != F ... verejná funkcia getFacet() ( $filter = ""; if ($this->type == "F") / / celý riadok ( ... ) elseif ($this->type == "S") // začiatok riadku ( ... ) elseif ($this->type == "R") // rozsah hodnôt ​​( $ filter = $this->data ->groupBy(function($row) ( return floor($row[$this->key] / $this->range) * $this->range; )) -> select(funkcia (ITtraversable $data) ( return ["key" => $data->last()[$this->key], "count" => $data->count()]; )); filter;)))

Hlavnou funkciou tejto triedy je vrátiť filtrovanú množinu údajov na základe pôvodnej množiny údajov a vlastností aspektov. Z kódu je zrejmé, že pre rôzne druhy používajú sa účty rôznymi spôsobmi zoskupovanie údajov. Vo vyššie uvedenom kóde sme ukázali, ako môže kód vyzerať, ak zoskupíme údaje podľa rozsahu hodnôt v prírastkoch špecifikovaných v $rozsah .

Nastavenie aspektov a zobrazenie zdrojových údajov

Verejná funkcia test2($app, $data) ( $facet = $this->getFacet($data); return $app["twig"]->render("demo2.html.twig", array("facet" = > $facet, "data" => $data)); súkromná funkcia getFacet($originalData) ( $facet = pole(); $data = \Pinq\Traversable::from($originalData); // 3 rôzne príklady vytvorenia objekty aspektov a vráti aspekty $filter1 = new \classFacet\Facet($data, "autor", "F" $filter2 = new \classFacet\Facet($data, "title", "S", 6); $filter3 = new \classFacet\Facet($data, "cena", "R", 10) $filter1->key] = $filter1->getFacet(); $facet[$filter3->key] = $filter3->getFacet();

V metóde getFacet() robíme nasledovné:

  • Preveďte pôvodné údaje na objekt Pinq\Traversable na ďalšie spracovanie
  • Vytvárame tri aspekty. Aspekt 'autor' sa zoskupí podľa poľa autora a implementuje zoskupenie podľa celého riadka; aspekt 'názov' - podľa poľa názvu so zoskupením podľa časti riadku (podľa prvých 6 znakov); aspekt „cena“ – podľa poľa ceny so zoskupením podľa rozsahu (v prírastkoch po 10)
  • Nakoniec extrahujeme aspekty a vrátime ich do funkcie test2, aby sa mohli zobraziť na výstupe do šablóny
Výstupné aspekty a filtrované údaje

Vo väčšine prípadov sa filtre zobrazia ako čiara a dovedú vás k zobrazeniu filtrovaného výsledku.

Už sme vytvorili trasu ("demo2/fazeta/(kľúč)/(hodnota)") na zobrazenie fazetovaných výsledkov vyhľadávania a filtrovania odkazov.

Trasa má dva parametre v závislosti od filtrovaného kľúča a hodnoty tohto kľúča. Funkcia test3, ktorá je naviazaná na túto cestu, je zobrazená nižšie:

Test verejnej funkcie3($app, $originalData, $key, $value) ( ​​​​$data = \Pinq\Traversable::from($originalData); $facet = $this->getFacet($data); $filter = null if ($key == "autor") ( $filter = $data ->where(funkcia($riadok) použite ($value) (vráti $riadok["autor"] == $hodnota; )) ->orderByAscending( function($row) use ($key) ( return $row["price"]; )) ) elseif ($key == "cena") ( ... ) else //$key== title ( .. . ) return $app["twig"]->render("demo2.html.twig", array("facet" => $facet, "data" => $filter) )

V podstate v závislosti od kľúča aplikujeme filtrovanie (anonymná funkcia v príkaze where) podľa odovzdanej hodnoty a získame nasledujúcu množinu filtrovaných údajov. Môžeme tiež nastaviť poradie filtrovania údajov.

Nakoniec v šablóne zobrazíme nespracované dáta (spolu s filtrami). Táto cesta používa rovnaký vzor, ​​aký sme použili v "demo2".

Panel vyhľadávania

    (% pre k, v vo fazete %)
  • ((k|veľké písmená))
    • (% pre vv v %)
    • ((vv.count))((vv.key))
    • (%endfor%)
    (%endfor%)

Musíme si uvedomiť, že aspekty generované našou aplikáciou sú vnorené polia. Na prvej úrovni ide o súbor všetkých aspektov, v našom prípade sú to tri (pre autora, názov, cenu).

Každý aspekt má pole kľúč – hodnota, takže ho môžeme iterovať pomocou bežných metód.

Všimnite si, ako vytvárame adresy URL pre naše odkazy. Ako parametre pre cestu používame kľúč vonkajšej slučky (k) aj kláves vnútornej slučky (vv.key) („demo2/facet/(key)/(value)“). Veľkosť polí (vv.count) sa používa na zobrazenie v šablóne.

Prvý obrázok zobrazuje pôvodný súbor údajov a druhý obrázok je filtrovaný podľa cenového rozpätia od 0 do 10 USD a zoradený podľa autora.

Skvelé, dokázali sme simulovať fazetové vyhľadávanie v našej aplikácii!

Pred uzavretím tohto článku sa musíme konečne pozrieť na náš príklad a určiť, čo možno zlepšiť a aké máme obmedzenia.

Možné vylepšenia

Vo všeobecnosti je to veľmi základný príklad. Práve sme prešli základnú syntax a koncepty a implementovali sme ich ako pracovný príklad. Ako už bolo uvedené, máme niekoľko oblastí, ktoré by sa dali vylepšiť pre väčšiu flexibilitu.

Potrebujeme implementovať „prekryvné“ kritériá vyhľadávania, pretože súčasný príklad nás obmedzuje na možnosť použiť filtrovanie vyhľadávania iba na pôvodný súbor údajov, nemôžeme použiť fazetové vyhľadávanie na už filtrovaný výsledok. Toto je najväčšie zlepšenie, aké si viem predstaviť.

Obmedzenia

Fazetové vyhľadávanie implementované v tomto článku má vážne obmedzenia (ktoré sa môžu vzťahovať aj na iné implementácie fazetového vyhľadávania):

Údaje z MySQL získavame zakaždým

Táto aplikácia využíva rámec Silex. Ako každý rámec jedného vstupného bodu, ako je Silex, Symfony, Laravel, jeho súbor index.php (alebo app.php) sa volá zakaždým, keď sa analyzuje trasa a vykonajú sa funkcie ovládača.

Ak sa pozriete na kód v našom index.php, všimnete si, že nasledujúci riadok kódu:

$demo = new pinqDemo\Demo($app);

sa volá pri každom vykreslení stránky aplikácie, čo znamená, že sa zakaždým vykonajú nasledujúce riadky kódu:

Ukážka triedy ( súkromné ​​$books = ""; verejná funkcia __construct($app) ( $sql = "vybrať * z poradia book_book podľa id"; $this->books = $app["db"]->fetchAll($sql ;

Bude lepšie, keď nebudeme používať framework? Napriek tomu, že vývoj aplikácií bez rámcov nie je dobrý nápad, môžem povedať, že narazíme na rovnaké problémy: údaje (a stav) sa neukladajú medzi rôznymi HTTP požiadavky. Toto je základná charakteristika HTTP. Tomu sa dá predísť použitím mechanizmov ukladania do vyrovnávacej pamäte.

Pomocou aspektov sme ušetrili niekoľko SQL dotazov. Namiesto odovzdania jedného výberového dotazu na získanie údajov a troch zoskupení dotazov so zodpovedajúcimi klauzulami where, sme spustili iba jeden dotaz where a na získanie súhrnných informácií sme použili PINQ.

Záver

V tejto časti sme implementovali možnosť fazetového prehľadávania zbierky kníh. Ako som povedal, toto je len malý príklad, ktorý má priestor na zlepšenie a ktorý má množstvo obmedzení.

( "query": ( "and": [ ( "terms": ("country": ["be", "fr"]) ), ( "terms": ("category": ["knihy", "filmy" ""])))]))

Pre počítadlá môžeme použiť vstavané agregácie od Elasticsearch. Každý z týchto dvoch aspektov je uložený ako jedno pole v indexe, takže môžeme použiť agregáciu výrazov v každom z týchto polí. Agregácia vráti počítadlo pre hodnotu tohto poľa.

( "query": ( "and": [ ( "terms": ("country": ["be", "fr"]) ), ( "terms": ("category": ["knihy", "filmy" " "]) ) ]), "agregácie": ( "krajiny": ( "výrazy": ("pole": "krajina")), "kategórie": ( "výrazy": ("pole": "kategória" )))))

Ak spustíte tento dotaz, všimnete si, že počítadlá sú vypnuté. Dve nevybrané krajiny, Portugalsko a Brazília, majú počítadlo 0. Aj keď existujú skutočné výsledky, ak ich chceme vybrať (kvôli ORvnútornému okraju). Stáva sa to preto, že Elasticsearch štandardne vykonáva svoje agregácie na množine výsledkov. To znamená, že ak vyberiete Francúzsko, filtre inej krajiny budú mať skóre 0, pretože sada výsledkov obsahuje iba položky z Francúzska.

Aby sme to vyriešili, musíme povedať Elasticsearch, aby vykonal agregáciu celého súboru údajov a ignoroval dopyt. Môžeme to urobiť definovaním našich klastrov ako globálnych.

( "query": ( "and": [ ( "terms": ("country": ["be", "fr"]) ), ( "terms": ("category": ["knihy", "filmy" " "]) ) ]), "agregácie": ( "all_products": ( "global": (), "agregations": ( "country": ( "terms": ("field": "country")), " category": ( "terms": ("field": "category") ) ) ) ) )

Ak by sme to urobili, naše počítadlá by boli vždy rovnaké, pretože by vždy počítali s celým súborom údajov bez ohľadu na naše filtre. Naše jednotky musia byť trochu zložitejšie, aby to fungovalo, musíme k nim pridať filtre. Každá agregácia sa musí spoliehať na množinu údajov so všetkými použitými filtrami okrem vlastného. Agregácia podľa účtu vo Francúzsku teda počíta s množinou údajov s použitým filtrom kategórií, ale nie s filtrom krajín:

( "query": ( "and": [ ( "terms": ("country": ["be", "fr"]) ), ( "terms": ("category": ["knihy", "filmy" " "]) ) ]), "agregácie": ( "all_products": ( "global": (), "agregations": ( "country": ( "filter": ( "and": [ ( "terms": ( "category": ["knihy","filmy"]) ) ] ), "agregácie": ( "filtrované_krajiny": ( "terms": ("pole": "country") ) ), "categories": ( "filter": ( "and": [ ( "terms": ("country": ["be","fr"]) ) ]), "agregations": ( "filtered_categories": ( "terms": ( "pole": "kategória") ) ) ) ) ) ) )

( "vzalo": 153, "timed_out": nepravda, "_shards": ( "celkom": 5, "úspešné": 5, "neúspešné": 0), "zlyhané": ( "celkom": 3, "max_skóre" ": 0, "hits": ["..."]), "agregations": ( "all_products": ( "doc_count": 21, "filtered category": ( "doc_count": 13, "categories": ( "doc_count_error_upper_bound": 0, "sum_other_doc_count": 0, "buckets": [ ( "key": "filmy", "doc_count": 6 ), ( "key": "music", "doc_count": 4), ( "key": "books", "doc_count": 3 ) ] ) ), "filtered_country": ( "doc_count": 15, "country": ( "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 ) ] ) ) ) ) )

Rámec Yii2 $terms = QueryHelper::terms("categories.name" , "moja kategória" ) ; $nested = QueryHelper:: vnorené ("string_facet" , QueryHelper:: filter ([ QueryHelper:: termín ("string_facet.facet_name" , [ "value" => $id , "boost" => 1 ] ) ), QueryHelper:: výraz ("string_facet.facet_value" , ​​​​[ "value" => $value , "boost" => 1 ] ) , ] ) ); $filter = QueryHelper::should ($vnorené) ;

V dnešnej lekcii sa pokúsime znovu vytvoriť imitáciu fazetového vyhľadávania pomocou Javascriptu. Predpokladám, že už viete, čo je to fazetové vyhľadávanie, ak čítate tento návod, inak si ho vygooglite alebo si pozrite Amazon alebo moje Demo.

Najprv potrebujeme knižnicu github.com/eikes/facetedsearch. Stiahnite si ho a pripojte súbor facetedsearch.js k nášmu projektu. Budeme potrebovať aj knižnice jQuery a Underscore.

Upozornenie: Chápem, že JQ už nie je koláč, ale používam ho ako známy syntaktický cukor, môžete ho prepísať pre knižnice, ktoré sú vám známejšie, alebo vo vanilkovom JS.

Takže najprv urobme jednoduché označenie s pripojenými závislosťami:

Dokument // Tu zobrazíme fazetové filtre // A tu budú naše prvky

Teraz musíme popísať nastavenia našej aplikácie a vytvoriť šablónu na zobrazenie prvkov poľa, ktoré zoradíme pomocou faziet:

$(function())( var item_template = // Opíšte šablónu "" + " " class="img-responsive">" + ", " + "

" + "" + ", " + ", " + "

" + "

" + ""; nastavenia = ( items: example_items, fazety: ( // Zadajte kategórie faziet "category" : "Aká kategória", "kontinent" : "Ktorý kontinent", "language" : "Programovací jazyk"), resultSelector: "#results", // Element DOM, kde zobrazujeme výsledky facetSelector: "#facets", // Element DOM pre fazety resultTemplate: item_template, paginationCount: 8, // Počet prvkov na stránke orderByOptions: ("firstname": " Krstné meno ", "priezvisko": "Priezvisko", "kategória": "Kategória", "RANDOM": "Náhodné"), facetSortOption: ("kontinent": ["Severná Amerika", "Južná Amerika"]) ) $. facetelize(nastavenia);

V skutočnosti vytvorte samotné pole JSON s prvkami, ktoré sa majú zobraziť v našom fazetovanom vyhľadávaní v JS:

Var items = [ ( "krstné meno": "Mary", "priezvisko": "Smith", "imageURL": "http://lorempixel.com/150/150/cats/2", "description": "Sed Ea Amet. Stet Voluptua, "kategória": "Myš", "jazyk": ["Smalltalk", "XSLT"], "kontinent": "Afrika" ​​), ( "krstné meno": "Patricia". ", "priezvisko": "Johnson", "imageURL": "http://lorempixel.com/150/150/cats/3", "popis": "Ut Takimata Sit Aliquyam Labore Aliquyam Sit Sit Lorem Rebum ." , "kategória": "Lev", "kontinent": "Severná Amerika", ... ];

Toto pole by som vložil do samostatného súboru JS, ktorý by sa generoval dynamicky, napríklad z databázy.

To je všetko, získame fazetové vyhľadávanie v JavaScripte a môžeme ho prispôsobiť. Ďalej poskytujem preloženú dokumentáciu knižnice, kde môžete vidieť spúšťače, ktoré potrebujete.

Funkcie dokumentácie

Do menného priestoru jQuery sa exportujú dve funkcie.

facetelize Používa sa na inicializáciu facetovaného vyhľadávania s danými nastaveniami.

facetUpdate Dá sa použiť, ak chcete externe zmeniť stav vyhľadávania faziet.

Nastavenia objektu

položky: Pole položiek, ktoré budú v procese filtrované a triedené.

fazety: Objekt, ktorého kľúče zodpovedajú kľúčom a hodnotám prvkov, je hlavičkou tohto aspektu. Položky budú filtrované podľa toho, akú hodnotu majú tieto kľúče.

orderByOptions: Podobné ako fazety, s tým rozdielom, že tieto páry kľúč – hodnota sa používajú iba na triedenie. Keď je aktivovaný kláves RANDOM, výsledky môžu byť náhodné.

facetSelector: Toto je selektor, ktorý sa používa na nájdenie uzla DOM, z ktorého sa dajú vybrať filtre faziet.

resultSelector: Toto je selektor, ktorý sa používa na nájdenie uzla DOM, kde sa zobrazujú výsledky.

resultTemplate: Reťazec, ktorý používa modul šablóny Underscore na vykreslenie každého prvku z poľa položiek. Ku každému prvku sa pridajú nasledujúce atribúty, ktoré možno použiť aj v šablóne: batchItemNr, batchItemCount a totalItemCount.

stav: Tento objekt ukladá aktuálne filtre, triedi: currentResult a iné. Na ich prednastavenie môžete zadať príkaz orderBy alebo objekt filtrov.

enablePagination: Boolean, ak chcete povoliť stránkovanie a tlačidlo „načítať viac“, predvolená hodnota je true .

paginationCount: Ak je povolený stránkovač, nastavuje počet prvkov na stránku, predvolená hodnota je 50.

facetSortOption: Túto funkciu použite na zmenu poradia prvkov fazety. Prevezme objekt, ktorého kľúče zodpovedajú názvom a hodnotám faziet, do poľa hodnôt faziet, ktoré možno usporiadať v poradí, v akom ich chcete mať. Tento príklad zoradí kontinenty v inom poradí a pridá položky, ktoré nie sú zahrnuté v poli, v abecednom poradí:

FacetSortOption: ("kontinent": ["Severná Amerika", "Južná Amerika"])

Existuje niekoľko ďalších šablón, pozrite sa zdroj facetedsearch.js, aby ste videli všetky dostupné možnosti šablón.

Diania

Môžete sa viazať na niektoré udalosti, ktoré by mali odosielať upozornenia, keď sa vyskytli nejaké akcie. Na tento účel používame systém udalostí jquery:

facetuicreated: Túto funkciu môžete naviazať na prvok DOM settings.facetSelector, ktorý by mal byť upozornený na vytvorenie používateľského rozhrania.

facetedsearchresultupdate: Túto funkciu môžete naviazať na prvok DOM settings.resultSelector, aby ste boli informovaní o výsledkoch aktualizácie.

facetedsearchfacetclick: Táto udalosť sa spustí, keď sa klikne na fazetu a spustí sa na elemente settings.facetSelector. Ktorá dostane ID aspektu ako argument.

facetedsearchorderby: Táto udalosť sa spustí, keď sa na prvok zoradenia klikne na prvok settings.facetSelector. Ako argument berie ID príkaz.

$(settings.resultSelector).bind("facetedsearchresultupdate", function())( // urobte niečo, možno ));

Moderní ľudia sa snažia tráviť čoraz menej času nakupovaním. Pomalé katalógy produktov odháňajú zákazníkov, obchod prichádza o zákazníkov a časť zisku. Zatraktívnite svoj internetový obchod fazetovou technológiou Facet - t.j. preddefinované.

Poznámka: Mechanizmus fazetového vyhľadávania je dostupný od verzie 15.0.1 modulu Informačné bloky a je integrovaný s komponentom Komponent je programový kód navrhnutý vo vizuálnom prostredí, ktorý vykonáva špecifickú funkciu modulu na zobrazovanie údajov verejnosti časť. Tento blok kódu môžeme vložiť do webových stránok bez priameho písania akéhokoľvek kódu. Inteligentný filter Komponent pripraví filter na výber z informačného bloku a zobrazí formulár filtra na filtrovanie prvkov. Komponent musí byť pripojený pred komponentom pre zobrazenie prvkov katalógu, inak nebude zoznam prvkov filtrovaný. Komponent je štandardný, je súčasťou modulovej distribúcie a obsahuje tri šablóny: .default , visual_horizontal a visual_vertical . (Posledné dve šablóny nie sú podporované, zostávajú kvôli zachovaniu kompatibility.)

Vo vizuálnom editore je komponent umiestnený pozdĺž cesty Obsah > Katalóg > Inteligentný filter.

Komponent patrí do modulu Informačné bloky.

Získajte viac informácií o fazetovanom vyhľadávaní

Pozrime sa na príklad:

Ideme do internetového obchodu a vo filtri vyberieme, že potrebujeme červené tričko:

  • Bez fazetovaného vyhľadávania by filter začal prechádzať celým zoznamom produktov, aby priradil produkt „tričko“ s vlastnosťou farby „Červená“, čo by pri veľkom počte produktov zabralo veľa času;
  • Ak si nastavíte fazetové vyhľadávanie, tak sa vytvárajú hotové vyhľadávacie sady produktov pre určitú hodnotu vlastnosti (fazetované indexy), t.j. možnosti pre prípadné požiadavky Napríklad červené tričko, všetky čierne bavlnené výrobky, šaty veľkosti XS atď. v inteligentnom filtri sa vypočítajú vopred a výsledok sa okamžite zobrazí. Tento typ vyhľadávania produktov je oveľa rýchlejší.

Poďme vytvoriť fazetové indexy v niekoľkých jednoduchých krokoch:

Je potrebné vytvoriť indexy faziet?

Fazetové indexy sa znova vytvárajú automaticky alebo ich musíte znova vytvoriť ručne, v závislosti od vykonaných akcií:

Automaticky Pridané nové alebo upravené existujúce produkty.
nevytvárajte nové vlastnosti.
Manuálne Systém vás na to upozorní správou v hornej časti stránok
administratívny úsek.
Pridané nové alebo upravené časti katalógu.
Pri pridávaní novej vlastnosti alebo odstraňovaní vlastnosti z inteligentného filtra.
Pri vykladaní tovaru napríklad z 1C, ak tovar vytvára nové vlastnosti.

Fazetové vyhľadávanie zlepšuje výkonnosť katalógu produktov. Na jeho použitie potrebujete:

  • Vytvorte fazetové indexy pre katalóg produktov;
  • Sledujte upozornenia o potrebe manuálneho opätovného vytvorenia indexov.
  • Publikácie na danú tému