Countdown Timer

General General Questions
1

Hello,

I've tried searching but cannot find any post or addon to help with this query.

I want to create a simple countdown timer on my website. The countdown should be for 4PM (Monday to Friday), as this is when our delivery cut off point is. After 4PM, the countdown should start again until the next day. On Saturday and Sunday, it should count down until 4PM on Monday.

I've seen this guide: https://www.w3schools.com/howto/howto_js_countdown.asp

But with this, once it has counted down it doesn't reset again.


Not sure why the link isn't working, but here it is again: https://bit.ly/3g1onfh

2

Easiest is to just point you to a reference: https://www.w3schools.com/howto/howto_js_countdown.asp
You'll need to create a block where you want the timer with html similar to:

and you would (using the javascript from the link) do:

 document.getElementById("demo").innerHTML = days + "d " + hours + "h "

Using jQuerey is probably easier and cleaner....

3

I did already look at that guide, but I can't seem to work out where I would put the javascript or JQuery in CS-Cart

4

Try to wrap javascript (jquery) code with the following

{literal}
... your code here....
{/literal}
5

I did already look at that guide, but I can't seem to work out where I would put the javascript or JQuery in CS-Cart


You can put it in a scripts.post.tpl in my_changes. The path would be
design/themes/responsive/templates/addons/hooks/index/scripts.post.tpl
And the content would be something like:

  // your JS goes here

Note Ecom's comments about using the literal tags. If an opening and closing squirley-braces are on the same line you should use literal tags. I.e.

myObj = {literal}{};{/literal}
// whereas this is okay
myObj = {
  "property" : "value"
}
Note also that you can use template variable in JS by doing:
myVar = "{$tplData}";
// or
myVar = "{$product.amount}";
Good luck.