juin 29, 2022

Composant de carte SXA Partie 2 avec résultats de recherche et localisateur

Salut les gens! Dans le post précédent – Composant de carte SXA, nous avons vu comment configurer le composant Map. Dans cet article, explorons le comportement du composant Carte en conjonction avec les composants « Location Finder » et « Search results ».

Conditions préalables:

Avoir des éléments POI ou un dossier POI avec des éléments POI créés.
L’élément de fournisseur de carte doit avoir la clé Map.

Consultez le post précédent pour la partie configuration des prérequis si nécessaire.

Nous allons créer une nouvelle page avec les composants Carte, Résultats de la recherche et Localisateur. Mais cette fois, nous n’avons pas besoin de fournir un élément POI ou un dossier POI dans le champ POI de la source de données Map. Oui, il doit être vide. Lorsqu’un utilisateur recherche n’importe quel emplacement dans le localisateur, il suggère automatiquement un résultat de Google, l’utilisateur peut soit sélectionner le résultat suggéré automatiquement, soit simplement saisir le nom de l’emplacement. Ensuite, le résultat de la recherche affiche les emplacements triés par distance concernant un emplacement donné dans le Localisateur. La carte qui était chargée sans marqueurs affiche désormais les marqueurs uniquement pour les emplacements renseignés dans le composant de résultats de recherche.

Dans un autre cas, avec la page ci-dessus, si nous voulons qu’une carte ne communique pas avec les résultats de la recherche ou le localisateur et doit afficher uniquement les emplacements fournis dans sa source de données, quelle peut être la solution ? Nous verrons à la fin.

Commençons par la partie configuration.

Créez un nouvel élément de contenu Sitecore sous la page d’accueil à partir d’un modèle de page ou si vous avez suivi la publication précédente, puis créez une nouvelle page nommée « Résultat de la recherche d’emplacement » sous l’élément « /sitecore/content/tenant/site/Home/Location Demo ». . Parcourez-le dans l’éditeur d’expérience.

Dans l’espace réservé principal, insérez les composants du conteneur pour obtenir la disposition ci-dessous où nous insérerons les autres composants.

1 mise en page pour le résultat de la recherche de localisation de carte

Découvrez le gif ci-dessous pour la même chose.

Une configuration similaire peut être obtenue de différentes manières, comme l’utilisation de Container, Splitter (Columns) et Splitter (Rows).

Eh bien, il n’est pas nécessaire d’avoir cette disposition. Vous pouvez ajouter les composants dans l’espace réservé principal et les empiler. Ce n’est que pour une petite meilleure expérience visuelle 🙂

Ajoutez le composant Carte dans le conteneur de gauche selon la mise en page et créez sa source de données sous l’élément de données de la page actuelle. Pas besoin de modifier les valeurs des champs et surtout pas de sélection dans le champ POI. Que ce soit la valeur par défaut.

Pour ajouter le composant Search Results, sélectionnez le bon conteneur et cliquez sur Add here > Search Tab > Select Search Results component et cliquez sur le bouton Select. Créez une source de données sous l’élément de données de la page actuelle. Fournissez la valeur comme « Aucun résultat trouvé » dans son champ de source de données « Texte des résultats introuvables ». Enregistrez la page.

Prévisualisez la page pour voir le résultat de la recherche. Mais il n’affiche pas encore de marqueurs ni de résultats de recherche.

Nous devons fournir le composant Scope to search results pour avoir des résultats. Dans l’éditeur de contenu, accédez à /sitecore/content/tenant/site/Settings/Scopes. Cliquez avec le bouton droit sur l’élément Scopes> Insérer> Sélectionner le dossier Scope et nommez-le Emplacements. Cliquez avec le bouton droit sur le nouvel élément Emplacements> Insérer> Sélectionner la portée et nommez-le «Résultat de la recherche d’emplacement».

Cliquez sur le lien « Build query » dans le champ Scope Query. Consultez le gif ci-dessous pour créer la portée et créer une requête pour le résultat de la recherche.

Dans la boîte de dialogue Créer une requête de recherche, une fois que vous avez formé la requête, assurez-vous de cliquer sur le bouton de recherche à côté de l’entrée de la requête pour prévisualiser le résultat et remplir la syntaxe de la requête finale dans la zone de saisie de la requête de recherche ci-dessous. Sinon, il ne sélectionne pas lors de la sauvegarde.

+emplacement :{7C805DE3-A04E-4886-9B28-E9BFD5D147E2} ;modèle :{6ebb38ce-04fc-425c-895b-3c81fa4a7b5c}

Dans la valeur du jeton d’emplacement, indiquez l’ID de l’élément du dossier POI, où résident tous les éléments POI. Dans la valeur du jeton de modèle, indiquez l’ID de modèle de l’élément POI. Sauvegarde le.

Sitecore - Comprendre les approches de développement : une perspective de Sitecore

Accédez à la page « Résultat de la recherche d’emplacement » où nous avons ajouté les composants Carte et Résultats de la recherche, dans l’éditeur d’expérience.

Sélectionnez le composant Résultats de la recherche > Modifier les propriétés du composant > Sélectionnez l’option « Résultat de la recherche d’emplacement » dans le champ Étendue. Sauvegarde le.

6 Ajouter une portée dans le résultat de la recherche

7 Ajouter une portée dans le résultat de la recherche

Lors de l’aperçu, il n’affiche toujours pas le résultat de la recherche.

À des fins de test et de compréhension, ajoutez #g ou #g= dans l’URL du navigateur et entrez. Il charge le résultat comme ci-dessous.

Le paramètre g contient la valeur des coordonnées de géolocalisation et est utilisé pour évaluer si la demande de recherche concerne des éléments POI ou des éléments non POI.

Le composant Location Finder vient à la rescousse. Il fait le même travail en fournissant la valeur g, c’est-à-dire les coordonnées de l’emplacement recherché dans le Localisateur. Il fournit également l’ordre de tri.

De retour à l’éditeur d’expérience, sélectionnons maintenant le conteneur supérieur pour ajouter le composant Location Finder. Cliquez sur Ajouter ici > onglet Rechercher > Sélectionner le composant Location Finder et cliquez sur Sélectionner. Créez la source de données sous l’élément de données de la page actuelle. Sauvegarde le.

Modifiez les propriétés du composant Location Finder et fournissez les valeurs de champ comme ci-dessous.

Avec cette configuration jusqu’à présent, une carte montre tous les marqueurs mais sans aucune distance. Vérifiez Composant SXA Map Partie 3 sur la façon d’afficher la distance dans les marqueurs POI.

J’espère que cela t’aides. Bonne recherche de localisation Sitecore 🙂

Mode – Le mode a 3 options – Emplacement actuel, Mixte et Fourni par l’utilisateur. Apparemment, même si l’emplacement actuel est défini, lors de la sortie de la page, il reprend Mixed. On peut vérifier les propriétés des données sur la balise dans l’outil de développement. Ainsi, Emplacement actuel et Mixte se comportent de la même manière, c’est-à-dire qu’il invite l’utilisateur à autoriser l’accès à l’emplacement actuel et à saisir l’emplacement pour la recherche. Utilisateur fourni comme son nom l’indique, l’utilisateur doit fournir l’emplacement dans Location Finder et il ne demandera pas l’accès à l’emplacement actuel de l’utilisateur.

Nombre maximum de résultats prédictifs – Nombre d’emplacements suggérés dans la suggestion automatique. S’il n’est pas défini, la suggestion automatique est désactivée.

Cliquez sur la roue dentée de Location Finder pour modifier la source de données et définissez Facet sur Distance. Cela fournit o=Distance%2CAscending dans ULR qui aide l’API de recherche (/sxa/search/results/) à renvoyer le résultat trié en fonction de la distance. Définissez d’autres champs si nécessaire. Apparemment, le champ Filter Title ne semble pas être utilisé.

Enregistrez-le et prévisualisez la page. Le navigateur demandera à l’utilisateur d’autoriser l’accès à l’emplacement actuel comme ci-dessous.

Une fois autorisé, il fournit à g les coordonnées de votre emplacement actuel dans le hachage de l’URL. De plus, l’utilisateur peut rechercher l’emplacement souhaité et, lors de la sélection, les coordonnées de cet emplacement sont fournies en valeur g.

Avec cet utilisateur peut alors voir le résultat de la recherche et les marqueurs sur la carte.

Les marqueurs de carte affichent maintenant la distance avec le titre et la description comme ci-dessous.

Variante de POI par défaut – /sitecore/content/tenant/site/Presentation/Rendering Variants/POI/Default

Si la carte est configurée seule sur la page ou sans le composant Résultats de la recherche, et avec les points d’intérêt fournis dans la source de données de la carte, la distance n’est pas affichée dans le marqueur. Ces marqueurs sont chargés au chargement de la page (Sitecore.XA.Feature.Maps.Repositories.MapsRepository est impliqué) et non remplis via l’API de recherche (Sitecore.XA.Foundation.Search.Services.SearchService est impliqué).

Par défaut, l’unité de distance est en kilomètres. Vous pouvez le changer en Miles dans /sitecore/content/tenant/site/Settings/Facets/Distance.

Il s’agit du même élément Distance Facet que nous avons référencé dans le champ Facet de l’élément de source de données Location Finder.

Lorsque l’API de recherche //sxa/search/results est appelée ?

Si une page a un Location Finder seul, alors l’API n’est pas appelée. Si une page a un Location Finder avec au moins une carte ou un composant de résultats de recherche, l’API de recherche est appelée. Le résultat d’une API de recherche unique est appliqué à la fois aux composants Map et Search Results, car le Signature des résultats de la recherche de ces trois composants est le même, c’est-à-dire vide.

Tous ces composants liés à la recherche, c’est-à-dire tous les composants où le champ Signature des résultats de recherche est disponible dans leurs propriétés de composant, avec la même signature de résultats de recherche fonctionnent ensemble en contribuant des entrées à l’API de recherche et en partageant la réponse. Si nous voulons un autre groupe de composants qui doivent fonctionner ensemble, ces composants doivent avoir une autre signature de résultats de recherche unique afin que ce groupe ou un composant seul n’entre pas en conflit avec d’autres groupes de composants ou un composant.

Donc, si nous réduisons la taille de la page du composant Search Results, disons 2, l’API de recherche renverra 2 éléments et donc seulement 2 marqueurs affichés dans la carte. Modifiez les propriétés du composant des résultats de la recherche, définissez 2 dans le champ Taille de la page. Enregistrez et prévisualisez la page.

19 marqueurs réduits à la taille de la page

Mais si vous voulez afficher tous les marqueurs et permettre à Map de ne pas être affecté par le résultat du composant Search Results, renseignez le champ POI de la source de données Map qui est vide jusqu’à présent. Ci-dessous le résultat.

20 marqueurs n'ont qu'une distance depuis Api

Ici, les résultats de la recherche remplacent les marqueurs correspondants et contiennent les informations de distance. Un autre cas, où un point d’intérêt de localisation est trouvé dans le résultat de la recherche, mais non fourni dans la source de données de la carte, sera également ajouté à la carte.

Donc, pour rendre une carte indépendante et ne pas être affectée par les résultats de la recherche, fournissons une valeur unique dans le champ Signature des résultats de la recherche des propriétés du composant Carte.