Back to top

Autore Topic: Inserire le Google Review in modulo personalizzato  (Letto 3759 volte)

Offline Fabrizio4All

  • Esploratore
  • **
  • Post: 83
    • Mostra profilo
Inserire le Google Review in modulo personalizzato
« il: 19 Giu 2018, 16:36:58 »
Ciao a tutti, sto testando questo script


Codice: [Seleziona]
<div id="google-reviews"><>


<link rel="stylesheet" href="https://cdn.rawgit.com/stevenmonson/googleReviews/master/google-places.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDeivU57j-macv2fXXgbhKGM6cqMLmnAFI&signed_in=true&libraries=places"></script>


<script>
jQuery(document).ready(function( $ ) {
   $("#google-reviews").googlePlaces({
        placeId: 'ChIJp2QxV_sJVFMR1DEp1x_16F8' //Find placeID @: https://developers.google.com/places/place-id
      , render: ['reviews']
      , min_rating: 4
      , max_rows:4
   });
});
</script>


fonte https://www.launch2success.com/guide/display-google-reviews-website-2017


ma sto avendo qualche problema. Ho cambiato la API e il PlaceID ma non funzione non mi mostra alcuna recensione. Questo è il codice come modificato


Codice: [Seleziona]
<div id="google-reviews"><>


<link rel="stylesheet" href="https://www.miosito.it/google-places.css">
<script src="https://www.miosito.it/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCvPfMUrew-vF0YKVTKnD5zLxP1VzFR-t2o&signed_in=true&libraries=places"></script>


<script>
jQuery(document).ready(function( $ ) {
   $("#google-reviews").googlePlaces({
        placeId: 'ChIJS1F72ZfsLBMRjcrFRurFZRs' //Find placeID @: https://developers.google.com/places/place-id
      , render: ['reviews']
      , min_rating: 4
      , max_rows:4
   });
});
</script>




Per pubblicarlo ho installato il plugin Sourcerer https://www.regularlabs.com/extensions/sourcerer ed incollato il codice sopra e pubblicato il modulo.


Grazie a chiunque voglia darmi una mano
« Ultima modifica: 19 Giu 2018, 16:38:42 da Fabrizio4All »

Offline Fabrizio4All

  • Esploratore
  • **
  • Post: 83
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #1 il: 19 Giu 2018, 16:37:35 »
questo è il JS


Codice: [Seleziona]
/* https://github.com/peledies/google-places */
(function($) {


    $.googlePlaces = function(element, options) {


        var defaults = {
              placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' // placeId provided by google api documentation
            , 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'><>"); // create a plug for google to load data into
          initialize_place(function(place){
            plugin.place_data = place;
            // render specified 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);
            // Compare the 2 dates
            if(keyA < keyB) return -1;
            if(keyA > keyB) return 1;
            return 0;
          });
          return ray;
        }


        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 = sort_by_date(reviews);
          reviews = filter_minimum_rating(reviews);
          var html = "";
          var row_count = (plugin.settings.max_rows > 0)? plugin.settings.max_rows - 1 : reviews.length - 1;
          // make sure the row_count is not greater than available records
          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 = 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><>"+stars+"<p class='review-text'>"+reviews[i].text+"</p><>"
          };
          $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><>";
          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 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);


Offline Alex21

  • Appassionato
  • ***
  • Post: 645
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #2 il: 20 Giu 2018, 09:40:51 »
Ciao a tutti, sto testando questo script
Ciao, ho provato a riprodurre, ma non è semplice; in locale non funziona perché la Google Key non è abilitata localhost. Quella che esce è una bella pagina bianca.
Comunque:  hai dei messaggi di errore nella console del browser?
Bye.

Offline Fabrizio4All

  • Esploratore
  • **
  • Post: 83
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #3 il: 20 Giu 2018, 10:08:25 »
si ne ho


Codice: [Seleziona]
jquery.min.js:2


Uncaught TypeError: google.maps.Map is not a constructor
    at initialize_place (google-places.js:37)
    at $.googlePlaces.plugin.init (google-places.js:24)
    at new $.googlePlaces (google-places.js:129)
    at HTMLDivElement.<anonymous> (google-places.js:137)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.$.fn.googlePlaces (google-places.js:135)
    at HTMLDocument.<anonymous> ((index):654)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)




Codice: [Seleziona]
js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:61


Uncaught TypeError: Cannot read property '6' of undefined
    at Object._.rd (js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:61)
    at Object._.Q (js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:61)
    at new TY (stats.js:4)
    at stats.js:8
    at js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:138
    at js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:63
    at js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:138
    at Pd (js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:66)
    at Od.wa (js?v=3&key=AIzaSyCvPfMU87-vF0YKVTKnD5zLxP1VzFR-t2o&callback=google.loader.callbacks.maps:138)
    at stats.js:1


Offline Alex21

  • Appassionato
  • ***
  • Post: 645
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #4 il: 20 Giu 2018, 12:07:09 »
Questo errore:
Codice: [Seleziona]
Uncaught TypeError: google.maps.Map is not a constructor direi che è provocato da queste righe:
Codice: [Seleziona]
var initialize_place = function(c){
          var map = new google.maps.Map(document.getElementById('map-plug')); // ecc.
del file caricato qui:
Codice: [Seleziona]
https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js

L' errore Non è un costruttore si verifica se una classe javascript viene istanziata in un modo che la classe non prevede, se non erro.


Quindi mi sembra che, se avviene regolarmente il carico delle classi Google qui:
Codice: [Seleziona]
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDeivU57j-macv2fXXgbhKGM6cqMLmnAFI&signed_in=true&libraries=places"></script> allora ci sono stati dei cambiamenti recenti nelle classi Google e il javascript google-places.js  costruito per maneggiarle è da rivedere.
Ciao!

Offline Fabrizio4All

  • Esploratore
  • **
  • Post: 83
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #5 il: 20 Giu 2018, 14:24:09 »
allora grazie per le dritte, ma credo che il problema si di conflitto di qualche componente. Mi spiego. Ho creato un semplice pagina HMTL con questo codice.


Codice: [Seleziona]
<html>
<head>
<title>
mysite.it
</title>


<style>
* { font-family: verdana; font-size: 10pt; COLOR: gray; }
b { font-weight: bold; }
table { height: 50%; border: 1px solid gray;}
td { text-align: center; padding: 25;}


</style>
<link rel="stylesheet" href="https://www.miosito.it/google-places.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.miosito.it/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=fdsfsafsafdsa1VzFR-t2o&signed_in=true&libraries=places"></script>


<script>
jQuery(document).ready(function( $ ) {
   $("#google-reviews").googlePlaces({
        placeId: 'fdsfdsfsdfsdfsdfsdafsda' //Find placeID @: https://developers.google.com/places/place-id
      , render: ['reviews']
      , min_rating: 4
      , max_rows:4
   });
});
</script>
</head>
<body>
<center>
<p>Welcome to my site</p>
</center>
<div id="google-reviews"><>
</body>


</html>


Così funziona perfettamente e la console non mi restituisce errori. Ora per pubblicarlo in joomla sto usando Sourcerer Plugin. Ora capito il problema tu come lo pubblicheresti?Che sia Sourcerer a crearmi problemi?

Offline Alex21

  • Appassionato
  • ***
  • Post: 645
    • Mostra profilo
Re:Inserire le Google Review in modulo personalizzato
« Risposta #6 il: 20 Giu 2018, 20:13:21 »
Diciamo che non conosco Sourcerer perché non ho mai avuto occasione di usarlo.
La pagina funziona con il javascript sistemato nella <head>. Bene allora. Se Sourcerer ti fa mettere le cose nelle stesse posizioni della pagina di prova è probabile che funzioni.
Altrimenti c'è la soluzione dell'iframe che chiama la tua pagina, ma le chiamate ajax interne alla pagina sono tante e si può incorrere in errori di referrer.
Infine, che funziona di sicuro, c'è la soluzione dell'estensione joomla personale. Un modulo joomla senza file di linguaggio che non ti servono. Però questa soluzione è un po' laboriosa ed è da percorrere solo se stimi veramente importante avere una pagina con le Google Review.
Ciao.

 



Web Design Bolzano Kreatif