Composant SXA Map Partie 6 Note moyenne de Google et nombre total d’avis / Blogs / Perficient

Défi:

En tant qu’utilisateur, lorsque je parcoure des emplacements ou des entreprises sur la carte SXA, je souhaite voir la note moyenne de Google et le nombre total d’avis dans la fenêtre d’informations afin de pouvoir choisir un meilleur emplacement ou une meilleure entreprise.

Solution:

Pour configurer la carte SXA sur la page, veuillez vérifier le premier message Composant de carte SXA.

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

SXA Map Note moyenne Google et nombre d’avis – Aperçu rapide

Ajouter une nouvelle variante de POI

Ajoutons une nouvelle variante de POI dans laquelle nous ajouterons la mise en œuvre de la notation et de l’évaluation.

Dans l’éditeur de contenu, accédez à l’élément par défaut suivant dans votre site client.

/sitecore/content///Presentation/Rendering Variants/POI/Default

Dupliquez-le et renommez-le « Marqueur avec note et avis ». Nous avons maintenant l’élément suivant.

/sitecore/content///Presentation/Rendering Variants/POI/Marker avec évaluation et révision

Faites un clic droit sur ce nouvel élément et ajoutez un élément Scriban. Appelons-le Évaluation et évaluation.

Copiez le code Scriban suivant dans le champ Modèle de l’élément Scriban « Évaluation et évaluation ».

{{ divid =  i_item.id | string.remove '{' | string.remove '}' }}
<div id='{{divid}}-rating-and-review-main' class="rating-and-review-main">
    <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>

N’hésitez pas à déplacer les textes – « Note moyenne », « Nombre d’avis » et « Aucun avis » vers les éléments du dictionnaire Sitecore plus tard.

Ajoutez la nouvelle variante de POI au nouveau type de POI

Accédez à l’élément POI simple suivant.

/sitecore/content///Presentation/Types de POI/POI simples

Dupliquez-le et renommez-le « POI simple avec évaluation et évaluation ». Nous avons maintenant l’élément suivant.

/sitecore/content///Presentation/POI Types/Simple POI avec évaluation et révision

Mettez à jour le champ « Variante par défaut » avec « Marqueur avec note et avis », c’est-à-dire celui que nous avons créé à l’étape précédente.

Mappage d’une nouvelle variante de POI sur la carte

Nous avons deux options pour mapper la nouvelle variante, c’est-à-dire « Marqueur avec note et avis » sur la carte SXA sur la page. Suivez l’un des éléments ci-dessous.

1. Mettez à jour le champ Type sur « POI simple avec évaluation et révision » sur chaque élément de POI référencé dans la source de données de la carte. Les éléments POI résident sous /sitecore/content///Data/POIs.
2. Mettez à jour le champ « Type de POI vers le mappage de variante de rendu » comme ci-dessous, c’est-à-dire que le type de POI « POI simple » correspond à « Marqueur avec évaluation et révision ». Cette option est utile lorsque nous voulons réutiliser les éléments de POI et que nous ne voulons pas modifier le type de POI dans les éléments de POI. Au lieu de cela, remplacez la variante pour le type de POI dans la source de données cartographique distincte elle-même.

Mettez à jour le champ « Type de POI vers le mappage des variantes de rendu » pour remplacer la variante du type de POI défini sur les éléments de POI.

Lier la note moyenne de Google et le total des avis Données

personnalisé-google-maps-connector.js

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

Différence entre Google Maps Connector.js original et personnalisé

custom-google-maps-connector.js hérite de la logique de /sitecore/media library/Base Themes/Google Maps JS Connector/Scripts/google-maps-connector et remplace pour déclencher un événement lors de l’ouverture d’InfoWindow et cet événement est écouté dans le code custom-location-rating-and-review.js. custom-google-maps-connector.js fournit également une fonction pour accéder aux cartes.

personnalisé-location-rating-and-review.js

XA.component.customLocationRatingAndReview = (function ($, document) {
/* eslint-disable */
    "use strict";
    var api = {},
        scriptsLoaded = false;
            
    api.init = function() {
        if ($("body").hasClass("on-page-editor")) {
        return;
        }
        if(!scriptsLoaded && document.querySelector('.component.map'))
        {
            scriptsLoaded = true;
            api.listenInfowindowOpenEvent();
        }   
    };  
    
    api.setRatingAndReviewBySearchText = function(ratingAndReviewDivId, noRatingAndReviewDivId, searchText) {
        var ratingAndReviewDiv = $(`#${ratingAndReviewDivId}`);
        var noRatingAndReviewDiv = $(`#${noRatingAndReviewDivId}`);
        if(!(ratingAndReviewDiv.html().indexOf('#average_rating#') > -1) && !(ratingAndReviewDiv.html().indexOf('#review_count#') > -1))
            return;
        
        var request = {query: searchText, fields: ['place_id']};
        var sxamap = XA.connector.mapsConnector.getMaps()[$('.map-canvas').attr('id')];
        var service = new google.maps.places.PlacesService(sxamap);
        service.findPlaceFromQuery(request, requestPlaceDetails(ratingAndReviewDiv, noRatingAndReviewDiv));
    }

    function requestPlaceDetails(ratingAndReviewDiv, noRatingAndReviewDiv) {
        return function (results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                var request = {
                    placeId: results[0].place_id,
                    fields: ['rating', 'user_ratings_total']
                };
                var sxamap = XA.connector.mapsConnector.getMaps()[$('.map-canvas').attr('id')];
                var service = new google.maps.places.PlacesService(sxamap);
                service.getDetails(request, getRatingAndReviewByPlaceID(ratingAndReviewDiv, noRatingAndReviewDiv));
            }
        };
    }

    function getRatingAndReviewByPlaceID(ratingAndReviewDiv, noRatingAndReviewDiv) {
        return function (place, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                if(noRatingAndReviewDiv.length > 0 && ratingAndReviewDiv.length > 0)
                {
                    if (place.rating != undefined && place.user_ratings_total != undefined) {
                        ratingAndReviewDiv.toggleClass('ratings-and-reviews');
                        ratingAndReviewDiv.removeClass('d-none');
                        ratingAndReviewDiv.html(ratingAndReviewDiv.html().replace('#average_rating#', `${place.rating.toFixed(1)} <i data-star="${place.rating.toFixed(1)}"></i>`).replace('#review_count#', place.user_ratings_total));
                        noRatingAndReviewDiv.remove();
                    }
                }
            }
        };
    }

    api.listenInfowindowOpenEvent = function() {
        $(document).on('infowindowOpen', function(event, infoWindow) {
            var openedInfoWindowsRatingReviewMainDiv = $('.rating-and-review-main');
            if(openedInfoWindowsRatingReviewMainDiv.length > 0) {
                openedInfoWindowsRatingReviewMainDiv.each(function() {
                var ratingReviewMainDivId = $(this).attr("id");
                var poiId = ratingReviewMainDivId.replace('-rating-and-review-main','');
                var ratingReviewDivId = `${poiId}-rating-and-review`;
                var noRatingReviewDivId = `${poiId}-no-rating-and-review`;
                var locationTitleText = $(`#${ratingReviewMainDivId} .title`).text();
                    api.setRatingAndReviewBySearchText(ratingReviewDivId,noRatingReviewDivId,locationTitleText);
                });             
            }
        });
    }
        
    return api;

}(jQuery, document));

XA.register("CustomLocationRatingAndReview", XA.component.customLocationRatingAndReview);

Dans les éléments POI, veuillez fournir le nom et l’adresse appropriés de l’emplacement de l’entreprise pour obtenir des détails précis sur l’évaluation et l’avis. Le champ « Titre » peut contenir la valeur au format « Nom de l’entreprise ou du lieu, adresse, ville, pays ». Dans custom-location-rating-and-review.js, lorsque l’événement « infowindowOpen » a été écouté, nous récupérons la valeur de titre du marqueur cliqué et utilisons cette valeur de titre pour récupérer le place_id, puis récupérons la note et révisons. .

Nous pouvons introduire des champs séparés pour chacune des informations et apporter les modifications de code nécessaires dans le code Scriban et JS pour concaténer toutes les valeurs de champ afin de former l’adresse complète souhaitée et passer comme 3.^rd paramètre à notre fonction personnalisée setRatingAndReviewBySearchText() dans custom-location-rating-and-review.js.

Ici, demander place_id est gratuit puisque nous appelons getDetails() et avons spécifié uniquement le champ place_id pour la réponse. (Référence)

La recherche à proximité et la recherche textuelle renvoient tous les champs de données disponibles pour le lieu sélectionné (un sous-ensemble des champs pris en charge) et vous serez facturé en conséquence. Il n’existe aucun moyen de limiter la recherche à proximité ou la recherche textuelle à renvoyer uniquement des champs spécifiques. Pour éviter de demander (et de payer) des données dont vous n’avez pas besoin, utilisez plutôt une requête Find Place. Par conséquent, nous avons utilisé findPlaceFromQuery(). (Référence)

composant-map-location-rating.scss

Téléchargez le composant-map-location-rating.scss et copiez-le dans votre dossier \ \sass. 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 finale – Note moyenne de Google et nombre total d’avis

Références de la documentation Javascript de Google Map :

Rechercher des requêtes Place

Demandes de détails sur le lieu

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