Rich-text Reply

jQuery Countdown Timer

adzeds 11-24-14

jQuery Countdown Timer

Has anyone got any experience of adding a jQuery countdown timer to an Optimizely variaiton.

 

I am currently putting together some variations for a page that is going to have a limited time deal on it and want to have a countdown timer on the page.

 

I am thinking that I am going to have to include a third-party js module into the test and run that unless anyone can think of a smarter way of running this?

 

Any hints and tips appreciated!

 

David Shaw
Level 11

michaelwei 11-25-14
 

Re: jQuery Countdown Timer

Hi adzeds,

 

It is indeed possible to additional scripts via Optimizely!

 

First, use the editor to insert the HTML that the countdown timer requires.

 

Then, you can add the script as described in the KnowledgeBase article here:

https://help.optimizely.com/hc/en-us/articles/200039835-The-Code-Editor-Edit-Code-#external_javascri...

 

And you should be ready to go!

 

Or, if you have some code yourself, you can always paste it directly in to the Edit Code box, it can run standard jQuery. You may need to include the full version of jQuery in the snippet if you need functions like on() and show().

Optimizely
adzeds 11-25-14
 

Re: jQuery Countdown Timer

I will be coding this in today, so I will share my code when ready and working in case it is of value to anyone else.
David Shaw
Level 11
CChavarria 12-09-14
 

Re: jQuery Countdown Timer

Hi David,

 

Did you have any luck in getting this together?

adzeds 12-09-14
 

Re: jQuery Countdown Timer

Yes. I managed to put together something that works!

Will pull out the code and share it in here today.
David Shaw
Level 11
aukeusably 02-04-15
 

Re: jQuery Countdown Timer

Hello David,


Can you share your code?

 

Would like to try it myself.


Thanks!

CChavarria 02-04-15
 

Re: jQuery Countdown Timer

I was waiting for the reply as well, but ended up using this:

 

Put into Experiment Javascript Section (just make sure to update time/date in kickoff line)

 

function updateWCTime() {
	now      = new Date();
	kickoff  = Date.parse("December 22, 2014 11:00:00");
	diff = kickoff - now;

	days  = Math.floor( diff / (1000*60*60*24) );
	hours = Math.floor( diff / (1000*60*60) );
	mins  = Math.floor( diff / (1000*60) );
	secs  = Math.floor( diff / 1000 );

	dd = days;
	hh = hours - days  * 24;
	mm = mins  - hours * 60;
	ss = secs  - mins  * 60;

        document.getElementById("countdown")
            .innerHTML =
                dd + ' days ' +
                hh + ' hours ' +
                mm + ' minutes ' +
                ss + ' seconds';
}
setInterval(updateWCTime, 1000 );

 

Afterward, make sure to insert the div where ever you need it.

 

<div id="countdown"></div>

I had it replace some existing HTML in its place, so this is what I typed into the Variation Code box:

 

$("#navigation-shipping-link").replaceWith("<a href=\"/en/shipping\" id=\"navigation-shipping-link\" class=\"us-only\">Want it by christmas? Order within the next <div style=\"display:inline;\" id=\"countdown\"></div>!</a>");

 

Hope that helps!