leicester web designer blog

Magento Sale Javascript Countdown

Sale countdowns are standard user interface elements. They work as a prompt to encourage visitors to convert before a sale or special offer ends. In this post I'll show you how you can create one in Magento 1.

The first example I'll show you is how to make a countdown banner that appears on all pages of your Magento website.

The first step is to find a Javascript library to perform the actual countdown. The one I selected is The Final Countdown. Once you've downloaded the javascript to your theme's skin javascript folder, you'll need to reference it in your theme xml files. I've chosen to add it to my theme's pages.xml like so:

<block type="page/html_head" name="head" as="head">

<action method="addItem"><type>skin_js</type><name>js/jquery.countdown.min.js</name></action>

 The reason I've added like this is because it needs to be available on every page.

I've then created a static block which is rendered on every page in the header. The static block is as follows:

<div id="countdown">HUGE SAVINGS ON SELECTED ITEMS!<span id="clock"></span></div>
<script type="text/javascript">// <![CDATA[
document.observe("dom:loaded", function() {
    var $timer = $('clock');
    jQuery('<div></div>').appendTo('body')
         .countdown('2017/01/30 12:34:56')
         .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
             if(event.offset.totalDays > 0) {
                 format = '%-D day%!d ' + format;
             }
             var strftime = event.strftime(format);
             $timer.update(strftime);
         })
         .on('finish.countdown', function(event) {
             $timer.update('Sorry This Offer Has Finished!');
     });
});
// ]]></script>

banner countdown
 

The only bit of the code that needs updating is the actual date & time of when the offer ends - this is the part of the code to update: ".countdown('2017/01/30 12:34:56')". The code has the functionality to display an alternative message once the sale has closed ("Sorry This Offer Has Finished!") but my preference is to disable the static block.

Another way to use a sale countdown timer is on the actual product. For this to work, you need to set a 'Special Price' and a 'Special Price To Date' on the product.

special price to date

This sets the duration of the special offer on this product. We then need to edit the view.phtml file to display the special offer. I've coded it like so:

<?php /*** BOF Flash Sale ***/ ?> <?php if($_product->getData('special_to_date') != null && $_product->getData('special_to_date') !=''): ?>
<div class="timer1">
<p>FLASH SALE - Limited Time Left: <br /><span id="timer1"></span>
</p>
</div>
<script type="text/javascript">
document.observe("dom:loaded", function() {
var $timer = $('timer1');
jQuery('<div></div>').appendTo('body')
.countdown('<?php echo($_product->getData('special_to_date') ) ?>')
.on('update.countdown', function(event) {
var format = '%H:%M:%S';
if(event.offset.totalDays > 0) {
format = '%-D day%!d ' + format;
}
var strftime = event.strftime(format);
$timer.update(strftime);
})
.on('finish.countdown', function(event) {
$timer.update('This offer has expired!');
});
});
</script>
<?php endif; ?> <?php /*** EOF Flash Sale ***/ ?>

The result is a message to the user that hopefully encourages them to purchase now rather than later.

flash sale l

Looking at the code, I think it can be improved by making the check if there is a 'special_to_date' and that it is still available before displaying the offer block.I also think visually the timer could be improved too. However, I'll leave that to you readers to improve.

Satisfied Clients

Fresh Web Services Ltd:
LCB Depot, 31 Rutland Street, Leicester. LE1 1RE
Phone: +44 (0)116 279 3822
Company No: 04716234
52.634568, -1.127919
Use of this website constitutes acceptance of the
Fresh Web Services Terms and Privacy Policy including cookie-use
Find us on Google+
Find us on Facebook
Follow us on Twitter
Fresh Web Services is rated 5 stars on Google based on 5 reviews
Top