PINQ: set di dati interrogati. Ricerca sfaccettata

Segni di gravidanza dopo l'impianto dell'embrione
Ricerca sfaccettata incorporata Integrata nel prodotto

La ricerca sfaccettata integrata nel negozio online - ricerca interna - funziona rapidamente sotto molti aspetti e non carica il sistema.

  • Integrato nel prodotto
  • Molto veloce
  • Non carica il sito
  • È la parte principale dell'API infoblocks
  • Non richiede la riprogettazione del sito web
  • Reindicizzato automaticamente
Perché così veloce?

Al cliente vengono immediatamente presentati risultati di ricerca pre-preparati - per qualsiasi combinazione di parametri - aspetto. Il sistema calcola in anticipo le sfaccettature di un prodotto: tutte le possibili intersezioni di queste proprietà nel filtro. Questi set di ricerca già pronti vengono quindi rilasciati ai clienti.

Perchè il sito non si carica?

Nel momento in cui il risultato viene inviato al cliente, non vengono effettuati calcoli perché il risultato è già pronto. Un facet per un nuovo prodotto viene creato immediatamente quando viene aggiunto al catalogo di vendita. La ricerca viene reindicizzata automaticamente in base ai nuovi prodotti e alle nuove proprietà.

Vantaggi per i clienti

Vantaggi della ricerca per faccette Il tuo cliente trova il prodotto molto velocemente, giocando facilmente con le impostazioni del filtro. Il cliente non aspetta e ottiene risultati immediatamente. La velocità di ricerca non dipende dal numero di articoli nel catalogo.


Filtro intelligente 2.0

Il cliente trova rapidamente il prodotto

Il tuo cliente trova il prodotto molto rapidamente restringendo costantemente la query di ricerca. E ad ogni passo riceve immediatamente i risultati: un elenco di prodotti su richiesta. Non deve attendere che la sua richiesta venga elaborata. Perché il sistema ha calcolato in anticipo tutte le opzioni possibili e rilascia semplicemente gli spazi vuoti. A poco a poco, il negozio online mostra sempre meno prodotti come risultati. Questi prodotti si avvicinano sempre di più alla richiesta dell'acquirente.

Interattività e multidimensionalità

Scegliere un prodotto per un acquirente è come un gioco. Il cliente trascina i parametri (prezzo, peso), cambia proprietà (colore, dimensione), imposta condizioni aggiuntive (marca, materiale, gusto, ecc.) - e il sistema riorganizza immediatamente i risultati. In questo caso, possono esserci tutti i parametri personalizzabili che desideri: il loro numero non influisce sulla velocità di generazione del risultato.

Convenienza e cordialità

Con la navigazione a faccette, anche un utente inesperto può selezionare facilmente un prodotto nel negozio. Manipolare gli strumenti di ricerca è molto conveniente. Inoltre, il sistema propone all'acquirente tutti i parametri in base ai quali può scegliere un prodotto. Il negozio, per così dire, mostra al cliente le principali proprietà del prodotto.

Il cliente non aspetta che la richiesta venga elaborata!
Ad esempio, il tuo cliente acquista una macchina fotografica. Inizialmente indica nel filtro intelligente solo 3 parametri: prezzo, marca, taglia. Il suo aspetto comprende 3 incroci, ci sono molti risultati di ricerca, ma il cliente li riceve immediatamente. Il cliente imposta il peso: ha bisogno di un gadget leggero. Il sistema immediatamente, senza indugio, gli fornisce una lista di merci più piccola. Il client imposta le dimensioni dello schermo, quindi specifica la funzionalità richiesta. Davanti a lui ci sono i beni desiderati.


Velocità di ricerca

La velocità di ricerca conta La velocità di ricerca influisce sul numero di acquisti effettuati

Niente irrita di più un cliente che avere difficoltà a trovare prodotti sul tuo sito web. Il cliente partirà per altri negozi se cerca troppo a lungo. Anche se il tuo negozio contiene grande scelta prodotti e molti strumenti per filtrarli. Il client potrebbe non ricevere risultati dalla richiesta.


Tutorial video: perché la ricerca sfaccettata accelera significativamente un filtro intelligente
L'utilizzo della “faccetta” velocizza la ricerca all'interno del negozio di un ordine di grandezza. In questo caso la velocità non dipende dal numero di elementi nella directory.

Perché la ricerca è così lenta?
La ricerca di un prodotto in una vetrina può richiedere molto più tempo rispetto ai normali tempi di caricamento della pagina. Soprattutto se nel negozio è presente un gran numero di prodotti e le proprietà di questi prodotti. Query di ricerca in molti modi crea molte chiamate al database e carica in modo significativo il sito. Se ci sono molti clienti e richieste, la ricerca rallenta notevolmente.

La velocità di lavoro è impressionante! I risultati dei test per la versione 15.0 del prodotto su tre categorie di cataloghi contenenti 500mila articoli hanno mostrato che rispetto alle versioni precedenti:
  • Componente filtro intelligente – 15 volte più veloce!
  • Componente Catalogo – 5 volte più veloce!
L'intelligenza della ricerca rimane costante!
Veloce anche senza “sfaccettatura”! Il prodotto lavora costantemente per velocizzare i componenti stessi del catalogo. Il servizio “Velocità del sito” mostra un aumento significativo della velocità da una versione all'altra!

Ricostruzione

Viene effettuata una ricostruzione costante dell'indicizzazione e dei risultati della ricerca. L'algoritmo di indicizzazione dei contenuti è in fase di rielaborazione e accelerazione. La qualità della presentazione dei risultati di ricerca è migliorata, in particolare il "rumore" è ridotto. Gli sviluppatori prevedono di visualizzare dati personalizzati per il cliente attuale nei risultati di ricerca.

Per gli sviluppatori: trasparenza dell'API


Vista precedente

"Facet" è trasparente per l'API La "facet" incorporata nel prodotto è trasparente per l'API. È la parte principale dell'API infoblocks. Pertanto, utilizzarlo non richiede sforzi aggiuntivi per gli sviluppatori. Inoltre, non è necessario riprogettare i siti.
  • Accelerazione del metodo CIBlockElement::GetList
  • Integrazione completa con filtro intelligente
GetList ora funziona più velocemente perché collega automaticamente una "faccetta" alla funzione. C'è anche un'API separata su D7.

Integrazione completa con filtro intelligente

Ora, quando si effettuano le impostazioni nella parte amministrativa, per le proprietà del prodotto non è possibile solo indicare l'attività, se partecipare o meno al filtro intelligente. Passando una proprietà allo Smart Filter, puoi scegliere subito come visualizzarla. In quale forma la proprietà deve essere mostrata ai clienti: pulsanti, dimensioni, cursori, elenchi a discesa, elenchi con selezione di colori, ecc.



Mostra proprietà nel filtro intelligente

Può essere personalizzato!

Il filtro intelligente ora sembra più bello. Gli sviluppatori possono facilmente personalizzare e personalizzare ulteriormente il suo aspetto.

Abbiamo dato una rapida occhiata all'installazione e alla sintassi di base di PINQ, un port di LINQ to PHP. In questo articolo vedremo come utilizzare PINQ per simulare la funzionalità di ricerca a faccette in MySQL.

In questo articolo non tratteremo tutti gli aspetti della ricerca sfaccettata. Le persone interessate possono cercare informazioni adeguate su Internet.

Una tipica ricerca sfaccettata funziona in questo modo:

  • L'utente inserisce una o più parole chiave da cercare. Ad esempio "router" per cercare prodotti in cui compare la parola "router" nella descrizione, parole chiave, nome della categoria, tag, ecc.
  • Il sito restituisce un elenco di prodotti che corrispondono a questi criteri.
  • Il sito fornisce diversi collegamenti per personalizzare i termini di ricerca. Ad esempio, potrebbe consentire di specificare produttori di router specifici o impostare una fascia di prezzo o altre funzionalità.
  • L'utente può continuare a specificare ulteriori criteri di ricerca per ottenere il set di dati di interesse.

La ricerca sfaccettata è piuttosto popolare ed è uno strumento potente che può essere visto su quasi tutti i siti di e-commerce.

Sfortunatamente, la ricerca sfaccettata non è integrata in MySQL. Quindi cosa dovremmo fare se utilizziamo ancora MySQL, ma vogliamo dare all'utente questa opportunità?

Con PINQ, che ha un approccio simile, potente e semplice, possiamo ottenere lo stesso comportamento che se utilizzassimo altri motori di database.

Espansione della demo dalla prima parte

Nota: tutto il codice di questa parte e della prima parte può essere trovato nel repository.

In questo articolo approfondiremo la demo della Parte 1 con un miglioramento significativo sotto forma di ricerca sfaccettata.

Iniziamo con index.php e aggiungiamo le seguenti righe:

$app->get("demo2", function () use ($app) ( global $demo; $test2 = new pinqDemo\Demo($app); return $test2->test2($app, $demo->test1 ($app)); )); $app->get("demo2/facet/(chiave)/(valore)", funzione ($chiave, $valore) usa ($app) ( globale $demo; $test3 = nuovo pinqDemo\Demo($app); return $test3->test3($app, $demo->test1($app), $chiave, $valore); ));

Il primo percorso ci porta a una pagina per visualizzare tutte le voci che corrispondono alla ricerca parola chiave. Per mantenere l'esempio semplice, selezioniamo tutti i libri dalla tabella book_book. Verrà inoltre visualizzato il set di dati risultante e una serie di collegamenti per specificare i criteri di ricerca.

Nelle applicazioni reali, dopo aver fatto clic su tali collegamenti, tutti i filtri delle sfaccettature si adatteranno ai valori limite del set di dati risultante. L'utente potrà così aggiungere in sequenza nuove condizioni di ricerca, ad esempio selezionare prima un produttore, poi specificare una fascia di prezzo, ecc.

Ma in questo esempio non implementeremo questo comportamento: tutti i filtri rifletteranno i valori limite del set di dati originale. Questa è la prima limitazione e il primo candidato al miglioramento nella nostra demo.

Come puoi vedere nel codice sopra, le funzioni effettive si trovano in un altro file chiamato pinqDemo.php. Diamo un'occhiata al codice corrispondente che fornisce la funzione di ricerca a faccette.

Classe d'aspetto

Il primo passo è creare una classe che rappresenti un aspetto. In generale, un aspetto dovrebbe contenere diverse proprietà:

  • I dati su cui opera ($data)
  • La chiave con cui viene eseguito il raggruppamento ($key)
  • Tipo di chiave ($tipo). Può essere uno dei seguenti:
    • specificare la stringa completa per una corrispondenza esatta
    • indicare parte della stringa (solitamente quella iniziale) da ricercare per pattern
    • indicare un intervallo di valori, per il raggruppamento per intervallo
  • se il tipo di chiave è un intervallo di valori, è necessario definire un passaggio di valori per determinare i limiti inferiore e superiore dell'intervallo; oppure se il tipo fa parte di una stringa, è necessario specificare quante prime lettere verranno utilizzate per il raggruppamento ($intervallo)

Il raggruppamento è la parte più critica dell'aspetto. Tutte le informazioni aggregate che un aspetto può essere in grado di restituire dipendono dai criteri di raggruppamento. In genere i criteri di ricerca più utilizzati sono "Stringa completa", "Parte di stringa" o "Intervallo di valori".

Spazio dei nomi classFacet ( usa Pinq\ITraversable, Pinq\Traversable; class Facet ( public $data; // Set di dati originale public $key; // campo in base al quale raggruppare public $type; // F: intera riga; S: stringhe iniziali ; R: range; public $range; // ha un ruolo solo if $type != F ... public function getFacet() ( $filter = ""; if ($this->type == "F") / / intera riga ( ... ) elseif ($this->type == "S") // inizio riga ( ... ) elseif ($this->type == "R") // intervallo di valori ​​( $ filter = $this->data ->groupBy(function($row) ( return floor($row[$this->key] / $this->range) * $this->range; )) -> select(funzione (ITraversable $data) ( return ["key" => $data->last()[$this->key], "count" => $data->count()]; )); ) return $filtro; ) ) )

La funzione principale di questa classe è restituire un set di dati filtrato in base al set di dati originale e alle proprietà dell'aspetto. Dal codice è chiaro che utilizzano diversi tipi di account vari modi raggruppamento dei dati. Nel codice sopra, abbiamo mostrato come potrebbe apparire il codice se raggruppiamo i dati in base a un intervallo di valori con incrementi specificati in $range .

Impostazione degli aspetti e visualizzazione dei dati di origine

Funzione pubblica test2($app, $data) ( $facet = $this->getFacet($data); return $app["twig"]->render("demo2.html.twig", array("facet" = > $facet, "data" => $data)); ) funzione privata getFacet($originalData) ( $facet = array(); $data = \Pinq\Traversable::from($originalData); // 3 esempi di creazione diversi oggetti aspetto e restituiscono gli aspetti $filter1 = new \classFacet\Facet($data, "author", "F"); $filter2 = new \classFacet\Facet($data, "title", "S", 6 ) ; $filtro3 = new \classFacet\Facet($data, "price", "R", 10); $facet[$filter1->key] = $filter1->getFacet(); $facet[$filter2-> chiave ] = $filtro2->getFacet(); $facet[$filtro3->chiave] = $filter3->getFacet(); return $facet; )

Nel metodo getFacet() facciamo quanto segue:

  • Converti i dati originali in un oggetto Pinq\Traversable per un'ulteriore elaborazione
  • Creiamo tre aspetti. L'aspetto "autore" raggrupperà in base al campo autore e implementerà il raggruppamento per l'intera riga; aspetto 'titolo' - dal campo del titolo con raggruppamento per parte della riga (dai primi 6 caratteri); aspetto 'prezzo' - in base al campo prezzo con raggruppamento per intervallo (in incrementi di 10)
  • Infine, estraiamo gli aspetti e li restituiamo alla funzione test2 in modo che possano essere inviati al modello per la visualizzazione
Aspetti di output e dati filtrati

Nella maggior parte dei casi, i filtri verranno visualizzati come una linea e ti porteranno a visualizzare il risultato filtrato.

Abbiamo già creato un percorso ("demo2/facet/(chiave)/(valore)") per visualizzare i risultati della ricerca sfaccettata e filtrare i collegamenti.

Il percorso accetta due parametri, a seconda della chiave in base alla quale viene filtrato e del valore di tale chiave. La funzione test3 associata a questa rotta è mostrata di seguito:

Test della funzione pubblica3($app, $originalData, $key, $value) ( ​​$data = \Pinq\Traversable::from($originalData); $facet = $this->getFacet($data); $filter = null; if ($chiave == "autore") ( $filtro = $dati ->where(funzione($riga) usa ($valore) ( ​​return $riga["autore"] == $valore; )) ->ordinePerAscending( funzione($riga) usa ($chiave) ( return $riga["prezzo"]; )) ; ) elseif ($chiave == "prezzo") ( ... ) else //$chiave== titolo ( .. . ) return $app["twig"]->render("demo2.html.twig", array("facet" => $facet, "data" => $filtro)); )

Fondamentalmente, a seconda della chiave, applichiamo il filtraggio (una funzione anonima nell'istruzione where) in base al valore passato e otteniamo il seguente set di dati filtrati. Possiamo anche impostare l'ordine di filtraggio dei dati.

Infine, visualizziamo i dati grezzi (insieme ai filtri) nel modello. Questo percorso utilizza lo stesso modello utilizzato in "demo2".

Barra di ricerca

    (% per k, v nella sfaccettatura%)
  • ((k|capitalizza))
      • (% per vv in v%)
    • ((vv.conteggio))((vv.chiave))
      • (%endfor%)
    (%endfor%)

Dobbiamo ricordare che gli aspetti generati dalla nostra applicazione sono array nidificati. Al primo livello si tratta di un insieme di tutti gli aspetti e, nel nostro caso, ce ne sono tre (rispettivamente per autore, titolo, prezzo).

Ogni aspetto ha un array di valori-chiave, quindi possiamo eseguirne l'iterazione utilizzando i metodi normali.

Nota come creiamo gli URL per i nostri collegamenti. Usiamo sia la chiave del loop esterno (k) che le chiavi del loop interno (vv.key) come parametri per il percorso ("demo2/facet/(key)/(value)"). La dimensione degli array (vv.count) viene utilizzata per la visualizzazione nel modello.

La prima immagine mostra il set di dati originale e la seconda immagine viene filtrata per fascia di prezzo da $ 0 a $ 10 e ordinata per autore.

Fantastico, siamo riusciti a simulare la ricerca sfaccettata nella nostra applicazione!

Prima di concludere questo articolo, dobbiamo dare un’ultima occhiata al nostro esempio e determinare cosa può essere migliorato e quali limitazioni abbiamo.

Possibili miglioramenti

In generale, questo è un esempio molto semplice. Abbiamo appena esaminato la sintassi e i concetti di base e li abbiamo implementati come esempio funzionante. Come affermato in precedenza, abbiamo diverse aree che potrebbero essere migliorate per una maggiore flessibilità.

Dobbiamo implementare criteri di ricerca "overlay", poiché l'esempio attuale ci limita alla possibilità di applicare il filtro di ricerca solo al set di dati originale; non possiamo applicare la ricerca sfaccettata a un risultato già filtrato. Questo è il miglioramento più grande che posso immaginare.

Restrizioni

La ricerca per faccette implementata in questo articolo presenta gravi limitazioni (che potrebbero applicarsi anche ad altre implementazioni di ricerca per faccette):

Recuperiamo dati da MySQL ogni volta

Questa applicazione utilizza il framework Silex. Come ogni framework a punto di ingresso singolo come Silex, Symfony, Laravel, il suo file index.php (o app.php) viene chiamato ogni volta che viene analizzata una rotta e vengono eseguite le funzioni del controller.

Se guardi il codice nel nostro index.php, noterai che la seguente riga di codice:

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

viene chiamato ogni volta che viene renderizzata la pagina dell'applicazione, il che significa che vengono eseguite ogni volta le seguenti righe di codice:

Demo della classe ( private $books = ""; public function __construct($app) ( $sql = "seleziona * da book_book order by id"; $this->books = $app["db"]->fetchAll($sql ); )

Sarebbe meglio se non utilizzassimo un framework? Ebbene, nonostante sviluppare applicazioni senza framework non sia una buona idea, posso dire che incontreremo gli stessi problemi: i dati (e lo stato) non vengono salvati tra diversi Richieste HTTP. Questa è una caratteristica fondamentale di HTTP. Ciò può essere evitato utilizzando meccanismi di memorizzazione nella cache.

Abbiamo salvato diverse query SQL utilizzando gli aspetti. Invece di passare una query di selezione per recuperare i dati e tre query di gruppo per con clausole where corrispondenti, abbiamo eseguito solo una query where e utilizzato PINQ per ottenere le informazioni aggregate.

Conclusione

In questa parte abbiamo implementato la possibilità di effettuare ricerche sfaccettate in una raccolta di libri. Come ho detto, questo è solo un piccolo esempio, che ha margini di miglioramento e che presenta una serie di limitazioni.

( "query": ( "e": [ ( "termini": ("paese": ["be", "fr"]) ), ( "termini": ("categoria": ["libri", "film " "]) ) ] ))

Per i contatori, possiamo utilizzare aggregazioni integrate da Elasticsearch. Ciascuno dei due aspetti viene archiviato come un singolo campo nell'indice, quindi possiamo utilizzare l'aggregazione dei termini in ciascuno di questi campi. L'aggregazione restituirà un contatore per il valore di questo campo.

( "query": ( "e": [ ( "termini": ("paese": ["be", "fr"]) ), ( "termini": ("categoria": ["libri", "film " "]) ) ]), "aggregazioni": ( "paesi": ( "termini": ("campo": "paese")), "categorie": ( "termini": ("campo": "categoria" ) ) ) )

Se dovessi eseguire questa query, noterai che i contatori sono disabilitati. I due paesi non selezionati, Portogallo e Brasile, hanno un contatore pari a 0. Sebbene ci siano risultati effettivi se vogliamo selezionarli (a causa del bordo interno OR). Ciò accade perché, per impostazione predefinita, Elasticsearch esegue le sue aggregazioni sul set di risultati. Ciò significa che se selezioni Francia, i filtri dell'altro paese avranno un punteggio pari a 0 perché il set di risultati contiene solo elementi provenienti dalla Francia.

Per risolvere questo problema, dobbiamo dire a Elasticsearch di eseguire l'aggregazione sull'intero set di dati, ignorando la query. Possiamo farlo definendo i nostri cluster come globali.

( "query": ( "e": [ ( "termini": ("paese": ["be", "fr"]) ), ( "termini": ("categoria": ["libri", "film " "]) ) ]), "aggregazioni": ( "all_products": ( "global": (), "aggregations": ( "countries": ( "terms": ("field": "country")), " categorie": ( "termini": ("campo": "categoria") ) ) ) ) )

Se facessimo solo questo, i nostri contatori sarebbero sempre gli stessi perché conterebbero sempre sull’intero set di dati, indipendentemente dai nostri filtri. Le nostre unità devono diventare un po' più complesse, affinché funzioni dobbiamo aggiungere loro dei filtri. Ogni aggregazione deve fare affidamento su un set di dati con tutti i filtri applicati tranne il proprio. Pertanto, l'aggregazione per account in Francia conta sul set di dati con il filtro di categoria applicato, ma non con il filtro del paese:

( "query": ( "e": [ ( "termini": ("paese": ["be", "fr"]) ), ( "termini": ("categoria": ["libri", "film " "]) ) ]), "aggregazioni": ( "all_products": ( "global": (), "aggregations": ( "countries": ( "filter": ( "and": [ ( "terms": ( "categoria": ["libri","film"]) ) ] ), "aggregazioni": ( "filtered_countries": ( "termini": ("campo": "paese") ) ) ), "categorie": ( "filtro": ( "e": [ ( "termini": ("paese": ["be","fr"]) ) ]), "aggregazioni": ( "filtered_categories": ( "termini": ( " campo": "categoria") ) ) ) ) ) ) )

( "ha preso": 153, "timed_out": false, "_shards": ( "total": 5, "successful": 5, "failed": 0), "hits": ( "total": 3, "max_score ": 0, "hits": ["..."]), "aggregazioni": ( "all_products": ( "doc_count": 21, "categorie filtrate": ( "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 ) ] ) ) ) ) )

Framework Yii2 $terms = QueryHelper::terms("categories.name" , "la mia categoria" ) ; $nested = QueryHelper:: annidato ("string_facet" , QueryHelper:: filtro ([ QueryHelper:: termine ("string_facet.facet_name" , [ "valore" => $id , "boost" => 1 ] ), QueryHelper:: termine ("string_facet.facet_value" , ​​[ "value" => $value , "boost" => 1 ] ) , ] ) ) ; $filtro = QueryHelper::dovrebbe ($nidificato) ;

Nella lezione di oggi proveremo a ricreare un'imitazione della ricerca a faccette utilizzando Javascript. Presumo che tu sappia già cos'è la ricerca sfaccettata se stai leggendo questo tutorial, altrimenti cercalo su Google o dai un'occhiata ad Amazon o alla mia Demo.

Per prima cosa abbiamo bisogno della libreria github.com/eikes/facetedsearch. Scaricalo e collega il file facetedsearch.js al nostro progetto. Avremo bisogno anche delle librerie jQuery e Underscore.

Dichiarazione di non responsabilità: capisco che JQ non è più una torta, ma lo uso come zucchero sintattico familiare, puoi riscriverlo per librerie a te più familiari o in Vanilla JS.

Quindi, per prima cosa, creiamo un semplice markup con dipendenze connesse:

Documento // Qui mostreremo i filtri delle sfaccettature // E qui saranno i nostri elementi

Ora dobbiamo descrivere le impostazioni della nostra applicazione e creare un modello per la visualizzazione degli elementi dell'array che ordineremo utilizzando le sfaccettature:

$(function())( var item_template = // Descrive il modello "" + " " class="img-responsive">" + ", " + "

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

" + "

" + ""; settings = ( elementi: esempio_items, facets: ( // Specifica le categorie di sfaccettature "categoria" : "Quale categoria", "continente" : "Quale continente", "lingua" : "Linguaggio di programmazione"), resultSelector: "#results", // Elemento DOM in cui visualizziamo i risultati facetSelector: "#facets", // Elemento DOM per le faccette resultTemplate: item_template, paginationCount: 8, // Numero di elementi per pagina orderByOptions: ("firstname": " Nome ", "lastname": "Cognome", "category": "Categoria", "RANDOM": "Random"), facetSortOption: ("continente": ["Nord America", "Sud America"]) ) $.facetelize(impostazioni); ));

Bene, in realtà crea un array JSON stesso con gli elementi da visualizzare nella nostra ricerca sfaccettata in JS:

Elementi Var = [ ( "nome": "Mary", "cognome": "Smith", "imageURL": "http://lorempixel.com/150/150/cats/2", "descrizione": "Sed Ea Amet. Stet Voluptua. Nonumy Magna Takimata ", "category": "Mouse", "lingual": ["Smalltalk", "XSLT"], "continent": "Africa" ​​​​), ( "firstname": "Patricia ", "cognome": "Johnson", "imageURL": "http://lorempixel.com/150/150/cats/3", "descrizione": "Ut Takimata Sit Aliquyam Labore Aliquyam Sit Sit Lorem Amet. Ipsum Rebum ." , "categoria": "Leone", "continente": "Nord America", ... ];

Vorrei inserire questo array in un file JS separato che verrebbe generato dinamicamente, ad esempio da un database.

Questo è tutto, otteniamo una ricerca sfaccettata in JavaScript e possiamo personalizzarla. Successivamente, fornisco la documentazione tradotta della libreria, dove puoi vedere i trigger di cui hai bisogno.

Funzionalità della documentazione

Due funzioni vengono esportate nello spazio dei nomi jQuery.

facetelize Utilizzato per inizializzare una ricerca sfaccettata con le impostazioni specificate.

facetUpdate Può essere utilizzato se si desidera modificare esternamente lo stato di ricerca dei facet.

Impostazioni dell'oggetto

elementi: una serie di elementi che verranno filtrati e ordinati durante il processo.

sfaccettature: un oggetto le cui chiavi corrispondono alle chiavi e ai valori dell'elemento è l'intestazione di quella sfaccettatura. Gli elementi verranno filtrati in base al valore che hanno per queste chiavi.

orderByOptions: simile ai facet, tranne che queste coppie chiave-valore vengono utilizzate solo per l'ordinamento. Quando il tasto RANDOM è abilitato, i risultati possono essere randomizzati.

facetSelector: questo è un selettore utilizzato per trovare un nodo DOM da cui selezionare i filtri delle sfaccettature.

resultSelector: questo è un selettore utilizzato per trovare il nodo DOM in cui vengono visualizzati i risultati.

resultTemplate: una stringa utilizzata dal motore del modello Underscore per eseguire il rendering di ogni elemento dall'array di elementi. A ciascun elemento vengono aggiunti i seguenti attributi, che possono essere utilizzati anche nel modello: batchItemNr, batchItemCount e totalItemCount.

state: questo oggetto memorizza i filtri correnti, ordina: currentResult e altri. Puoi fornire una stringa orderBy o un oggetto filtri per preimpostarli.

abilitaPaginazione: booleano per abilitare l'impaginazione e il pulsante "carica altro", il valore predefinito è true .

paginationCount: se l'impaginatore è abilitato, imposta il numero di elementi per pagina, il valore predefinito è 50.

facetSortOption: utilizzare questa funzione per modificare l'ordine degli elementi facet. Prende un oggetto le cui chiavi corrispondono a nomi e valori di sfaccettatura in un array di valori di sfaccettatura, che possono essere organizzati nell'ordine in cui desideri che siano. Questo esempio ordinerà i continenti in un ordine diverso, aggiungendo elementi non inclusi nell'array in ordine alfabetico:

FacetSortOption: ("continente": ["Nord America", "Sud America"])

Ci sono altri modelli, dai un'occhiata fonte facetedsearch.js per vedere tutte le opzioni del modello disponibili.

Eventi

Puoi associarti ad alcuni eventi che dovrebbero inviare notifiche quando si sono verificate alcune azioni. Per fare ciò, utilizziamo il sistema di eventi jquery:

facetuicreated: puoi associare questa funzione all'elemento DOM settings.facetSelector che dovrebbe essere avvisato quando l'interfaccia utente è stata creata.

facetedsearchresultupdate: puoi associare questa funzione all'elemento DOM settings.resultSelector per ricevere una notifica dei risultati dell'aggiornamento.

facetedsearchfacetclick: questo evento viene generato quando si fa clic su un facet e viene attivato nell'elemento settings.facetSelector. Che riceve l'ID del facet come argomento.

facetedsearchorderby: questo evento viene generato quando si fa clic sull'elemento di ordinamento sull'elemento settings.facetSelector. Accetta l'ordine dell'ID come argomento.

$(settings.resultSelector).bind("facetedsearchresultupdate", function())( // fai qualcosa, forse ));

Le persone moderne cercano di dedicare sempre meno tempo allo shopping. I cataloghi dei prodotti lenti allontanano i clienti, il negozio perde clienti e parte dei suoi profitti. Rendi il tuo negozio online più attraente con la tecnologia sfaccettata Facet, ad es. predefinito. ricerca. Crea indici sfaccettati e velocizza notevolmente la ricerca dei prodotti e il lavoro dell'intero catalogo.

Nota: il meccanismo di ricerca a faccette è disponibile dalla versione 15.0.1 del modulo Information Blocks ed è integrato con il componente. Un componente è un codice di programma progettato in una shell visiva che esegue una funzione specifica di un modulo per visualizzare i dati nel pubblico parte. Possiamo inserire questo blocco di codice nelle pagine del sito web senza scrivere direttamente alcun codice. Filtro intelligente Il componente prepara un filtro per la selezione da un blocco di informazioni e visualizza un modulo filtro per filtrare gli elementi. Il componente deve essere collegato prima del componente per la visualizzazione degli elementi del catalogo, altrimenti la lista degli elementi non verrà filtrata. Il componente è standard, incluso nella distribuzione del modulo e contiene tre template: .default , visual_horizontal e visual_vertical . (Gli ultimi due modelli non sono supportati, rimangono per mantenere la compatibilità.)

Nell'editor visivo, il componente si trova lungo il percorso Contenuti > Catalogo > Filtro intelligente.

Il componente appartiene al modulo Blocchi informativi.

Ulteriori informazioni sulla ricerca sfaccettata

Diamo un'occhiata ad un esempio:

Andiamo al negozio online e selezioniamo nel filtro che abbiamo bisogno di una maglietta rossa:

  • Senza la ricerca sfaccettata, il filtro inizierebbe a scorrere l'intero elenco di prodotti per abbinare il prodotto "T-shirt" con la proprietà del colore "Rosso", il che richiederebbe molto tempo se il numero di prodotti fosse elevato;
  • Se imposti una ricerca sfaccettata, vengono creati set di prodotti di ricerca già pronti per un determinato valore di proprietà (indici sfaccettati), ad es. opzioni per possibili richieste Ad esempio, una maglietta rossa, tutti i prodotti in cotone nero, abiti taglia XS, ecc. nel filtro intelligente vengono calcolati in anticipo e il risultato viene visualizzato immediatamente. Questo tipo di ricerca del prodotto è molto più veloce.

Creiamo indici sfaccettati in pochi semplici passaggi:

Gli indici delle sfaccettature devono essere ricreati?

Gli indici sfaccettati vengono ricreati automaticamente oppure è necessario ricrearli manualmente, a seconda delle azioni eseguite:

Automaticamente Aggiunti prodotti nuovi o modificati esistenti.
non creare nuove proprietà.
Manualmente Il sistema ti avviserà di ciò tramite un messaggio nella parte superiore delle pagine
sezione amministrativa.
Aggiunte sezioni nuove o modificate del catalogo.
Quando si aggiunge una nuova proprietà o si rimuove una proprietà da un filtro intelligente.
Quando si scaricano merci, ad esempio, da 1C, se le merci creano nuove proprietà.

La ricerca sfaccettata migliora le prestazioni del catalogo prodotti. Per utilizzarlo è necessario:

  • Creare indici sfaccettati per un catalogo di prodotti;
  • Controlla le notifiche sulla necessità di ricreare manualmente gli indici.

    • Pubblicazioni sull'argomento