Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

How to Create Special Price Counter in Magento Store

Lots of online stores have a counter that shows the time left till the end of some promo or discount. In this short tutorials we'd like to show how to implement such counter into a Magento website. This would be really easy, and for sure will not cause any difficulties.

This is what your counter will look like.

coundown

Online you can find a number of JS scripts, but we've chosen FlipClockJS. This script looks good, it's lightweight and really flexible.

To implement the counter you need to follow three simple steps:

Find out the promo deadline. Subtract from it your current time:

1
$counter_time = strtotime(here_goes_the_deadline) - strtotime("now");

Add div of your countdown:

1
<div id="special_countdown"></div>

Initialise the script:

1
2
3
4
var clock = jQuery('#special_countdown').FlipClock(<php echo $counter_time; ?>, {
	clockFace: 'DailyCounter',
	countdown: true
});

IF you want to tune this scrip, you find all the necessary info on the official website.

As a bonus here you can download less file with styles where you can change the size of counters.

Here is a repository with a fully functional Magento module.


Alex Bulat

Writing a blog post or building a micro niche WordPress website is something Alex can do bare-handed. You're welcome to contact him via Telegram, Facebook, or LinkedIn.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

8 responses to “How to Create Special Price Counter in Magento Store”

  1. pgslot99th says:

    … [Trackback]

    […] Info on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  2. here says:

    … [Trackback]

    […] Find More Information here on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  3. … [Trackback]

    […] Info on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  4. … [Trackback]

    […] Read More to that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  5. … [Trackback]

    […] Find More Information here on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  6. … [Trackback]

    […] Info to that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  7. … [Trackback]

    […] There you can find 89724 more Information on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

  8. … [Trackback]

    […] There you can find 61823 more Info on that Topic: monsterspost.com/how-to-create-special-price-counter-in-magento-store/ […]

Leave a Reply

Your email address will not be published. Required fields are marked *