Show Promotional Offers With Countdown Timer - epcounter

File Size: 38.2 KB
Views Total: 3128
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Show Promotional Offers With Countdown Timer - epcounter

The epcounter(endless promotion counter) jQuery plugin lets you create a product discount countdown to show the visitors how much time is left for the discounted price.

Ideal for eCommerce websites and/or online stores to boost conversions.

How to use it:

1. Import the minified version of the jQuery epcounter plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
        crossorigin="anonymous">
</script>
<script src="dist/jquery.epcounter.min.js"></script>

2. Create the html for the promotional deal/offer with a countdown timer.

<div id="epcounter">
  <div>Expire Date: 
    <div class="expire-box">
      <span id="expireMount"></span> 
      <span id="expireDays"></span>
    </div>Days Left:  
    <div class="expire-box">
      <span id="daysLeft"></span>
    </div>
  </div>
</div>

3. Initialize the countdown timer and specify the number of promotion days for your deals/offers. Default: 15.

$("#epcounter").epcounter({
  "amountPromotionDays": 3
});

4. Default CSS selectors.

$("#epcounter").epcounter({
  "idExpireMonth": "expireMount",
  "idExpireDays": "expireDays",
  "idDaysLeft": "daysLeft"
});

5. Set the start day/month/year.

$("#epcounter").epcounter({
  "startDay": 1,
  "startMonth": new Date().getMonth(),
  "startYear": new Date().getFullYear()
});

6. Customize the month names.(great for multi-language website)

$("#epcounter").epcounter({
  "monthsList": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
});

This awesome jQuery plugin is developed by GeekHare. For more Advanced Usages, please check the demo page or visit the official website.