Countdown timer in custom store message section

natmaakl

Hi, I have to following script to add countdown timer in the store section. However uploading the script in index.html isn't working. Can someone pls assist with this feature? Many many thanks in advance!

function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}

function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time').innerHTML =
hh + "h " + mm + "m " + ss + "s ";
setTimeout(tick, 1000);
}

document.addEventListener('DOMContentLoaded', tick);
})();
</script>

Order cut off in <span id='time'></span>

natmaakl

Further information, only can see text "Order cut of in" but the timer is not showing.

natmaakl

abgaadelivery

natmaakl can you tell me why use this ?
we also have same pattern of timing for delivery..

Saurabh

The document.getElementById will fail here because it will not be able to find the <span id="time"> because the <span> is loaded after the script has already run.

So you will need to check whether or not the element is present first and then append the time.

On Store Custom HTML block place this:
Order cut-off in <span class="customTime"></span>

On index.html place this:

<script>
	(function () {
		var start = new Date();
		start.setHours(11, 0, 0); // 11am

		function pad(num) {
			return ("0" + parseInt(num)).substr(-2);
		}

		function tick() {
			var now = new Date();
			if (now > start) {
				// too late, go to tomorrow
				start.setDate(start.getDate() + 1);
			}
			var remain = (start - now) / 1000;
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			var elem = document.getElementsByClassName("customTime");
			if (elem.length > 0) {
				document.getElementsByClassName("customTime")[0].innerHTML =
					hh + "h " + mm + "m " + ss + "s ";
			}
			setTimeout(tick, 1000);
		}

		document.addEventListener("DOMContentLoaded", tick);
	})();
</script>

P.S, I have not tested this.

natmaakl

Saurabh Thank you very much, sir. This works perfectly! I have css and html experience but only just learning javascript.

If it's no trouble to you can you please show me how to customise script where if:
1) time is after 11am, countdown next to 5pm same day
2) time is after 5pm, countdown next to 11am next day

alabtechnosoft

@natmaakl may i know what is the purpose of this custom work...???

so that, we can also implement on this!

alabtechnosoft

Can we customize like this on home page, this will help lot! can anyone help us.

natmaakl

alabtechnosoft See if this helps you

https://logwork.com/countdown-timer

alabtechnosoft

This one is actually working on Meta screen but not on customer app i don't know why....

Meta Screen On Store Page:

Customer Application:

Here is my embed code;
<script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-rjse" class="countdown-timer" data-timezone="Asia/Kolkata" data-date="2021-11-22 12:01" data-background="#ff5722">Offer End On</a>

TitozzTitozz

alabtechnosoft Same problem with me ?.

alabtechnosoft

How can we reduce this white space...??

TitozzTitozz

alabtechnosoft how did you ?

josan420

alabtechnosoft inspect element from brower and use the css to hide the space

alabtechnosoft

josan420 I tried but no luck, could you plz help us to fix it thanks in advance

alabtechnosoft

josan420 @danoki @bhojmandu @NikhilJain Can anyone help me to fix whitespace since many people saying like its unprofessional, so please...

If you want please let me know i will share website link.

alabtechnosoft

josan420 can you please help me to fix whitespace of this widget..???

@danoki @NikhilJain can i get help..?

member321

alabtechnosoft your site

josan420

alabtechnosoft and how anyone is supposed to help without accessing your site?

alabtechnosoft

josan420 Can you share me your whatsapp or email id so that i can share my website link if you don't mind.

Hurry up! Limited time offer