This countdown timer is almost identical to the conversionpirate countdown timer.
All I’ve done is:
– Tidy up some of the code by closing tags and indenting it.
– Make the progress bar animate the stripes.
There are probably a few more things I could fix up but for now this does what I want and looks damn good doing it!
Assuming you’re using Shopify and the Brooklyn theme you would add this code into your product-template.liquid file.
We suggest experimenting to see where you think it will work best when it comes to your theme.
<!-- Countdown Timer-->
<div class="items-count" id="progress_bar"></div>
<div id="clock-ticker" class="clearfix">
<div class="block">
<span class="flip-top" id="numdays">0</span>
<br>
<span class="label">Days</span>
</div>
<div class="block">
<span class="flip-top" id="numhours">1</span>
<br>
<span class="label">Hours</span>
</div>
<div class="block">
<span class="flip-top" id="nummins">23</span>
<br>
<span class="label">Minutes</span>
</div>
<div class="block">
<span class="flip-top" id="numsecs">36</span>
<br>
<span class="label">Seconds</span>
</div>
</div>
In your Assets folder create a new file and name it countdown-timer ending with .js and copy paste this code below.
I haven’t added any comments to this other than the line that I’ve changed.
I plan to either re-write or comment this one in the near future. For now I’m just putting up all the code as quickly as possible for ya’ll!
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var total_items = 50;
var d = new Date();
var min_items_left = 12;
var max_items_left = 20;
var remaining_items = randomIntFromInterval(min_items_left, max_items_left);
var min_of_remaining_items = 1;
var decrease_after = 1.7;
var decrease_after_first_item = 0.17;
(function($) {
$.fn.progressbar = function() {
var a = "<p>Hurry! Only <span class='count'>" + remaining_items + "</span> left in stock.</p>" + "<div class='progressbar '><div style='width:100%'></div></div>";
this.addClass('items-count');
this.html(a + this.html());
updateMeter(this);
var b = this;
setTimeout(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left);
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201');
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b);
}, 1000 * 60 * decrease_after_first_item);
setInterval(function() {
remaining_items--;
if (remaining_items < min_of_remaining_items) {
remaining_items = randomIntFromInterval(min_items_left, max_items_left);
}
$('.count').css('background-color', '#CE0201');
$('.count').css('color', '#fff');
setTimeout(function() {
$('.count').css('background-color', '#fff');
$('.count').css('color', '#CE0201');
}, 1000 * 60 * 0.03);
b.find(".count").text(remaining_items);
updateMeter(b);
}, 1000 * 60 * decrease_after);
};
function updateMeter(a) {
var b = 100 * remaining_items / total_items;
if (remaining_items < 10) {
a.find('.progressbar div:first').addClass('less-than-ten');
}
a.find('.progressbar').addClass('active progress-striped');
setTimeout(function() {
myanimate(a.find('.progressbar div:first'), b);
//This has been commented out so that the stripes would show and animate continuously
//a.find('.progressbar').removeClass('active progress-striped');
}, 1000);
}
}(jQuery));
function myanimate(a, b) {
var c = 0;
var d = parseInt(a.closest('.progressbar').css('width'));
var e = Math.floor(100 * parseInt(a.css('width')) / d);
if (e > b) {
c = e;
}
function frame() {
if (e > b) {
c--;
} else {
c++;
}
a.css('width', c + '%');
if (c == b || c <= 0 || c >= 100) clearInterval(f);
}
var f = setInterval(frame, 40);
}
jQuery.noConflict()(function($) {
$(document).ready(function() {
$("#progress_bar").progressbar();
var tag = "ctdn-12-12".match(/\d+/g);
var hour = 14;
var theDaysBox = $("#numdays");
var theHoursBox = $("#numhours");
var theMinsBox = $("#nummins");
var theSecsBox = $("#numsecs");
var d = new Date();
var n = d.getDay();
var date = 1;
var gg = 0;
var hh = 0;
var ii = 0;
var nsec = 0 - d.getSeconds();
if (nsec < 0) {
nsec = 60 - d.getSeconds();
gg = 1;
}
var nmin = 0 - d.getMinutes() - gg;
if (nmin < 0) {
nmin = 60 - d.getMinutes() - gg;
hh = 1;
}
var nhrs = 14 - d.getHours() - hh;
if (nhrs < 0) {
nhrs = 38 - d.getHours() - hh;
ii = 1;
}
var ndat = date - 1;
if (ndat < 0) {
var mmon = d.getMonth();
ndat = 30 + date - d.getDate() - ii;
}
theSecsBox.html(nsec);
theMinsBox.html(nmin);
theHoursBox.html(nhrs);
theDaysBox.html(ndat);
var refreshId = setInterval(function() {
var e = theSecsBox.text();
var a = theMinsBox.text();
var c = theHoursBox.text();
var b = theDaysBox.text();
if (e == 0 && a == 0 && c == 0 && b == 0) {} else {
if (e == 0 && a == 0 && c == 0) {
theDaysBox.html(b - 1);
theHoursBox.html("23");
theMinsBox.html("59");
theSecsBox.html("59");
} else {
if (e == 0 && a == 0) {
theHoursBox.html(c - 1);
theMinsBox.html("59");
theSecsBox.html("59");
} else {
if (e == 0) {
theMinsBox.html(a - 1);
theSecsBox.html("59");
} else {
theSecsBox.html(e - 1);
}
}
}
}
}, 1000);
});
});
Make sure you also call it by adding this to the bottom of your product-template.liquid file above {% schema %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
{{ 'countdown-timer.js' | asset_url | script_tag }}
In your Assets folder create a new file and name it countdown-timer ending with .css and copy paste this code below.
#progress_bar {
margin-top: 15px;
}
.progressbar.progressbar {
background: whitesmoke;
border: 0px solid whitesmoke;
border-radius: 5px;
height: 11px;
}
.progressbar.progressbar div {
background: #d95350;
border-radius: inherit;
height: 11px;
}
.progress-striped.progressbar.progressbar.active div {
-webkit-animation: stripes 2s linear infinite;
-moz-animation: stripes 2s linear infinite;
-ms-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
.progress-striped.progressbar.progressbar div {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 40px 40px;
}
.items-count {
margin-top: 0px;
margin-bottom: 0px;
}
.count {
color: #a94442;
padding: 1px;
}
.items-count p {
padding-bottom: 5px;
margin: 0;
text-transform: uppercase;
font-weight: 700;
text-align: center;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;
}
.progressbar {
position: relative;
display: block;
background-color: #ca0000;
border: 1px solid #ddd;
margin-bottom: 15px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progressbar>div {
background-color: #ca0000;
width: 0;
margin-bottom: 0;
height: 15px;
}
.progressbar>div.less-than-ten {
background-color: #ca0000 !important;
}
#clock-ticker {
display: block;
margin-bottom: 15px;
}
#clock-ticker .block {
position: relative;
color: #383838;
font-weight: bold;
float: left;
text-align: center;
width: 25%;
}
#clock-ticker .block .flip-top {
width: 88px;
height: 39px;
line-height: 40px;
font-size: 40px;
text-align: center;
}
#clock-ticker .block .label, span.flip-top {
color: #383838;
font-weight: bold;
text-align: center;
font-size: 14px;
text-transform: uppercase;
width: 88px;
line-height: 25px;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;
}
//All the animation keyframes for the stripes
@-webkit-keyframes stripes{
from {
background-position:40px 0;
}to {
background-position:0 0;
}
}
@-moz-keyframes stripes{
from {
background-position:40px 0;
}to {
background-position:0 0;
}
}
@keyframes stripes{
from {
background-position:40px 0;
}to {
background-position:0 0;
}
}
Make sure you also call it by adding this line of code into your theme.liquid file.
{{ 'countdown-timer.css' | asset_url | stylesheet_tag }}
