Javascript shipping countdown issue

ianhaney · 2024-12-22T08:34:54+0000

I am having a issue with some javascript code on a product 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

<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.getFullYear() &&
date.getMonth() === holidays.getMonth() &&
date.getDate() === holidays.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>

VBService · 2024-12-22T09:27:49+0000

The code works correctly even with using byID; there's no need to use a class for this, although you can if you prefer. However, your code didn't work because it was copied incorrectly from the website.

In JavaScript, if an error is encountered in any line of code, the browser stops executing the rest of the code. So, you just need to fix the errors caused by copying the code incorrectly, and everything should work as expected.

e.g. check this out.
Your code

JavaScript:

  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.getFullYear() &&
          date.getMonth() === holidays.getMonth() &&
          date.getDate() === holidays.getDate()) {
        return true;
      }
    }
    return false;
  }

code from the website

ianhaney · 2024-12-22T09:31:32+0000

VBService said:
The code works correctly even with using byID; there's no need to use a class for this, although you can if you prefer. However, your code didn't work because it was copied incorrectly from the website.

In JavaScript, if an error is encountered in any line of code, the browser stops executing the rest of the code. So, you just need to fix the errors caused by copying the code incorrectly, and everything should work as expected.

e.g. check this out.
Your code

JavaScript:

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.getFullYear() && date.getMonth() === holidays.getMonth() && date.getDate() === holidays.getDate()) { return true; } } return false; }

code from the website
View attachment 3043

I checked the code in my file and it's the same as you indicated, it may be the forum has amended it somehow or for some reason

ianhaney · 2024-12-22T09:33:57+0000

I did create another post with the correct code at https://www.thecodingforums.com/threads/javascript-shipping-countdown-timer-code-help.976382/

VBService · 2024-12-22T09:55:33+0000

BTW,
no offense, I see you have a problem using ...

Check this out.

HTML:

<div id="delivery-text1">Super fast delivery available</div>
<div id="delivery-text2">Super fast delivery available</div>
<div id="delivery-text3">Super fast delivery available<span></span></div>

<div class="delivery-text4">Super fast delivery available</div>
<div class="delivery-text5">Super fast delivery available</div>
<div class="delivery-text6">Super fast delivery available</div>

<!-- bonus -->
<div id="lorem-id-1" class="delivery-text6">Super fast delivery available</div>
<div id="lorem-id-2" class="delivery-text6">Super fast delivery available<span></span></div>

<script>
  const delivery_text_1 = document.getElementById('delivery-text1');
  delivery_text_1.textContent = 'Order within the next: Lorem-1';

  const delivery_text_2 = document.querySelector('#delivery-text2');
  delivery_text_2.textContent = 'Order within the next: Lorem-2';

  const delivery_text_3 = document.querySelector('#delivery-text3 span');
  delivery_text_3.textContent = ': Lorem-3';

  const delivery_text_4 = document.getElementsByClassName('delivery-text4')[0];
  delivery_text_4.textContent = 'Order within the next: Lorem-4';

  const delivery_text_5 = document.querySelectorAll('.delivery-text5')[0];
  delivery_text_5.textContent = 'Order within the next: Lorem-5';

  const delivery_text_6 = document.querySelector('.delivery-text6');
  delivery_text_6.textContent = 'Order within the next: Lorem-6';

  // bonus
  const delivery_text_7 = document.querySelector('#lorem-id-1.delivery-text6');
  delivery_text_7.textContent = 'Order within the next: Lorem-7';

  const delivery_text_8 = document.querySelector('#lorem-id-2.delivery-text6 span');
  delivery_text_8.textContent = ': Lorem-8'; 
</script>

<style>
  div span {
    font-weight: bold;
  }
</style>

ianhaney · 2024-12-22T10:02:02+0000

VBService said:

BTW,
no offense, I see you have a problem using ...

Check this out.

HTML:

<div id="delivery-text1">Super fast delivery available</div>
<div id="delivery-text2">Super fast delivery available</div>
<div id="delivery-text3">Super fast delivery available<span></span></div>

<div class="delivery-text4">Super fast delivery available</div>
<div class="delivery-text5">Super fast delivery available</div>
<div class="delivery-text6">Super fast delivery available</div>

<!-- bonus -->
<div id="lorem-id-1" class="delivery-text6">Super fast delivery available</div>
<div id="lorem-id-2" class="delivery-text6">Super fast delivery available<span></span></div>

<script>
  const delivery_text_1 = document.getElementById('delivery-text1');
  delivery_text_1.textContent = 'Order within the next: Lorem-1';

  const delivery_text_2 = document.querySelector('#delivery-text2');
  delivery_text_2.textContent = 'Order within the next: Lorem-2';

  const delivery_text_3 = document.querySelector('#delivery-text3 span');
  delivery_text_3.textContent = ': Lorem-3';

  const delivery_text_4 = document.getElementsByClassName('delivery-text4')[0];
  delivery_text_4.textContent = 'Order within the next: Lorem-4';

  const delivery_text_5 = document.querySelectorAll('.delivery-text5')[0];
  delivery_text_5.textContent = 'Order within the next: Lorem-5';

  const delivery_text_6 = document.querySelector('.delivery-text6');
  delivery_text_6.textContent = 'Order within the next: Lorem-6';

  // bonus
  const delivery_text_7 = document.querySelector('#lorem-id-1.delivery-text6');
  delivery_text_7.textContent = 'Order within the next: Lorem-7';

  const delivery_text_8 = document.querySelector('#lorem-id-2.delivery-text6 span');
  delivery_text_8.textContent = ': Lorem-8';
</script>

<style>
  div span {
    font-weight: bold;
  }
</style>

View attachment 3044

Sorry unsure what you mean

I have changed the code to

Code:

<div id="delivery-text">Super fast delivery available</div>

and

Code:

const deliveryText = document.getElementById("delivery-text");

but again it only works on the first div product on https://shop.it-doneright.co.uk/laptops-tablets/Laptops

VBService · 2024-12-22T10:03:50+0000

Your code working after fixing the issues I mentioned above.
By class name.

HTML:

<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")[0]; // <== !!!!
    //const deliveryText = document.querySelectorAll('.delivery-text')[0];
    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>

by ID

HTML:

<div id="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")[0];
    //const deliveryText = document.querySelectorAll('.delivery-text')[0];
    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>

VBService · 2024-12-22T10:12:51+0000

You have a problem how to use it correctly

document.getElementById
document.getElementsByClassName
document.querySelector
document.querySelectorAll

I showed you examples of how to do it correctly.

VBService · 2024-12-22T10:15:59+0000

ianhaney said:
I checked the code in my file and it's the same as you indicated, it may be the forum has amended it somehow or for some reason

Next time use:

ianhaney · 2024-12-22T10:17:50+0000

VBService said:
View attachment 3046
You have a problem how to use it correctly

document.getElementById

document.getElementsByClassName

document.querySelector

document.querySelectorAll

I showed you examples of how to do it correctly.

I tried your code but it's only working for the first element/product on the category page and not all of them on https://shop.it-doneright.co.uk/laptops-tablets/Laptops

VBService · 2024-12-22T12:04:14+0000

ianhaney said:
I did create another post with the correct code at https://www.thecodingforums.com/threads/javascript-shipping-countdown-timer-code-help.976382/

Check solution:
https://www.thecodingforums.com/thr...countdown-timer-code-help.976382/post-5178266

Javascript shipping countdown timer code help	9	Today at 8:37 AM
Can someone help me correct this code? It should be a two line countdown timer.	3	Jan 26, 2023
Small JS Countdown timer where user has to type string of numbers to stop it and win	8	Jun 16, 2024
Hrs worked between two dates crossing over midnight	3	Feb 10, 2023
Taskcproblem calendar	4	Aug 31, 2023
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Javascript countdown without refreshing.	2	Jan 31, 2008
Remove Start Button from Clock	2	Jan 16, 2021

Javascript shipping countdown issue

ianhaney

VBService

ianhaney

ianhaney

VBService

ianhaney

VBService

VBService

VBService

ianhaney

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads