I am having a issue with some javascript code on a category page, one here is a example https://shop.it-doneright.co.uk/laptops-tablets/Laptops, I am trying to add a javascript shipping countdown timer that says order within x amount of time and it will be delivered on this date so I found some code online at https://medium.com/@tristannothling...r-e-commerce-store-without-using-4eb117165da2 and noticed at first it only worked on the first div element and not the others so I looked it up on Google and found it was due to the script using byID and others said it was better to use class so I changed the code to use class and queryselector but now it's not working, below is the current code I have
Code:
<div class="delivery-text">Super fast delivery available</div>
<script>
function isHoliday(date) {
const holidays = [
new Date(2024, 0, 1), // New Year's Day
new Date(2024, 3, 7), // Good Friday
new Date(2024, 3, 10), // Easter Monday
new Date(2024, 4, 1), // Early May Bank Holiday
new Date(2024, 4, 8), // King Charles Coronation
new Date(2024, 4, 29), // Spring Bank Holiday
new Date(2024, 7, 28), // Summer Bank Holiday
new Date(2024, 11, 25), // Christmas Day
new Date(2024, 11, 26), // Boxing Day
];
for (let i = 0; i < holidays.length; i++) {
if (date.getFullYear() === holidays[i].getFullYear() &&
date.getMonth() === holidays[i].getMonth() &&
date.getDate() === holidays[i].getDate()) {
return true;
}
}
return false;
}
function isBusinessDay(date) {
const dayOfWeek = date.getUTCDay();
return dayOfWeek > 0 && dayOfWeek < 6;
}
function nextBusinessDay(date) {
let nextDay = new Date(date);
nextDay.setUTCDate(date.getUTCDate() + 1);
while (!isBusinessDay(nextDay) || isHoliday(nextDay)) {
nextDay.setUTCDate(nextDay.getUTCDate() + 1);
}
return nextDay;
}
function countdownToDispatch() {
const now = new Date();
let dispatchDate;
//If it's before 11AM, a business day, and not a holiday, our dispatch date is today!
if (now.getUTCHours() < 14 && isBusinessDay(now) && !isHoliday(now)) {
dispatchDate = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 14, 0, 0, 0);
} else {
dispatchDate = nextBusinessDay(now);
dispatchDate.setUTCHours(14, 0, 0, 0);
}
const timeUntilDispatch = dispatchDate.getTime() - now.getTime();
const days = Math.floor(timeUntilDispatch / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeUntilDispatch % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeUntilDispatch % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeUntilDispatch % (1000 * 60)) / 1000);
let timeString = '';
if (days > 0) {
timeString += days + ' days ';
}
if (hours > 0) {
timeString += hours + ' hours ';
}
if (minutes > 0) {
timeString += minutes + ' minutes ';
}
if (seconds > 0) {
timeString += seconds + ' seconds ';
}
return timeString.trim();
}
function setOrderArrivalDate() {
const now = new Date();
let dispatchDate;
if (now.getUTCHours() < 14 && isBusinessDay(now) && !isHoliday(now)) {
dispatchDate = now;
} else {
dispatchDate = nextBusinessDay(now);
}
const arrivalDate = nextBusinessDay(dispatchDate);
let result = countdownToDispatch();
const formattedDate = arrivalDate.toLocaleDateString("en-GB", {
weekday: 'long',
day: 'numeric',
month: 'long'
});
const finalArrivalDateString = formattedDate.split(' ')[0] + ' ' + ordinalSuffix(arrivalDate.getUTCDate()) + ' ' + formattedDate.split(' ')[2];
//const deliveryText = document.getElementById('delivery-text');
const deliveryText = document.getElementsByClassName("delivery-text");
//const deliveryText = document.querySelectorAll('.delivery-text');
deliveryText.textContent = 'Order within the next ' + result + ' to receive your order on ' + finalArrivalDateString;
}
function ordinalSuffix(i) {
const j = i % 10, k = i % 100;
if (j == 1 && k != 11) {
return i + "st";
}
if (j == 2 && k != 12) {
return i + "nd";
}
if (j == 3 && k != 13) {
return i + "rd";
}
return i + "th";
}
setInterval(setOrderArrivalDate, 1000);
</script>
Last edited:
