Adding "Your cart is reserved for [10 minutes counter]" dynamically to a page

Technical
,
1

How to I add a timer similar to this
image

I dont like the built in funnelish one. Looks abit spammy. Also want it inline with the text similar to image above

2

Hi @Gulfam,

Please follow these steps in order to get such results,

1- Adding your container :

At first, you need to add a Container Element inside your page like the image below

image
image748×146 16.1 KB

Please make sure to go to Advance and set the paddings of the container to 10px, later.

Also, make sure to add two boxes inside the container where the first one has a fixed width (you can find it inside the three small dots).
image

Now, just add an image inside the first box.

2 - Adding a custom HTML element inside the second box of the container :

please add a Custom HTTML element in the second box then hit Edit custom HTML and paste this Custom HTML code inside it:

<div style="color: #c8202f;font-size: .975rem;line-height: 22px;font-weight: 900;"><b>SALE ENDS SOON! </b>
    <span style="color: black; font-weight: 300;"> Your cart is reserved for </span>
    <span id="countdown">14:55</span>
</div>

3 - Adding the JS Script :

As a final step, please head to Custom codes Custom JS (Body), and paste the following code:

<script>
/**** second+minute timer ****/
 var seconds;
var temp;

function countdown() {
    time = document.getElementById('countdown').innerHTML;
    timeArray = time.split(':')
    seconds = timeToSeconds(timeArray);
    if (seconds == '') {
        temp = document.getElementById('countdown');
        temp.innerHTML = "00:00:00";
        return;
    }
    seconds--;
    temp = document.getElementById('countdown');
    temp.innerHTML = secondsToTime(seconds);
    timeoutMyOswego = setTimeout(countdown, 1000);
}

function timeToSeconds(timeArray) {
    var minutes = (timeArray[0] * 60) + (timeArray[0] * 1);
    var seconds = (minutes * 60) + (timeArray[1] * 1);
    return seconds;
}

function secondsToTime(secs) {
    //var hours = Math.floor(secs / (60 * 60));
    var divisor_for_minutes = secs % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);
    minutes = minutes < 10 ? '0' + minutes : minutes;
    var divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = Math.ceil(divisor_for_seconds);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return minutes + ':' + seconds;
}

countdown();
</script>

Let us know how that goes,

Best regards,
Funnelish™ Team

1 Like
3

That’s perfect!!! Thank you!!