How to achieve "shipping countdown timer" for delivery feature?

Question

I am trying to develop a module/functionality shipping deadline countdown timer on product page.

This timer will notify customers about expected delivery date if a purchase is made before the timer reaches zero

See working example here on amazon

I should able to set delivery days and cut off time for products in admin

Note: On Magento1 can be achieved via using this extension: Shipping Deadline Countdown

Any help will be highly appreciated.

Answer 1

This is just a simple outline of how i would start going about it and could do with finishing however:

Get the time:

$currenttime = strtotime(date("h:i:s A"));

Get the cutoff time or just set manually for now:

$cutofftime = strtotime(date('h:i:s A', strtotime(date('d-m-Y') . ' + 16 hours')));

Gets the current day and adds 16 hours for cut off time of 16:00

Get Delivery Time or set manually for now:

$deliverydate = date('d-m-Y', strtotime(date('d-m-Y') . ' + 2 weekdays'));

Need to change the day if passed cut off time:

if ($currenttime>$cutofftime) {
    $cutofftime+= 86400;
    $deliverydate+= 86400;
}

Calculate interval

$interval = date('H:i:s', mktime(0, 0, $cutofftime-$currenttime));

Then format data:

<div>For delivery on <?php echo $deliverydate; ?> order within the next <span id="time"></span> minutes!</div>

Javascript to make a countdown live:

<script>
function startTimer(duration, display) {
var timer = duration, hours, minutes, seconds;
setInterval(function () {
    hours = parseInt(timer / 60, 10)
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var time = <?php echo $cutofftime-$currenttime; ?>,
    display = document.querySelector('#time');
startTimer(time, display);
};
</script>

Full Example Code

<?php
$currenttime = strtotime(date("h:i:s A"));
$cutofftime = strtotime(date('h:i:s A', strtotime(date('d-m-Y') . ' + 16 hours')));
$deliverydate = date('d-m-Y', strtotime(date('d-m-Y') . ' + 2 weekdays'));
if ($currenttime>$cutofftime) {
    $cutofftime = strtotime(date('h:i:s A', strtotime(date('d-m-Y') . ' + 40 hours')));
    $deliverydate = date('d-m-Y', strtotime(date('d-m-Y') . ' + 3 weekdays'));
}
$interval = date('H:i:s', mktime(0, 0, $cutofftime-$currenttime));

?>
<div>For delivery on <?php echo $deliverydate; ?> order within the next <span id="time"></span> minutes!</div>

<script>
function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
    setInterval(function () {
        hours = parseInt(timer / 60, 10)
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var time = <?php echo $cutofftime-$currenttime; ?>,
        display = document.querySelector('#time');
    startTimer(time, display);
};
</script>

This is just something quite poor however that i have knocked up as concept. Could do with using Magento time and having some settings in back end for cut off time as well as pulling maybe delivery times for products.

Current issues here:

1. The delivery date is not updated will need to update when timer reaches 0.
2. Would like to change the minutes to include hours.
3. Make modular and include some admin settings for cut off time.
4. Would be good to get a shipping time from backend either from products or from shipping method.
5. Use magento time rather than PHP
6. Not sure about summer time and how this will work.

I will work a bit on this however and keep improving. I have started a git project which is in a worse state than this but now is a module and it shows up on product page counting down to the time set.

https://github.com/harrigo/Magento2-CountdownTimer