logo

Ajouter les Avis Google

 

Nous avons récupéré et modifié du code sur Github pour notre intégration des avis Google sur un site (en l’occurrence WordPress sous CSS Bulma + Slik dans notre cas).

  1. Obtenir une clé API Google sur la console developers google
  2. Obtenir le « place ID » sur cette adresse
  3. créer un fichier javascript et le nommer « processing_comment.js » (le placer dans un fichier nommé « api » à placer dans le thème)
  4. intégrer  « processing_comment.js » dans le thème (mettre dans un fichier nommé « api »)
  5. intégrer les scipts, le php, le css dans le thème
  6. arranger selon ses besoins (télécharger le fichier complet ici)

Javascript  :  api/processing_comment.js

(function($) {

$.googlePlaces = function(element, options) {
var defaults = {
placeId: 'VOTRE PLACE ID' // a changer 
, render: ['reviews']
, min_rating: 0
, max_rows: 0
, rotateTime: false
};

var plugin = this;

plugin.settings = {}

var $element = $(element),
element = element;

plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
$element.html("<div id='map-plug'></div>"); // Important
initialize_place(function(place){
plugin.place_data = place;
// sections
if(plugin.settings.render.indexOf('reviews') > -1){
renderReviews(plugin.place_data.reviews);
if(!!plugin.settings.rotateTime) {
initRotation();
}
}
});
}

var initialize_place = function(c){
var map = new google.maps.Map(document.getElementById('map-plug'));

var request = {
placeId: plugin.settings.placeId
};

var service = new google.maps.places.PlacesService(map);

service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
c(place);
}
});
}

var sort_by_date = function(ray) {
ray.sort(function(a, b){
var keyA = new Date(a.time),
keyB = new Date(b.time);
// Comparer 2 dates
if(keyA < keyB) return -1;
if(keyA > keyB) return 1;
return 0;
});
return ray;
}

function randomComment (ray) {
let toReturnArray = [];
for (let i = 0; i < ray.length; i++) {
toReturnArray.push(ray[Math.floor(Math.random() * ray.length)]);
} 
return toReturnArray;
}

var filter_minimum_rating = function(reviews){
for (var i = reviews.length -1; i >= 0; i--) {
if(reviews[i].rating < plugin.settings.min_rating){
reviews.splice(i,1);
}
}
return reviews;
}

var renderReviews = function(reviews){
reviews = randomComment(reviews);
reviews = filter_minimum_rating(reviews);
var html = "";
var row_count = (plugin.settings.max_rows > 0)? plugin.settings.max_rows - 1 : reviews.length - 1;

row_count = (row_count > reviews.length-1)? reviews.length -1 : row_count;
for (var i = row_count; i >= 0; i--) {
var stars = renderStars(reviews[i].rating);
var date = convertTime(reviews[i].time);
html +="<div class='review-item'><div class='review-meta'><span class='review-author'>"+reviews[i].author_name+"</span><span class='review-sep'>, </span><span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
};
$element.append(html);
}

var initRotation = function() {
var $reviewEls = $element.children('.review-item');
var currentIdx = $reviewEls.length > 0 ? 0 : false;
$reviewEls.hide();
if(currentIdx !== false) {
$($reviewEls[currentIdx]).show();
setInterval(function(){ 
if(++currentIdx >= $reviewEls.length) {
currentIdx = 0;
}
$reviewEls.hide();
$($reviewEls[currentIdx]).fadeIn('slow');
}, plugin.settings.rotateTime);
}
}

var renderStars = function(rating){
var stars = "<div class='review-stars'><ul>";

// fill in gold stars
for (var i = 0; i < rating; i++) {
stars = stars+"<li><i class='star'></i></li>";
};

// fill in empty stars
if(rating < 5){
for (var i = 0; i < (5 - rating); i++) {
stars = stars+"<li><i class='star inactive'></i></li>";
};
}
stars = stars+"</ul></div>";
return stars;
}

var convertTime = function(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
//var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var months = ['Jan','Fev','Mar','Avr','Mai','Juin','Jul','Aout','Sep','Oct','Nov','Dec'];
var time = months[a.getMonth()] + ' ' + a.getDate() + ', ' + a.getFullYear();
return time;
}

plugin.init();

}

$.fn.googlePlaces = function(options) {

return this.each(function() {
if (undefined == $(this).data('googlePlaces')) {
var plugin = new $.googlePlaces(this, options);
$(this).data('googlePlaces', plugin);
}
});

}

})(jQuery);
Dans le Footer après Jquery
<!-- API GOOGLE -->
<script src="<?php echo get_template_directory_uri(); ?>/api/processing_comment.js"></script> 
<script src="//maps.googleapis.com/maps/api/js?key=VOTRE-CLE-API-SANS-ESPACES&libraries=places">// changer la clé API
</script>
<script>
jQuery(document).ready(function( $ ) {
$("#google-reviews").googlePlaces({
placeId: 'VOTRE-PLACE-ID' // changer le place id
, render: ['reviews']
, min_rating: 3
, sort_by_date: true
});
});
</script>
CSS
/*--------------------------------------------------------------
# GOOGLE AVIS
--------------------------------------------------------------*/

#map-plug {
display:none;
}
#google-reviews{
margin-bottom: 5rem;
}
.review-item {
margin:50px auto 20px auto;
padding:1em;
}
.review-date{
display: none;
}
.review-text{
margin: 0 auto;
position: relative;
padding: 3.5rem 3rem;
margin-bottom: 2rem;
min-height: 220px;
}
.review-text:before{
content: '"';
line-height: 1em;
font-size: 4em;
font-weight: bold;
color: var(--color-6);
position: absolute;
top: 1rem;
left: 3rem;
}
.review-text:after {
position: absolute;
left: 2.7em;
bottom: -0.7em;
width: 1.3em;
height: 2.3em;
content: '';
transform: skewY(-50deg);
z-index: -1;
background-color: var(--color-3);
}
.review-stars ul{
display: inline-block;
list-style: none !important;
margin: 0 0 1rem 0;
padding: 0;
}
.review-stars ul li {
float: left;
list-style: none !important;
margin-right: 1px;
line-height: 1;
}
.review-stars ul li i {
font-style: normal;
list-style: none !important;
}
.review-stars ul li i.inactive {
color: #c6c6c6;
}
.star:after {
content: "05";
}
.review-stars ul li::before {
content: "";
}
#google-reviews .slick-dots li button, .slider-presse .slick-dots li button{
display: block;
width: 10px;
height: 10px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: #fff;
border: 2px solid var(--color-1);
}
#google-reviews .slick-dots li button:before, .slider-presse .slick-dots li button:before{
content: '';
}
#google-reviews .slick-dots li.slick-active button, .slider-presse .slick-dots li.slick-active button{
background-color: var(--color-1);
}

 

Appel de l’outil dans le thème wordpress (CSS Bulma – Slik)

<div id="google-reviews"></div><!-- /Avis google -->