Xataface Forums

So - I've got this nifty javascript countdown clock that will display the time remaining until some event. It wants the end time (in this case, the auction end time) in this format:

TargetDate = "12/31/2020 5:00 AM";

I would like to be able to grab the {$product->display('closing_time')} and give it to the javascript so I can have a cute little clock ticking down on each of my auctions, but I will have to format it differently OR tell the javascript to accept the format I already have.

I'm not really sure where to start, so any pointers would be nice. Thanks,

Beth

In PHP:
http://ca2.php.net/manual/en/function.date.php

Code: Select all

date('m/d/Y h:i A', strtotime($product->display('closing_time')));


In a smarty template:
http://www.smarty.net/manual/en/languag ... format.php

Code: Select all

{$product->display('closing_time')|date_format:"%m/%d/%Y %r"}


Thanks! It is the super awesome.

Here's the link to the javascript I used:

http://www.hashemian.com/tools/javascript-countdown.htm

I placed Hashemian's code in my view_product.html file, with this line

Code: Select all

TargetDate = "12/31/2020 5:00 AM";


changed to

Code: Select all

TargetDate="{$product->display('closing_time')|date_format:"%m/%d/%Y %r"}";


Of course, I have the countdown.js hosted on my own server to save him the bandwidth.

ONE MORE THING - the local user's timezone was affecting the way the countdown was displayed, so if the auction was ending 3 hours from now, the displayed time would differ depending on the local time of the user, making it seem like the auction had more or less time to go.

To fix this, the first line of Hashemian's code now reads thusly:

Code: Select all

TargetDate="{$product->display('closing_time')|date_format:"%m/%d/%Y %r CST"}";


The CST at the end of the date tells the browser to always use US/Central time. For simplicity's sake, I have hidden the timezone widget (during the registration process) and changed the timezone field in my users table to always be US/Central, because all of the end and start times for this auction are CST.

Great script!

A little sidenote - I got it working using literal tags.

Code: Select all

{literal}<script></script>{/literal}

and

Code: Select all

TargetDate= "{/literal}{$product->htmlValue('closing_time')|date_format:"%m/%d/%Y %r"}{literal}";

To the point...

I would like to use the counter in public product list.
So that the counter would show up beside each product showing
how much time is left.

I got it working to the point where it shows the counter on the first
product. It also generates the html tags for other products but won't show the counter.

Im guessing that one problem might be the 'getElementById', It is not valid html to have
same named id's on one page.

Or maybe it passes the closing_time only once and other products get empty values?

Any ideas?

I put the javascript into public_product_list.html right after foreach loop.

The problem is with that counter javascript. I took a quick look at the code. It uses getElementById() to find the counter component - which implies a unique id (ie only one per page).

It would have to be modified to use class names or some other way of referencing the counter.

I'll bet there is a jquery counter script out there somewhere that is much cleaner and won't have this limitation. That said, it wouldn't be hard to modify this script to work with multiple instances per page if you're proficient with javascript.