Я создал этот плагин здесь, и он отлично работает на следующей странице https://nourhammoury.com/Однако на этой домашней странице я получаю в консоли сообщение об ошибке: moment.tz не определен, и основной js-скрипт (см. ниже) не выполняется.
Ниже приведен код, который я использую. Надеюсь, я смогу найти решение
Код: Выделить всё
Код: Выделить всё
jQuery(document).ready(function($) {
// Ensure nhAppointments and moment.tz are defined before using them
if (typeof nhAppointments === 'undefined') {
console.error('nhAppointments is not defined');
return;
}
if (typeof moment.tz === 'undefined') {
console.error('moment.tz is not defined');
return;
}
var stripe = Stripe('*****');
var elements = stripe.elements();
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
var card = elements.create('card', { style: style });
card.mount('#card-element');
var availableDates = {};
var bookedSlots = {};
// Initialize FullCalendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: function(start, end, timezone, callback) {
$.ajax({
url: nhAppointments.ajax_url,
dataType: 'json',
method: 'POST',
data: {
action: 'nh_get_client_slots',
start_date: start.format('YYYY-MM-DD'),
end_date: end.format('YYYY-MM-DD')
},
success: function(response) {
var events = [];
availableDates = {}; // Clear previous data
bookedSlots = {}; // Clear previous data
if (response.success) {
// Process booked slots
$.each(response.data.booked_slots, function(index, slot) {
var originalDateTime = slot.date + ' ' + slot.time + ' ' + slot.timezone;
var selectedTimezone = moment.tz.guess();
var convertedDateTime = moment.utc(slot.date + 'T' + slot.time).tz(selectedTimezone).format();
bookedSlots[convertedDateTime] = true;
events.push({
title: nhAppointments.slotBooked,
start: convertedDateTime,
allDay: false,
color: 'red', // Custom color for booked slots
editable: false
});
});
// Process available slots
$.each(response.data.available_slots, function(index, slot) {
var originalDateTime = slot.date + ' ' + slot.time + ' ' + slot.timezone;
var convertedDateTime = moment.utc(slot.date + 'T' + slot.time).tz(moment.tz.guess()).format();
availableDates[convertedDateTime] = true;
if (!bookedSlots[convertedDateTime]) {
events.push({
title: nhAppointments.slotAvailable,
start: convertedDateTime,
allDay: false,
color: 'blue' // Custom color for available slots
});
}
});
}
callback(events);
},
error: function(xhr, status, error) {
console.error('Error fetching slots:', error); // You may want to keep this for catching AJAX errors
}
});
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var selectedDate = start.format('YYYY-MM-DD');
var selectedTime = start.format('HH:mm');
var selectedTimezone = moment.tz.guess();
var dateTime = selectedDate + 'T' + selectedTime + ':00';
if (!bookedSlots[dateTime] && availableDates[dateTime]) {
$('#appointment-date').val(selectedDate);
$('#appointment-time').val(selectedTime);
$('#appointment-timezone').val(selectedTimezone);
$('#nh-booking-form').show();
$('#calendar').hide();
} else {
alert(nhAppointments.slotNotAvailable);
}
},
dayRender: function(date, cell) {
var dateStr = date.format('YYYY-MM-DD');
if (!availableDates[dateStr]) {
cell.addClass('fc-disabled');
cell.css('background-color', '#f4f4f4');
cell.css('cursor', 'default');
}
},
eventClick: function(event) {
var selectedDate = event.start.format('YYYY-MM-DD');
var selectedTime = event.start.format('HH:mm');
var selectedTimezone = moment.tz.guess();
var dateTime = selectedDate + 'T' + selectedTime + ':00';
if (event.title === nhAppointments.slotAvailable) {
$('#appointment-date').val(selectedDate);
$('#appointment-time').val(selectedTime);
$('#appointment-timezone').val(selectedTimezone);
$('#nh-booking-form').show();
$('#calendar').hide();
} else {
alert(nhAppointments.slotAlreadyBooked);
}
},
eventRender: function(event, element) {
if (event.color) {
element.css('background-color', event.color);
element.css('border-color', event.color);
}
}
});
$('#nh-booking-form').on('submit', function(e) {
e.preventDefault();
stripe.createPaymentMethod('card', card).then(function(result) {
if (result.error) {
alert(result.error.message);
} else {
var formData = $('#nh-booking-form').serialize();
formData += '&payment_method_id=' + result.paymentMethod.id;
$.ajax({
type: 'POST',
url: nhAppointments.ajax_url,
data: {
action: 'nh_handle_booking',
data: formData
},
success: function(response) {
if (response.success) {
// Convert the UTC time to the user's local time
var utcDateTime = moment.utc(response.data.date + 'T' + response.data.time);
var localDateTime = utcDateTime.local();
var localDate = localDateTime.format('YYYY-MM-DD');
var localTime = localDateTime.format('HH:mm');
var localTimezone = moment.tz.guess(); // Get the user's local timezone
$('#nh-booking-form').hide();
$('#confirmation-message').html('' + nhAppointments.bookingSuccessful + '' +
'' + nhAppointments.appointmentConfirmed + '
' +
'
[b]' + nhAppointments.nameLabel + '[/b] ' + response.data.name + '
' +
'
[b]' + nhAppointments.phoneLabel + '[/b] ' + response.data.phone + '
' +
'
[b]' + nhAppointments.dateLabel + '[/b] ' + localDate + '
' +
'
[b]' + nhAppointments.timeLabel + '[/b] ' + localTime + ' (' + localTimezone + ')
');
// Refetch events to update the calendar
$('#calendar').fullCalendar('refetchEvents');
} else {
alert('Error: ' + response.data.message);
}
},
error: function(xhr, status, error) {
alert('AJAX error: ' + error);
}
});
}
});
});
});
Подробнее здесь: https://stackoverflow.com/questions/787 ... -home-page