7

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

enter image description here

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.

5

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

  • Yes I am working on it and will share the ideas to get it working up – Manoj Deswal Sep 29 '17 at 11:46
  • 1
    I will try and work on this probably wont have time for a few days however. Have made a starting point on github however by making it a module – harri Sep 29 '17 at 14:02
  • 1
    Ive done a little work on it, been busy however with other bits so may be slow progress just needs exclude days and was going to set cut off time by day. Issues with adding 1 working day excluding certain bank holidays and stuff like that with javscript for if timer lapses while user on page. – harri Oct 4 '17 at 7:36
  • 2
    Awesome thanks. Yeah not sure why its starting at that time but should be simple enough to debug its a very simple little module at the moment. – harri Oct 23 '17 at 11:50
  • 1
    And if you get some time to fix this then please do it. Big thanks for your efforts – Sharma Oct 24 '17 at 3:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.