PINQ - Ensembles de données interrogés. Recherche à facettes

Signes de grossesse après l'implantation d'embryons
Recherche à facettes intégrée Intégrée au produit

La recherche à facettes intégrée à la boutique en ligne - recherche interne - fonctionne rapidement à bien des égards et ne charge pas le système.

  • Intégré au produit
  • Très vite
  • Ne charge pas le site
  • Est la partie principale de l'API des infoblocs
  • Ne nécessite pas de refonte du site Web
  • Réindexé automatiquement
Pourquoi si vite?

Le client reçoit instantanément des résultats de recherche pré-préparés - pour toute combinaison de paramètres - facette. Le système calcule à l'avance les facettes d'un produit - toutes les intersections possibles de ces propriétés dans le filtre. Ces ensembles de recherche prêts à l'emploi sont ensuite remis aux clients.

Pourquoi le site ne se charge-t-il pas ?

Au moment où le résultat est transmis au client, aucun calcul n'est effectué car le résultat est déjà prêt. Une facette pour un nouveau produit est créée immédiatement lorsqu'il est ajouté au catalogue de vente. La recherche est automatiquement réindexée en fonction des nouveaux produits et des nouvelles propriétés.

Avantages pour les clients

Avantages de la recherche à facettes Votre client trouve le produit très rapidement, en jouant facilement avec les paramètres du filtre. Le client n'attend pas et obtient des résultats instantanément. La vitesse de recherche ne dépend pas du nombre d'articles dans le catalogue.


Filtre intelligent 2.0

Le client trouve rapidement le produit

Votre client trouve le produit très rapidement en affinant systématiquement la requête de recherche. Et à chaque étape, il reçoit instantanément des résultats : une liste de produits sur demande. Il n'a pas à attendre que sa demande soit traitée. Parce que le système a calculé à l'avance toutes les options possibles et émet simplement des blancs. Petit à petit, la boutique en ligne affiche de moins en moins de produits comme résultats. Ces produits se rapprochent de plus en plus de la demande de l'acheteur.

Interactivité et multidimensionnalité

Choisir un produit pour un acheteur est comme un jeu. Le client fait glisser les paramètres (prix, poids), change de propriétés (couleur, taille), définit des conditions supplémentaires (marque, matériau, goût, etc.) - et le système réorganise immédiatement les résultats. Dans ce cas, il peut y avoir autant de paramètres personnalisables que vous le souhaitez - leur nombre n'affecte pas la vitesse de génération du résultat.

Commodité et convivialité

Grâce à la navigation à facettes, même un utilisateur inexpérimenté peut facilement sélectionner un produit dans le magasin. Manipuler les outils de recherche est très pratique. De plus, le système propose à l'acheteur tous les paramètres grâce auxquels il peut choisir un produit. Le magasin, pour ainsi dire, démontre au client les principales propriétés du produit.

Le client n'attend pas que la demande soit traitée !
Par exemple, votre client achète un appareil photo. Dans un premier temps, il n'indique que 3 paramètres dans le filtre intelligent : prix, marque, taille. Sa facette comprend 3 intersections, il y a beaucoup de résultats de recherche, mais le client les reçoit immédiatement. Le client fixe le poids - il a besoin d'un gadget léger. Le système lui donne immédiatement, sans délai, une liste de marchandises plus réduite. Le client définit la taille de l'écran, puis spécifie les fonctionnalités requises. Devant lui se trouvent les biens désirés.


Vitesse de recherche

La vitesse de recherche est importante La vitesse de recherche affecte le nombre d'achats effectués

Rien n'irrite plus un client que d'avoir du mal à trouver des produits sur votre site Web. Le client partira vers d'autres magasins s'il cherche trop longtemps. Même si votre magasin contient grand choix produits et de nombreux outils pour les filtrer. Le client peut ne pas recevoir les résultats de la demande.


Tutoriel vidéo : Pourquoi la recherche à facettes accélère considérablement un filtre intelligent
L'utilisation de la « facette » accélère la recherche dans le magasin d'un ordre de grandeur. Dans ce cas, la vitesse ne dépend pas du nombre d'éléments dans le répertoire.

Pourquoi la recherche est-elle si lente ?
La recherche d'un produit sur une vitrine peut prendre beaucoup plus de temps que les temps de chargement normaux des pages. Surtout s'il y a un grand nombre de produits dans le magasin et les propriétés de ces produits. Requête de rechercheà bien des égards, cela crée de nombreux appels à la base de données et charge considérablement le site. S'il y a beaucoup de clients et de demandes, la recherche ralentit considérablement.

La rapidité de travail est impressionnante ! Les résultats des tests de la version 15.0 du produit sur trois catégories de catalogues contenant 500 000 articles ont montré que par rapport aux versions précédentes :
  • Composant de filtre intelligent – ​​15 fois plus rapide !
  • Composant catalogue – 5 fois plus rapide !
L'intelligence de recherche reste constante !
Rapide même sans « facette » ! Le produit s'efforce constamment d'accélérer les composants du catalogue eux-mêmes. Le service « Site Speed ​​» montre une augmentation significative de la vitesse de version en version !

Reconstruction

Une reconstruction constante des résultats d'indexation et de recherche est effectuée. L’algorithme d’indexation des contenus est retravaillé et accéléré. La qualité de présentation des résultats de recherche est améliorée - en particulier, le « bruit » est réduit. Les développeurs prévoient d'afficher des données personnalisées pour le client actuel dans les résultats de recherche.

Pour les développeurs : transparence des API


Vue précédente

La « facette » est transparente pour l'API La « facette » intégrée au produit est transparente pour l'API. C'est la partie principale de l'API des infoblocs. Par conséquent, son utilisation ne nécessite aucun effort supplémentaire de la part des développeurs. Il n’est pas non plus nécessaire de repenser les sites.
  • Accélération de la méthode CIBlockElement :: GetList
  • Intégration complète avec filtre intelligent
GetList fonctionne désormais plus rapidement car il connecte automatiquement une « facette » à la fonction. Il existe également une API distincte sur D7.

Intégration complète avec filtre intelligent

Désormais, lors de la configuration des paramètres dans la partie administrative, pour les propriétés du produit, vous pouvez non seulement indiquer l'activité - si vous souhaitez ou non participer au filtre intelligent. En transmettant une propriété au Smart Filter, vous pouvez immédiatement choisir comment les afficher. Sous quelle forme la propriété doit-elle être présentée aux clients : boutons, tailles, curseurs, listes déroulantes, listes avec sélection de couleurs, etc.



Afficher la propriété dans le filtre intelligent

Peut être personnalisé!

Le filtre intelligent est désormais plus beau. Les développeurs peuvent facilement personnaliser et personnaliser davantage son apparence.

Nous avons jeté un coup d'œil rapide à l'installation et à la syntaxe de base de PINQ, un portage de LINQ to PHP. Dans cet article, nous verrons comment utiliser PINQ pour simuler la fonctionnalité de recherche à facettes dans MySQL.

Dans cet article, nous ne couvrirons pas tous les aspects de la recherche à facettes. Les personnes intéressées peuvent rechercher des informations appropriées sur Internet.

Une recherche à facettes typique fonctionne comme ceci :

  • L'utilisateur saisit un ou plusieurs mots-clés pour effectuer une recherche. Par exemple, « routeur » pour rechercher des produits dans lesquels le mot « routeur » apparaît dans la description, les mots-clés, le nom de la catégorie, les balises, etc.
  • Le site renvoie une liste de produits répondant à ces critères.
  • Le site propose plusieurs liens pour personnaliser vos termes de recherche. Par exemple, cela peut vous permettre de spécifier des fabricants de routeurs spécifiques, de définir une fourchette de prix ou d'autres fonctionnalités.
  • L'utilisateur peut continuer à spécifier des critères de recherche supplémentaires afin d'obtenir l'ensemble de données qui l'intéresse.

La recherche à facettes est très populaire et constitue un outil puissant visible sur presque tous les sites Web de commerce électronique.

Malheureusement, la recherche à facettes n'est pas intégrée à MySQL. Alors, que devons-nous faire si nous utilisons toujours MySQL, mais que nous souhaitons donner cette opportunité à l'utilisateur ?

Avec PINQ, qui a une approche similaire, puissante et simple, nous pouvons obtenir le même comportement que si nous utilisions d'autres moteurs de bases de données.

Extension de la démo de la première partie

Remarque : tout le code de cette partie et de la première partie peut être trouvé dans le référentiel.

Dans cet article, nous développerons la démo de la première partie avec une amélioration significative sous la forme de recherche de facettes.

Commençons par index.php et ajoutons-y les lignes suivantes :

$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)", function ($key, $value) use ($app) ( global $demo; $test3 = new pinqDemo\Demo($app); return $test3->test3($app, $demo->test1($app), $key, $value); ));

Le premier itinéraire nous amène à une page pour afficher toutes les entrées qui correspondent à la recherche par mot-clé. Pour garder l'exemple simple, nous sélectionnons tous les livres de la table book_book. Il affichera également l'ensemble de données résultant et un ensemble de liens pour spécifier les critères de recherche.

Dans les applications réelles, après avoir cliqué sur ces liens, tous les filtres à facettes s'ajusteront aux valeurs limites de l'ensemble de données résultant. L'utilisateur pourra ainsi ajouter séquentiellement de nouvelles conditions de recherche, par exemple sélectionner d'abord un fabricant, puis préciser une fourchette de prix, etc.

Mais dans cet exemple, nous n'implémenterons pas ce comportement - tous les filtres refléteront les valeurs limites de l'ensemble de données d'origine. C'est la première limitation et le premier candidat à l'amélioration de notre démo.

Comme vous pouvez le voir dans le code ci-dessus, les fonctions réelles se trouvent dans un autre fichier appelé pinqDemo.php. Jetons un coup d'œil au code correspondant qui fournit la fonction de recherche à facettes.

Classe d'aspect

La première étape consiste à créer une classe qui représente un aspect. En général, un aspect doit contenir plusieurs propriétés :

  • Les données sur lesquelles il opère ($data)
  • La clé par laquelle le regroupement est effectué ($key)
  • Type de clé ($type). Il peut s'agir de l'un des éléments suivants :
    • spécifier la chaîne complète pour une correspondance exacte
    • indiquer une partie de la chaîne (généralement la première) à rechercher par motif
    • indiquer une plage de valeurs, pour un regroupement par plage
  • si le type de clé est une plage de valeurs, vous devez définir un pas de valeur pour déterminer les limites inférieure et supérieure de la plage ; ou si le type fait partie d'une chaîne, vous devez spécifier combien de premières lettres seront utilisées pour le regroupement ($range)

Le regroupement est la partie la plus critique de l’aspect. Toutes les informations agrégées qu'un aspect peut renvoyer dépendent des critères de regroupement. Généralement, les critères de recherche les plus utilisés sont « Chaîne complète », « Partie de chaîne » ou « Plage de valeurs ».

Espace de noms classFacet ( utilisez Pinq\ITraversable, Pinq\Traversable; class Facet ( public $data; // Ensemble de données d'origine public $key; // champ par lequel regrouper public $type; // F: ligne entière; S: chaînes de début ; R: range; public $range; // ne joue un rôle que si $type != F ... public function getFacet() ( $filter = ""; if ($this->type == "F") / / ligne entière ( ... ) elseif ($this->type == "S") // début de ligne ( ... ) elseif ($this->type == "R") // plage de valeurs ​​( $ filter = $this->data ->groupBy(function($row) ( return floor($row[$this->key] / $this->range) * $this->range; )) -> select(function (ITraversable $data) ( return ["key" => $data->last()[$this->key], "count" => $data->count()]; )); ) return $filtre; ) ) )

La fonction principale de cette classe est de renvoyer un ensemble de données filtré basé sur l'ensemble de données d'origine et les propriétés d'aspect. D'après le code, il est clair que pour différents types de comptes, ils utilisent différentes manières regroupement des données. Dans le code ci-dessus, nous avons montré à quoi pourrait ressembler le code si nous regroupions les données par plage de valeurs par incréments spécifiés dans $range .

Définition des aspects et affichage des données sources

Fonction publique test2($app, $data) ( $facet = $this->getFacet($data); return $app["twig"]->render("demo2.html.twig", array("facet" = > $facet, "data" => $data)); ) fonction privée getFacet($originalData) ( $facet = array(); $data = \Pinq\Traversable::from($originalData); // 3 exemples de création différents objets d'aspect, et renvoie les aspects $filter1 = new \classFacet\Facet($data, "author", "F"); $filter2 = new \classFacet\Facet($data, "title", "S", 6 ) ; $filter3 = nouveau \classFacet\Facet($data, "price", "R", 10); $facet[$filter1->key] = $filter1->getFacet(); $facet[$filter2-> clé ] = $filter2->getFacet(); $facet[$filter3->key] = $filter3->getFacet(); return $facet; )

Dans la méthode getFacet(), nous procédons comme suit :

  • Convertissez les données d'origine en un objet Pinq\Traversable pour un traitement ultérieur
  • Nous créons trois aspects. L'aspect « auteur » regroupera par champ d'auteur et implémentera le regroupement par ligne entière ; aspect 'titre' - par le champ titre avec regroupement par partie de ligne (par les 6 premiers caractères) ; aspect 'prix' - par le champ prix avec regroupement par gamme (par incréments de 10)
  • Enfin, nous extrayons les aspects et les renvoyons à la fonction test2 afin qu'ils puissent être affichés dans le modèle.
Aspects de sortie et données filtrées

Dans la plupart des cas, les filtres seront affichés sous forme de ligne et vous amèneront à visualiser le résultat filtré.

Nous avons déjà créé un itinéraire ("demo2/facet/(key)/(value)") pour afficher les résultats de recherche à facettes et filtrer les liens.

L'itinéraire prend deux paramètres, en fonction de la clé filtrée et de la valeur de cette clé. La fonction test3 liée à cette route est présentée ci-dessous :

Fonction publique test3($app, $originalData, $key, $value) ($data = \Pinq\Traversable::from($originalData); $facet = $this->getFacet($data); $filter = null; if ($key == "author") ( $filter = $data ->where(function($row) use ($value) ( ​​​​return $row["author"] == $value; )) ->orderByAscending( function($row) use ($key) ( return $row["price"]; )) ; ) elseif ($key == "price") ( ... ) else //$key== title ( .. . ) return $app["twig"]->render("demo2.html.twig", array("facet" => $facet, "data" => $filter)); )

Fondamentalement, en fonction de la clé, nous appliquons un filtrage (une fonction anonyme dans l'instruction Where) en fonction de la valeur transmise et obtenons l'ensemble de données filtrées suivant. Nous pouvons également définir l'ordre de filtrage des données.

Enfin, nous affichons les données brutes (avec les filtres) dans le modèle. Cet itinéraire utilise le même modèle que celui utilisé dans "demo2".

Barre de recherche

    (% pour k, v en facette %)
  • ((k|capitaliser))
      • (% pour vv en v %)
    • ((vv.count))((vv.key))
      • (%fin pour%)
    (%fin pour%)

Nous devons nous rappeler que les aspects générés par notre application sont des tableaux imbriqués. Au premier niveau, il s'agit d'un ensemble de tous les aspects, et, dans notre cas, il y en a trois (respectivement pour l'auteur, le titre, le prix).

Chaque aspect a un tableau clé-valeur, nous pouvons donc le parcourir en utilisant les méthodes normales.

Remarquez comment nous construisons les URL de nos liens. Nous utilisons à la fois la clé de boucle externe (k) et les clés de boucle interne (vv.key) comme paramètres pour la route ("demo2/facet/(key)/(value)"). La taille des tableaux (vv.count) est utilisée pour l'affichage dans le modèle.

La première image montre l'ensemble de données d'origine et la deuxième image est filtrée par fourchette de prix de 0 $ à 10 $ et triée par auteur.

Super, nous avons pu simuler la recherche à facettes dans notre application !

Avant de conclure cet article, nous devons jeter un dernier regard sur notre exemple et déterminer ce qui peut être amélioré et quelles sont nos limites.

Améliorations possibles

En général, il s’agit d’un exemple très basique. Nous venons de passer en revue la syntaxe et les concepts de base et de les implémenter à titre d'exemple fonctionnel. Comme indiqué précédemment, nous avons plusieurs domaines qui pourraient être améliorés pour une plus grande flexibilité.

Nous devons implémenter des critères de recherche « superposés », puisque l'exemple actuel nous limite à la possibilité d'appliquer le filtrage de recherche uniquement à l'ensemble de données d'origine ; nous ne pouvons pas appliquer la recherche à facettes à un résultat déjà filtré. C’est la plus grande amélioration que je puisse imaginer.

Restrictions

La recherche de facettes implémentée dans cet article présente de sérieuses limitations (qui peuvent également s'appliquer à d'autres implémentations de recherche de facettes) :

Nous récupérons les données de MySQL à chaque fois

Cette application utilise le framework Silex. Comme tout framework à point d'entrée unique comme Silex, Symfony, Laravel, son fichier index.php (ou app.php) est appelé à chaque fois qu'une route est analysée et que les fonctions du contrôleur sont exécutées.

Si vous regardez le code dans notre index.php, vous remarquerez que la ligne de code suivante :

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

est appelé à chaque fois que la page d'application est affichée, ce qui signifie que les lignes de code suivantes sont exécutées à chaque fois :

Démo de classe ( private $books = ""; public function __construct($app) ( $sql = "select * from book_book order by id"; $this->books = $app["db"]->fetchAll($sql ); )

Est-ce que ce sera mieux si nous n'utilisons pas de framework ? Bon, malgré le fait que développer des applications sans frameworks ne soit pas une bonne idée, je peux dire que nous rencontrerons les mêmes problèmes : les données (et l'état) ne sont pas sauvegardées entre les différents Requêtes HTTP. Il s'agit d'une caractéristique fondamentale du HTTP. Cela peut être évité en utilisant des mécanismes de mise en cache.

Nous avons enregistré plusieurs requêtes SQL en utilisant des aspects. Au lieu de transmettre une requête de sélection pour récupérer les données et trois requêtes group by avec les clauses Where correspondantes, nous avons exécuté une seule requête Where et utilisé PINQ pour obtenir les informations agrégées.

Conclusion

Dans cette partie, nous avons implémenté la possibilité de rechercher des facettes dans une collection de livres. Comme je l'ai dit, il ne s'agit que d'un petit exemple qui peut être amélioré et qui présente un certain nombre de limites.

( "query": ( "et": [ ( "terms": ("pays": ["be", "fr"]) ), ( "terms": ("category": ["livres", "films " ]) ) ] ) )

Pour les compteurs, nous pouvons utiliser les agrégations intégrées d'Elasticsearch. Chacune des deux facettes est stockée sous la forme d'un champ unique dans l'index, nous pouvons donc utiliser l'agrégation de termes dans chacun de ces champs. L'agrégation renverra un compteur pour la valeur de ce champ.

( "query": ( "et": [ ( "terms": ("pays": ["be", "fr"]) ), ( "terms": ("category": ["livres", "films " "]) ) ]), "agrégations": ( "pays": ( "termes": ("champ": "pays")), "catégories": ( "termes": ("champ": "catégorie" ) ) ) )

Si vous deviez exécuter cette requête, vous remarquerez que les compteurs sont désactivés. Les deux pays non sélectionnés, le Portugal et le Brésil, ont un compteur de 0. Bien qu'il y ait des résultats réels si l'on veut les sélectionner (en raison du bord ORinner). Cela se produit car, par défaut, Elasticsearch effectue ses agrégations sur l'ensemble de résultats. Cela signifie que si vous sélectionnez la France, les filtres de l'autre pays auront un score de 0 car le jeu de résultats ne contient que des éléments de France.

Pour résoudre ce problème, nous devons demander à Elasticsearch d'effectuer l'agrégation sur l'ensemble de données, en ignorant la requête. Nous pouvons le faire en définissant nos clusters comme globaux.

( "query": ( "et": [ ( "terms": ("pays": ["be", "fr"]) ), ( "terms": ("category": ["livres", "films " "]) ) ]), "agrégations": ( "all_products": ( "global": (), "agrégations": ( "pays": ( "termes": ("champ": "pays")), " catégories": ( "termes": ("champ": "catégorie") ) ) ) ) )

Si nous faisions simplement cela, nos compteurs seraient toujours les mêmes car ils s'appuieraient toujours sur l'ensemble des données, quels que soient nos filtres. Nos unités doivent devenir un peu plus complexes, pour que cela fonctionne, nous devons leur ajouter des filtres. Chaque agrégation doit s'appuyer sur un ensemble de données avec tous les filtres appliqués sauf le sien. Ainsi, l'agrégation par compte en France compte sur le jeu de données avec le filtre catégorie appliqué, mais pas le filtre pays :

( "query": ( "et": [ ( "terms": ("pays": ["be", "fr"]) ), ( "terms": ("category": ["livres", "films " "]) ) ]), "agrégations": ( "all_products": ( "global": (), "agrégations": ( "pays": ( "filtre": ( "et": [ ( "termes": ( "category": ["livres","films"]) ) ] ), "agrégations": ( "filtered_countries": ( "terms": ("field": "country") ) ) ), "categories": ( "filter": ( "et": [ ( "terms": ("country": ["be","fr"]) ) ) ]), "agrégations": ( "filtered_categories": ( "terms": ( " champ": "catégorie") ) ) ) ) ) ) )

( "pris": 153, "timed_out": false, "_shards": ( "total": 5, "successful": 5, "failed": 0), "hits": ( "total": 3, "max_score ": 0, "hits": ["..."]), "agrégations": ( "all_products": ( "doc_count": 21, "filteredcategories": ( "doc_count": 13, "categories": ( "doc_count_error_upper_bound": 0, "sum_other_doc_count": 0, "buckets": [ ( "key": "films", "doc_count": 6 ), ( "key": "musique", "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" , "ma catégorie" ) ; $nested = QueryHelper:: imbriqué ("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) ;

Dans la leçon d'aujourd'hui, nous allons essayer de recréer une imitation de recherche à facettes en utilisant Javascript. Je suppose que vous savez déjà ce qu'est la recherche à facettes si vous lisez ce tutoriel, sinon recherchez-le sur Google ou consultez Amazon ou ma démo.

Nous avons d’abord besoin de la bibliothèque github.com/eikes/facetedsearch. Téléchargez-le et connectez le fichier facetedsearch.js à notre projet. Nous aurons également besoin des bibliothèques jQuery et Underscore.

Avertissement : je comprends que JQ n'est plus un gâteau, mais je l'utilise comme sucre syntaxique familier, vous pouvez le réécrire pour des bibliothèques plus familières ou dans Vanilla JS.

Alors, commençons par créer un balisage simple avec des dépendances connectées :

Document // Ici nous afficherons les filtres à facettes // Et ici nos éléments seront

Nous devons maintenant décrire les paramètres de notre application et créer un modèle pour afficher les éléments du tableau que nous allons trier à l'aide de facettes :

$(function())( var item_template = // Décrit le modèle "" + " " class="img-responsive">" + ", " + "

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

" + "

" + ""; settings = ( items: example_items, facettes: ( // Spécifiez les catégories de facettes "category" : "Quelle catégorie", "continent" : "Quel continent", "langue" : "Langage de programmation"), resultSelector : "#results", // Élément DOM où l'on affiche les résultats facetSelector : "#facets", // Élément DOM pour les facettes resultTemplate : item_template, paginationCount : 8, // Nombre d'éléments par page orderByOptions : ("firstname": " Prénom", "lastname": "Last name", "category": "Category", "RANDOM": "Random"), facetSortOption: ("continent": ["Amérique du Nord", "Amérique du Sud"]) ) $.facetelize(settings); ));

Eh bien, créez lui-même un tableau JSON avec des éléments à afficher dans notre recherche à facettes en JS :

Var items = [ ( "firstname": "Mary", "lastname": "Smith", "imageURL": "http://lorempixel.com/150/150/cats/2", "description": "Sed Ea Amet. Stet Voluptua. Nonumy Magna Takimata", "catégorie": "Souris", "langue": ["Smalltalk", "XSLT"], "continent": "Afrique" ​​), ( "prénom": "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": "Amérique du Nord", ... ];

Je placerais ce tableau dans un fichier JS distinct qui serait généré dynamiquement, à partir d'une base de données par exemple.

C'est tout, nous obtenons une recherche à facettes en JavaScript et pouvons la personnaliser. Ensuite, je fournis une documentation traduite de la bibliothèque, où vous pouvez voir les déclencheurs dont vous avez besoin.

Fonctionnalités des documents

Deux fonctions sont exportées vers l'espace de noms jQuery.

facetelize Utilisé pour initialiser une recherche à facettes avec les paramètres donnés.

facetUpdate Peut être utilisé si vous souhaitez modifier l'état de recherche de facettes en externe.

Paramètres de l'objet

items : un tableau d’éléments qui seront filtrés et triés au cours du processus.

facettes : un objet dont les clés correspondent aux clés et aux valeurs des éléments est l'en-tête de cette facette. Les éléments seront filtrés en fonction de la valeur qu'ils ont pour ces clés.

orderByOptions : similaire aux facettes, sauf que ces paires clé-valeur sont utilisées uniquement pour le tri. Lorsque la touche RANDOM est activée, les résultats peuvent être randomisés.

facetSelector : il s'agit d'un sélecteur utilisé pour rechercher un nœud DOM à partir duquel sélectionner des filtres à facettes.

resultSelector : Il s'agit d'un sélecteur utilisé pour trouver le nœud DOM où les résultats sont affichés.

resultTemplate : chaîne utilisée par le moteur de modèle de soulignement pour restituer chaque élément du tableau d'éléments. Les attributs suivants sont ajoutés à chaque élément, qui peuvent également être utilisés dans le modèle : batchItemNr, batchItemCount et totalItemCount.

state : cet objet stocke les filtres actuels, trie : currentResult et autres. Vous pouvez fournir une chaîne orderBy ou un objet filters pour les prédéfinir.

activatePagination : booléen pour activer la pagination et le bouton "charger plus", la valeur par défaut est true .

paginationCount : si le paginateur est activé, définit le nombre d'éléments par page, la valeur par défaut est 50.

facetSortOption : utilisez cette fonction pour modifier l'ordre des éléments de facette. Prend un objet dont les clés correspondent aux noms et valeurs des facettes dans un tableau de valeurs de facettes, qui peuvent être organisées dans l'ordre souhaité. Cet exemple triera les continents dans un ordre différent, en ajoutant les éléments non inclus dans le tableau par ordre alphabétique :

FacetSortOption : ("continent": ["Amérique du Nord", "Amérique du Sud"])

Il existe d'autres modèles, veuillez y jeter un œil source facetedsearch.js pour voir toutes les options de modèles disponibles.

Événements

Vous pouvez vous lier à certains événements qui doivent envoyer des notifications lorsque certaines actions se produisent. Pour ce faire, nous utilisons le système d'événements jquery :

facetuicreated : vous pouvez lier cette fonction à l'élément DOM settings.facetSelector qui doit être averti lorsque l'interface utilisateur a été créée.

facetedsearchresultupdate : vous pouvez lier cette fonction à l'élément DOM settings.resultSelector pour être informé des résultats de la mise à jour.

facetedsearchfacetclick : cet événement est déclenché lorsqu'un clic sur une facette est effectué et déclenché sur l'élément settings.facetSelector. Qui reçoit l'identifiant de la facette comme argument.

facetedsearchorderby : cet événement est déclenché lorsque l'on clique sur l'élément de tri sur l'élément settings.facetSelector. Il prend l'ordre d'identification comme argument.

$(settings.resultSelector).bind("facetedsearchresultupdate", function())( // faire quelque chose, peut-être ));

Les gens modernes essaient de consacrer de moins en moins de temps au shopping. Les catalogues de produits lents font fuir les clients, le magasin perd des clients et une partie de ses bénéfices. Rendez votre boutique en ligne plus attrayante avec la technologie Facet - c'est-à-dire prédéfini. recherche. Créez des index à facettes et accélérez considérablement la recherche de produits et le travail de l'ensemble du catalogue.

Remarque : Le mécanisme de recherche à facettes est disponible à partir de la version 15.0.1 du module Blocs d'informations et est intégré au composant. Un composant est un code de programme conçu dans un shell visuel qui remplit une fonction spécifique d'un module pour afficher des données dans le Public. partie. Nous pouvons insérer ce bloc de code dans les pages d’un site Web sans écrire directement de code. Filtre intelligent Le composant prépare un filtre pour la sélection dans un bloc d'informations et affiche un formulaire de filtre pour filtrer les éléments. Le composant doit être connecté avant le composant d'affichage des éléments du catalogue, sinon la liste des éléments ne sera pas filtrée. Le composant est standard, inclus dans la distribution du module et contient trois modèles : .default , visual_horizontal et visual_vertical . (Les deux derniers modèles ne sont pas pris en charge, ils restent pour maintenir la compatibilité.)

Dans l'éditeur visuel, le composant est situé le long du chemin Contenu > Catalogue > Filtre intelligent.

Le composant appartient au module Blocs d'information.

En savoir plus sur la recherche à facettes

Regardons un exemple :

Nous allons sur la boutique en ligne et sélectionnons dans le filtre ce dont nous avons besoin d'un T-shirt rouge :

  • Sans recherche à facettes, le filtre commencerait à parcourir toute la liste de produits pour faire correspondre le produit « T-shirt » avec la propriété de couleur « Rouge », ce qui prendrait beaucoup de temps s'il y avait un grand nombre de produits ;
  • Si vous configurez une recherche à facettes, des ensembles de produits de recherche prêts à l'emploi sont créés pour une certaine valeur de propriété (index à facettes), c'est-à-dire options pour d'éventuelles demandes Par exemple, un T-shirt rouge, des produits entièrement en coton noir, des robes taille XS, etc. dans le filtre intelligent sont calculés à l'avance et le résultat est affiché immédiatement. Ce type de recherche de produits est beaucoup plus rapide.

Créons des index à facettes en quelques étapes simples :

Les index de facettes doivent-ils être recréés ?

Les index à facettes sont recréés automatiquement ou vous devez les recréer manuellement, en fonction des actions effectuées :

Automatiquement Ajout de nouveaux produits ou modification de produits existants.
ne créez pas de nouvelles propriétés.
Manuellement Le système vous en informera à l'aide d'un message en haut des pages
partie administrative.
Ajout de sections nouvelles ou modifiées du catalogue.
Lors de l’ajout d’une nouvelle propriété ou de la suppression d’une propriété d’un filtre intelligent.
Lors du déchargement de marchandises, par exemple depuis 1C, si les marchandises créent de nouvelles propriétés.

La recherche à facettes améliore les performances du catalogue de produits. Pour l'utiliser il vous faut :

  • Créer des index à facettes pour un catalogue de produits ;
  • Surveillez les notifications concernant la nécessité de recréer manuellement les index.

    • Publications sur le sujet