Я пытаюсь сделать слайдер обзоров Google, используя API Google и карусель сов, проблема в том, что обзоры Google добавляют данные в самый последний момент (после полной загрузки страницы), функция карусели сова вызывается перед загрузкой отзывов Google, поэтому карусель совы не отображается. не работает.
Я хочу загрузить обзор Google перед вызовом функции совы, чтобы заставить слайдер работать нормально.
Вот мой сегмент кода, верхний файл для Google Api, а ниже - простой php шаблон, где я использую этот код API.
<?php
/*
Configuration.
Note: You'll need a Google maps API key - requires both Maps JS and Places API services enabled.
*/
$place_ID = 'ChIJJWZ8calZwokRxvclFn2MzpA'; // Get from: https://developers.google.com/places/place-id
$business_type = ''; // Example: FinancialService (http://schema.org)
$business_name = '';
$street_address = '';
$locality = ''; // Example: Docklands (http://schema.org/addressLocality)
$region = '';
$post_code = '';
$logo_path = 'https://husney.nickpatrocky.com/wp-content/uploads/2020/02/logo.svg';
$min_star = '1'; // The minimum star rating (min = 1)
$max_rows = '5'; // The maximum number of results (max = 5)
$api_key = 'YOUR_API_KEY';
<script>
(function($) {
$.googlePlaces = function(element, options) {
var defaults = {
placeId: '<?php echo $place_ID; ?>',
render: ['reviews'],
min_rating: <?php echo $min_star; ?>,
max_rows: <?php echo $max_rows; ?>,
rotateTime: false
};
var plugin = this;
plugin.settings = {}
var $element = $(element),
element = element;
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
$element.html("<div id='the-reviews'></div>"); // 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('the-reviews'));
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;
var counter = 1; var slide = '';
html = html+"<div class='owl-carousel owl-theme'>"
for (var i = row_count; i >= 0; i--) {
if(counter == 1){ slide = 'active'; } else { slide = 'no'; }
var stars = renderStars(reviews[i].rating);
var date = convertTime(reviews[i].time);
html = html+" <div class='item'> testest </div>"
counter = counter+1;
};
html = html+"</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' itemprop='reviewRating' itemscope itemtype='http://schema.org/Rating'><meta itemprop='worstRating' content='1'/><meta itemprop='ratingValue' content='" + rating + "'/><meta itemprop='bestRating' content='5'/><ul>";
// fill in gold stars
for (var i = 0; i < rating; i++) {
stars = stars+"<li class='star'>★</li>";
};
// fill in empty stars
if(rating < 5){
for (var i = 0; i < (5 - rating); i++) {
stars = stars+"<li class='star inactive'>★</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 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);