https://www.academydentalcare.com/js/jquery-google-reviews.js

1/* README
2Inspired by Steven Monson's magnificent article here:
3https://www.launch2success.com/guide/display-google-reviews-website-2017/
4Stevens code was based on peledies jquery plugin on github:
5https://github.com/peledies/google-places
6made me think and remix their work into the following lines.
7Thank you guys!
8*/
9
10(function($) {
11
12    $.fn.googlePlaces = function(options) {
13      // This is the easiest way to have default options.
14      var settings = $.extend({
15        // These are the defaults.
16        header: "",
17        footer: "",
18        max_rows: 8,
19        min_rating: 5,
20        months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
21        text_break_length: "90",
22        shorten_names: false,
23        placeId: "",
24        googleLogo: '',
25      }, options);
26  
27      var target_div = this[0];
28      var target_div_jquery = this;
29  
30      var renderHeader = function(header) {
31        var html = "";
32        html += header + "<br>";
33        target_div_jquery.append(html);
34      };
35  
36      var renderFooter = function(footer) {
37        var html = "";
38        html += "<br>" + footer + "<br>";
39        target_div_jquery.after(html);
40      };
41  
42      var shorten_name = function(name) {
43        if (name.split(" ").length > 1) {
44          var xname = "";
45          xname = name.split(" ");
46          return xname[0] + " " + xname[1][0] + ".";
47        }
48      };
49      var google_logo = function(googleLogo) {
50        var logo = '<img src="../images/google-logo.png"> ';
51        return logo;
52    };
53      var renderStars = function(rating) {
54        var stars = '<div class="review-stars"><ul>';
55        // fill in gold stars
56        for (var i = 0; i < rating; i++) {
57          stars += '<li><i class="star"></i></li>';
58        }
59        // fill in empty stars
60        if (rating < 5) {
61          for (var i = 0; i < (5 - rating); i++) {
62            stars += '<li><i class="star inactive"></i></li>';
63          }
64        }
65        stars += "</ul></div>";
66        return stars;
67      };
68  
69      var convertTime = function(UNIX_timestamp) {
70        var a = new Date(UNIX_timestamp * 1000);
71        var months = settings.months;
72        var time = a.getDate() + ". " + months[a.getMonth()] + " " + a.getFullYear();
73        return time;
74      };
75  
76      var filterReviewsByMinRating = function(reviews) {
77        for (var i = reviews.length - 1; i >= 0; i--) {
78          if (reviews[i].rating < settings.min_rating) {
79            reviews.splice(i, 1);
80          }
81        }
82        return reviews;
83      };
84  
85      var renderReviews = function(reviews) {
86        reviews.reverse();
87        var html = "";
88        var row_count = (settings.max_rows > 0) ? settings.max_rows - 1 : reviews.length - 1;
89        // make sure the row_count is not greater than available records
90        row_count = (row_count > reviews.length - 1) ? reviews.length - 1 : row_count;
91        for (var i = row_count; i >= 0; i--) {
92          var stars = renderStars(reviews[i].rating);
93          var date = convertTime(reviews[i].time);
94          var logo = google_logo();
95          var name = settings.shorten_names ? shorten_name(reviews[i].author_name) : reviews[i].author_name;
96          var style = (reviews[i].text.length > parseInt(settings.text_break_length)) ? "review-item-long" : "review-item";
97          html = html + "<div class="+ style +"><div class='glogo'>" + logo + "</div><div class='review-meta'><span class='review-author'>" + name + "<br><span class='review-date'>"+ date + "</span></span><span class='review-sep'></span>" + "</div>" + stars + "<p class='review-text'>" + reviews[i].text + "</p></div>";
98        }
99        target_div_jquery.append(html);
100      };
101  
102      // GOOGLE PLACES API CALL STARTS HERE
103      // initiate a Google Places Object
104      var service = new google.maps.places.PlacesService(target_div);
105      // set.getDetails takes 2 arguments: request, callback
106      // see documentation here:  https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlacesService
107      const request = {
108        placeId: settings.placeId
109      };
110      // the callback is what initiates the rendering if Status returns OK
111      var callback = function(place, status) {
112        if (status == google.maps.places.PlacesServiceStatus.OK) {
113          console.log(place.opening_hours.open_now);

114          console.log(place.opening_hours.open_now ? "Wir haben geöffnet!" : "Sprechen Sie uns auf den Anrufbeantworter oder schreiben Sie uns eine E-Mail.")
115          var filtered_reviews = filterReviewsByMinRating(place.reviews);
116          renderHeader(settings.header);
117          renderReviews(filtered_reviews);
118          renderFooter(settings.footer);
119        }
120      }
121  
122      return this.each(function() {
123        // Runs the Plugin
124        if (settings.placeId === undefined || settings.placeId === "") {
125          console.error("NO PLACE ID DEFINED");
126          return
127        }
128        service.getDetails(request, callback);
129      });
130  
131    };
132  
133  }(jQuery));