I need to add a simple jquery countdown to date timer to my main page. I am trying to use the following code from https://github.com/hilios/jQuery.countdown.

I have searched all over (2 days now) for a tutorial on how to integate jquery into Zen Cart. I found this article http://www.zen-cart.com/showthread.p...Zen-Cart/page3.

I believe that I have set this up right but it is not working. I am using Zen Cart Version 1.5.1. I only have one plugin installed (ZX Slideshow).

These are the steps that I followed.

1. Created jscript_countdown.js (below) and inserted into /includes/templates/custom/jscript/jscript_countdown.js

$(function() {
$('div#clock').countdown("2015/06/28", function(event) {
var $this = $(this);
switch(event.type) {
case "seconds":
case "minutes":
case "hours":
case "days":
case "weeks":
case "daysLeft":
$this.find('span#'+event.type).html(event.value);
break;
case "finished":
$this.hide();
break;
}
});
});

2. Added the following to define_main_page.php (I have also tried using tpl_index_default.php) and inserted into the proper override folder

<div id="clock">
<span id="weeks"></span> Weeks
<span id="daysLeft"></span> Days
<span id="hours"></span> Hours
<span id="minutes"></span> Minutes
<span id="seconds"></span> Seconds
</div>
<script>$('div#clock').countdown(toDate, callback);</script>

3. Added the following to my stylesheet.css

div#clock { color: white; margin: 20px auto; width: 600px; overflow: hidden; text-align: center; }
div#clock p { background: #333; float: left; height: 88px; width: 88px; }
div#clock p span { display: block; font-size: 50px; font-weight: bold; padding: 5px 0 0; }
div#clock div.space { color: #ccc; display: block; line-height: 1.7em; font-size: 50px; float: left; height: 88px; width: 30px; }

I have uploaded all files with no luck. The html is showing without the timer. The page source shows that jscript_countdown.js is being called.

I believe that my problem is with the $('div#clock').countdown(toDate, callback);. I wrapped it with a <script> tag when I inserted it into define_main_page.php. Is this the right way? I even tried adding this to html_header.php (since removed).

I searched for a solution but can't find one. I have studied some jquery to figure this out to no avail. Can anyone point me in the right direction? Any help would be appreciated.