Composant de carte SXA, partie 8 Notes et avis Google dans les résultats de recherche / Blogs / Perficient

Défi:

Lorsque j’utilise la carte SXA avec les résultats de recherche pour explorer des lieux ou des entreprises à proximité, je souhaite inclure les notes et avis Google dans les résultats de recherche. Cet ajout me permettra de recueillir des informations précieuses sur chaque emplacement ou entreprise sans cliquer sur des marqueurs individuels pour ouvrir une fenêtre d’informations.

Solution:

Un aperçu rapide du résultat suivant de l’implémentation discutée dans cet article afin d’obtenir plus de clarté.

Aperçu rapide – Note et avis Google dans les résultats de recherche avec SXA Map

Ici, nous avons plusieurs rendus tels que Location Finder (Location Filter), SXA Map et Search results. Cette fois, nous n’avons pas besoin de fournir un élément de POI ou un dossier de POI dans le champ POI de la source de données cartographique. Oui, il devrait être vide.

Pour créer une page avec ces trois composants, veuillez consulter le message : Composant SXA Map, partie 2 avec résultats de recherche et recherche d’emplacement.

Pour ajouter la note moyenne de Google et le nombre total d’avis dans la fenêtre d’informations des marqueurs et pour afficher le modal pour afficher les avis les plus pertinents, veuillez consulter les articles suivants. Mettez simplement en œuvre les étapes, à l’exclusion de la partie configuration de la page, puisque nous considérerons la page de l’article ci-dessus.

Composant SXA Map, partie 6, note moyenne de Google et nombre total d’avis

Composant SXA Map Partie 7 Avis Google les plus pertinents

Une fois que nous avons terminé la mise en œuvre décrite dans les articles ci-dessus, nous procédons à la partie de configuration de page restante configurée à partir de l’article : Composant SXA Map, partie 2 avec résultats de recherche et recherche d’emplacement. Dans mon cas, j’ai considéré le chemin de la page comme /sitecore/content// /Home/Location Demo/Google review and rating demo/Location Search Result.

Erreur due au fait que le script de l’API JavaScript de Google Maps est inclus plusieurs fois et son correctif

Maintenant, une fois que nous parcourons l’URL de la page pour /sitecore/content// /Home/Location Demo/Google review and rating demo/Location Search Result, nous obtenons une erreur Google ci-dessous.

Erreur de l’API JavaScript de Google Maps plusieurs fois sur cette page

Nous obtenons une erreur : « Vous avez inclus l’API JavaScript de Google Maps plusieurs fois sur cette page. Cela peut provoquer des erreurs inattendues.

En effet, le script « https://maps.googleapis.com/maps/api/js?v=3.exp » est ajouté deux fois. Initialement, cela est inclus dans google-maps-connector.js dans /sitecore/media library/Base Themes/Google Maps JS Connector/Scripts/google-maps-connector, et nous avons remplacé cette logique de fichier dans nos cartes google-maps personnalisées. -connecteur.js. Nous obtenons cette erreur uniquement sur cette page où nous avons le composant « Location Finder ». Le fichier JS de ce composant – composant-search-location-filter.js dans /sitecore/media library/Base Themes/SearchTheme/Scripts/component-search-location-filter, appelle la fonction « XA.connector.mapsConnector.scriptsLoaded » à partir du google-maps-connector.js par défaut qui inclut le fichier de script de l’API JavaScript de Google Map et plus tard notre custom-google-maps-connector.js fait le même travail lui-même et donc les résultats d’erreur.

Pour résoudre cette erreur, téléchargeons le fichier personnalisé-google-maps-connector.js. Accédez au chemin de l’élément – ​​/sitecore/media library/Base Themes/Google Maps JS Connector/Scripts/google-maps-connector. Joignez le fichier téléchargé à ce chemin. Fondamentalement, nous remplaçons le fichier original lui-même. Veuillez considérer la source contrôlant cet élément ou le journaliser quelque part depuis que nous avons mis à jour l’élément de thème de base. Deuxièmement, désactivez le fichier custom-google-maps-connector.js dans le dossier de script du thème, c’est-à-dire renommez-le en « . désactivé », ou il peut être supprimé.

Créez et téléchargez le dossier Thème du site, ou créez avec votre commande personnalisée, le cas échéant. Ou nous construisons plus tard, dans un certain temps.

L’erreur « API JavaScript Google Maps plusieurs fois » devrait être résolue maintenant après la construction du thème SXA.

Ajouter une nouvelle variante de résultat de recherche

Accédez à la variante actuellement attribuée aux résultats de recherche. Dans mon cas, il s’agit de /sitecore/content///Presentation/Rendering Variants/Search Results/Locations.

Dupliquez cet élément et renommez-le « Emplacements avec note et avis ». Nous avons maintenant /sitecore/content///Presentation/Rendering Variants/Search Results/Locations with Rating and Reviews. Cliquez avec le bouton droit sur cet élément > Insérer > Scriban. Nommez-le comme « Évaluation et évaluation ». Déplacez l’élément Scriban vers le bas pour que les informations d’évaluation et d’évaluation apparaissent à la fin de la sortie de la variante. Mettez à jour la valeur de son champ « Modèle » avec le code ci-dessous.

{{ divid =  i_item.id | string.remove '{' | string.remove '}' }}
<div id='{{divid}}-rating-and-review-search-result' class="rating-and-review-search-result">
    <div class="title">
        {{i_item.title}}
    </div>
    <div class="description">
        {{i_item.description}}
    </div>
    <div class="rating-and-review d-none" id='{{divid}}-rating-and-review'>
        Average Rating #average_rating# Review count #review_count#
    </div>
    <div class="no-rating-and-review" id='{{divid}}-no-rating-and-review'>
        No reviews
    </div>
</div>

Accédez à l’élément de page et mettez à jour la variante avec cette nouvelle pour le rendu des résultats de recherche.

Mappage d’une nouvelle variante de POI sur la carte

Accédez à l’élément de source de données de la carte SXA sur la page, mettez à jour le champ « Type de POI vers le mappage de variantes de rendu » comme ci-dessous, c’est-à-dire que le type de POI « POI simple » correspond à « Marqueur avec évaluation et révision ».

Ajouter un modal pour les notes et avis Google

Ajoutons un rendu HTML brut (réutilisable) sur la page et mettons à jour la valeur du champ de code de sa source de données avec le code indiqué dans la section « Créer un modèle modal pour les avis Google les plus pertinents et d’autres données générales de l’entreprise ou de l’emplacement » de la publication. – Composant SXA Map Partie 7 Avis Google les plus pertinents.

Notes et avis Google dans les résultats de recherche

Effectuons la mise en œuvre critique de l’ajout de notes et d’avis Google dans les résultats de recherche. Ici, nous affichons la note moyenne de Google et le nombre total d’avis et lions l’événement de clic sur l’élément de résultat de recherche pour ouvrir le modal pour les avis les plus pertinents avec d’autres données générales.

Téléchargez le fichier personnalisé-location-rating-and-review.js et téléchargez-le dans le dossier de script du thème du site /sitecore/media library/Themes/{tenant}/{site}/{theme}/Scripts ou copiez-le dans votre dossier \ \scripts.

Voici la mise à jour du code que nous avons effectuée dans personnalisé-location-rating-and-review.js pour prendre en charge la notation Google et la liaison d’avis pour le rendu des résultats de recherche.

api.listenSearchResultLoaded = function() {
    XA.component.search.vent.on("results-loaded", function(i) {
        var searchResultItemRatingReviewDiv = $('.rating-and-review-search-result');
        if(searchResultItemRatingReviewDiv.length > 0) {
            //XA.connector.mapsConnector.loadScript is function that accepts key and a function which is called once the Google Map API JavaScript file is loaded
            XA.connector.mapsConnector.loadScript(searchResultItemRatingReviewDiv.attr("id"), function(){
                searchResultItemRatingReviewDiv.each(function() {
                var ratingReviewMainDivId = $(this).attr("id");
                var poiId = ratingReviewMainDivId.replace('-rating-and-review-search-result','');
                var ratingReviewDivId = `${poiId}-rating-and-review`;
                var noRatingReviewDivId = `${poiId}-no-rating-and-review`;
                var locationTitleText = $(`#${ratingReviewMainDivId} .title`).text();
                    api.setRatingAndReviewBySearchText(ratingReviewDivId,noRatingReviewDivId,locationTitleText);
                });                     
            });
        }               
    });     
}

La fonction setRatingAndReviewBySearchText() a déjà été utilisée dans ListenInfowindowOpenEvent() pour la fenêtre d’informations, et nous avons réutilisé le même code ici pour les résultats de recherche lorsque les résultats sont chargés.

La fonction ListenSearchResultLoaded() est appelée dans le init() de personnalisé-location-rating-and-review.js.

L’événement Click dans getRatingAndReviewByPlaceID() est mis à jour avec le code ci-dessous pour prendre en charge le nom d’emplacement affiché dans le modal ouvert lors d’un clic à partir de la fenêtre d’informations et de l’élément de résultats de recherche.

var locationName = $(`#${ratingAndReviewDiv.attr('id')}-main .title`).text() || $(`#${ratingAndReviewDiv.attr('id')}-search-result .title`).text(); //supporting both the clicks binded for map marker info window and search results items

mise à jour du code custom-location-rating-and-review.js

Amélioration du code XA.connector.mapsConnector.loadScript()

Nous avons amélioré le personnalisé-google-maps-connector.js code pour garantir qu’il appelle le rappel de manière appropriée, comme indiqué ci-dessous. Il garantit l’appel de la fonction de rappel si l’API Google Maps est chargée. Cela signifie que si « type de google » est défini, il appelle la fonction de rappel. Cette amélioration évite les problèmes potentiels où XA.connector.mapsConnector.loadScript() dans ListenSearchResultLoaded() pourrait parfois échouer à exécuter la fonction de rappel.

api.loadScript = function(key, callback) {
    //save each callback and call them all when script will be loaded - protection for loading maps twice
    callbacks.push(callback);

    if (!loading) {
        loading = true;
        if (typeof google === "undefined") {
            var script = document.createElement("script"),
                src = "https://maps.googleapis.com/maps/api/js?v=3.exp";
            script.type = "text/javascript";
            if (typeof key !== "undefined" && key !== "") {
                src += "&key=" + key + "&v=3.exp&signed_in=false";
            } else {
                src += "&signed_in=false";
            }
            src += "&libraries=places&callback=XA.connector.mapsConnector.scriptsLoaded";
            script.src = src;
            script.onload = function () {
                console.log("Google loader has been loaded, waiting for maps api");
            };
            document.body.appendChild(script);
        }
        else
        {
            // Google Maps API has already been loaded, no need to add it again
            console.log("Google Maps API is already loaded");
            callback.call(); //call the callback if the google is defined 
        }
    }
    else if(typeof google !== "undefined") 
    {
        callback.call(); //call the callback if the google is defined and the loading has finished
    }
};

Si notre code personnalisé dépend du chargement du script API Google Maps, nous pouvons transmettre notre fonction personnalisée comme rappel à XA.connector.mapsConnector.loadScript() avec une clé unique. Lorsque le script API Google Maps est chargé, notre fonction personnalisée s’exécutera. De plus, le code amélioré garantit que notre fonction est appelée, même si le script de l’API Google Maps est déjà chargé.

Exécutez les commandes suivantes dans PowerShell à partir du dossier Thème du site ou créez avec votre commande personnalisée, le cas échéant.

gulp buildAll

sxa upload All

Démo

Démo finale montrant les éléments et la page.

Démo des notes et avis Google dans les résultats de recherche avec SXA Map

J’espère que cela vous aidera, et n’hésitez pas à consulter d’autres Publications du composant SXA Map pour plus d’améliorations autour de Map.

Bon apprentissage Sitecore !