Composant SXA Map, partie 7 Commentaires Google les plus pertinents / Blogs / Perficient

Défi:

En tant qu’utilisateur, lorsque je parcoure des emplacements ou des entreprises sur la carte SXA, je souhaite voir les commentaires les plus pertinents des avis Google afin de pouvoir obtenir plus d’informations sur l’emplacement ou l’entreprise.

Solution:

Pour configurer la carte SXA sur la page et ajouter la note moyenne de Google et le total des avis dans la fenêtre d’information des marqueurs, veuillez vérifier le post-Composant SXA Map, partie 6, note moyenne de Google et nombre total d’avis.

Une fois que nous avons terminé la mise en œuvre discutée dans l’article ci-dessus, nous améliorons la carte SXA pour afficher les commentaires des avis Google les plus pertinents dans un modal lorsque nous cliquons sur « Note moyenne de Google et avis totaux » affichés dans la fenêtre d’informations.

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 du mode de notation et d’évaluation de Google

Inclure Bootstrap JS dans le thème du site SXA

Veuillez vous référer au message – Intégrer la bibliothèque dans Sitecore SXA rédigé par l’un de mes formidables collègues, – Anchal Katoch, pour inclure Bootstrap JS à notre thème de site SXA. Ceci est nécessaire pour notre implémentation modale.

Créez 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.

Nous pouvons utiliser la même page que nous avons développée dans le cadre de la publication Composant SXA Map, partie 6, note moyenne de Google et nombre total d’avis. Ou dupliquez le même élément de page. Ouvrez l’élément de page dans l’éditeur d’expérience. Ajoutez un rendu dans l’espace réservé principal > Contenu de la page > HTML brut (réutilisable). Ajoutez la source de données et mettez à jour le champ « Code » avec le code de modèle modal suivant.

<div class="modal fade d-none" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-rating-and-review"></div>
      <div class="modal-body">                
        <div class="google-review-comment row d-none">
            <div class="col-4">
                <img class="profile_photo_url" src="https://blogs.perficient.com/2023/10/31/sxa-map-component-part-7-most-relevant-google-reviews/INSERT_PROFILE_PHOTO_URL_HERE" alt="Profile Photo"/>
            </div>
            <div class="col-8">
                <a class="author_name" href="INSERT_AUTHOR_URL_HERE" target="_blank">INSERT_AUTHOR_NAME_HERE</a>
                <div class="rating">INSERT_RATING_HERE </div>
                <div class="relative_time_description">INSERT_RELATIVE_TIME_DESCRIPTION_HERE</div>
                <div class="time">Posted on INSERT_TIME_HERE</div>
                <p class="text">INSERT_REVIEW_TEXT_HERE</p>
            </div>
        </div>
        <div>
            <a class="more_reviews" href="" target="_blank">Check on Google Map for more reviews</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Pour simplifier, nous avons utilisé le rendu « Plain HTML (Reusable) ». Vous pouvez choisir une méthode alternative, telle que le clonage du contenu de la page ou l’ajout d’une variante du contenu de la page, pour incorporer ce code dans Scriban. Chacune de ces approches sera efficace tant que nous placerons avec succès ce code sur la page.

Ajoutez un événement de clic sur la « note moyenne de Google et le total des avis » affichés dans la fenêtre d’informations pour préparer et ouvrir le modal.

Téléchargez les derniers fichiers personnalisé-location-rating-and-review.js et composant-map-location-rating.scss, et copiez-les dans les dossiers scripts et sass souhaités dans le dossier Thème. Fondamentalement, nous mettons à jour les fichiers existants ici.

Nous avons apporté quelques mises à jour à custom-location-rating-and-review.js. Dans ces mises à jour, nous avons amélioré la fonction requestPlaceDetails en incluant ‘reviews’ dans le paramètre field, ce qui nous permet de récupérer la liste des avis dans la réponse de getDetails(). De plus, pour faciliter la préparation et l’ouverture du modal, nous avons également mis à jour la fonction getRatingAndReviewByPlaceID() pour gérer l’événement de clic sur la « note moyenne de Google et le total des avis » affichés dans la fenêtre d’information. De plus, nous avons introduit une nouvelle fonction, getDateAndTimeFromTimestamp(), comme suit.

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','reviews'] //reviews has been added so we get the reviews in response
            };
            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));
                    
                    //On click of Rating and review text, open the Modal showing the most relavant reviews.  
                    ratingAndReviewDiv.click(function(){
                        var existingReviewModal = $(`${ratingAndReviewDiv.attr('id')}-modal`);
                        var reviewModal;
                        var exampleModel = $('#exampleModal');
                        if(exampleModel.length == 0)
                        {
                            return;
                        }
                        
                        if(existingReviewModal.length == 0)
                        {
                            var locationName = $(`#${ratingAndReviewDiv.attr('id')}-main .title`).text();
                            var ratingAndReviewData = ratingAndReviewDiv.html();
                            reviewModal = exampleModel.clone();
                            reviewModal.attr('id',`${ratingAndReviewDiv.attr('id')}-modal`);
                            reviewModal.removeClass('d-none');
                            reviewModal.find('.modal-title').text(locationName);                                
                            reviewModal.find('.modal-rating-and-review').html(ratingAndReviewData);
                            var commentTemplate = reviewModal.find('.google-review-comment');
                            $.each(place.reviews, function(i, comment) {
                                var reviewComment = commentTemplate.clone();
                                reviewComment.find('.profile_photo_url').attr('src',comment.profile_photo_url);
                                reviewComment.find('.author_name').text(comment.author_name);
                                reviewComment.find('.author_name').attr('href',comment.author_url);
                                reviewComment.find('.rating').html( `${comment.rating.toFixed(1)} <i data-star="${comment.rating.toFixed(1)}"></i>`);
                                reviewComment.find('.relative_time_description').text(comment.relative_time_description);
                                reviewComment.find('.time').text(getDateAndTimeFromTimestamp(comment.time));
                                reviewComment.find('.text').text(comment.text);
                                reviewComment.appendTo(reviewModal.find('.google-review-comment').parent());
                                reviewComment.removeClass('d-none');
                            });
                            reviewModal.find('.more_reviews').attr("href",`https://www.google.com/maps?q=${encodeURIComponent(locationName)}`);
                            reviewModal.find('.more_reviews').detach().appendTo(reviewModal.find('.google-review-comment').parent());
                            reviewModal.appendTo($('exampleModal').parent());
                        }
                        else
                        {
                            reviewModal = existingReviewModal;
                        }
                        var myModal = new bootstrap.Modal(reviewModal, {
                          keyboard: false
                        });
                        myModal.toggle();
                    });
                    noRatingAndReviewDiv.remove();
                }
            }
        }
    };
}

function getDateAndTimeFromTimestamp(timestamp)
{
    const date = new Date(timestamp * 1000);
    const formattedDate = date.toLocaleString();
    return formattedDate;
}

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 du modal d’évaluation et d’évaluation de Google

La liste des avis en réponse à getDetails() contient un maximum de 5 avis triés par « les plus pertinents » par défaut (Référence). Par conséquent, nous avons fourni un lien « Vérifiez sur Google Maps pour plus d’avis » dans le modal à la fin de la liste des avis, qui mène à l’emplacement sur Google Maps. À partir de là, les utilisateurs peuvent consulter l’onglet Avis pour plus d’avis.

De chaque commentaire d’avis, nous extrayons les données suivantes dans la réponse getDetails() : profile_photo_url, author_name, author_url, rating, relative_time_description, heure (convertie en date et heure) et texte. Nous lions ensuite ces données au Modal dans personnalisé-location-rating-and-review.js.

Vérifiez Extension de carte 2.0 Référentiel pour l’implémentation présentée dans cet article.

Note: Pour récupérer tous les avis du Business, vous pouvez explorer le API de profil d’entreprise Google service.

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 🙂