Joomla.it Forum
Non solo Joomla... => Sviluppo => : Fabrizio4All 19 Jun 2018, 16:36:58
-
Ciao a tutti, sto testando questo script
<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 (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
<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 (https://www.regularlabs.com/extensions/sourcerer) ed incollato il codice sopra e pubblicato il modulo.
Grazie a chiunque voglia darmi una mano
-
questo è il JS
/* 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);
-
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.
-
si ne ho
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)
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
-
Questo errore:
Uncaught TypeError: google.maps.Map is not a constructor direi che è provocato da queste righe:var initialize_place = function(c){
var map = new google.maps.Map(document.getElementById('map-plug')); // ecc. del file caricato qui: 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: <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!
-
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.
<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?
-
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.