Delivery Countdown

Wireframe

Email Address

Coding Instructions

By default, this feature offers three different types of countdown timers:

1 - Both same-day, and next-day countdowns

The same-day countdown will show from midnight up until the cut-off time (e.g. 11am), at which point it'll switch to the next-day countdown (cut-off e.g. 2pm). After the next-day cut-off time has passed, the timer will disappear.

2 - Same-day countdown

The same-day countdown will show from midnight up until the cut-off time (e.g. 11am). After the same-day cut-off time has passed, the timer will disappear.

3 - Next-day countdown

The next-day countdown will show from midnight up until the cut-off time (e.g. 2pm). After the next-day cut-off time has passed, the timer will disappear.

The countdown timer type is controlled using a custom config.

Step 1. Set up the custom configs

Delivery Countdown Type Config
  1. Go to Setup & tools > All settings & tools, and click on "Custom Configs".
  2. Click on "Add New", and enter the following info:

Name: delivery_countdown_type Date Type: Text Title: Delivery Countdown Type Description: The type of delivery countdown being used on the site.

  1. Hit the "Continue" button, and then enter one of three choices into the "content" field, depending on the type of countdown timer that the merchant would like to use (outlined above):

  2. Both same-day, and next-day countdowns: enter "same_and_next".

  3. Same-day countdown: enter "same".
  4. Next-day countdown: enter "next".

  5. Hit the save button.

If the customer would like to temporarily disable the timer, they'll simply have to remove the text completely from the custom config. The text which accompanies the countdown will still show.

Countdown Finish Hour Same Day

If the customer is using a countdown timer type which includes "same-day", complete the below:

  1. In the custom configs screen, click on "Add New", and enter the following info:

Name: countdown_finish_hour_same_day Date Type: Text Title: Countdown Finish Hour Same Day Description: The countdown end time for same day delivery.

  1. Hit the "Continue" button, and then enter the hour figure in the "content" box, in 24-hour format. For example, if the cut-off time for same-day delivery is 11am, enter "11". Similarly, if the cut-off time is 1pm, enter "13".

  2. Hit the save button.

Countdown Finish Hour Next Day

If the customer is using a countdown timer type which includes "next-day", complete the below:

  1. In the custom configs screen, click on "Add New", and enter the following info:

Name: countdown_finish_hour_next_day Date Type: Text Title: Countdown Finish Hour Next Day Description: The countdown end time for next day delivery.

  1. Hit the "Continue" button, and then enter the hour figure in the "content" box, in 24-hour format. For example, if the cut-off time for next-day delivery is 2pm, enter "14". Similarly, if the cut-off time is 4pm, enter "16".

  2. Hit the save button.

Countdown Timer Text
  1. In the custom configs screen, click on "Add New", and enter the following info:

Name: countdown_text Date Type: Text Title: Countdown Timer Text Description: Countdown timer text that accompanies the clock.

  1. Hit the "Continue" button, and then enter the text that you want to show with the countdown timer.

Step 2. Add the countdown plugin file

  1. Go to the Jquery Countdown Site and download the latest version.
  2. In your FTP client, go to httpdocs/assets/themes/[your_theme_folder]/js, and paste the jquery.countdown.min file into it.
  3. Open footer/template.html and paste the following line of code...

<script type="text/javascript" src="[%ntheme_asset%]js/jquery.countdown.min.js[%END ntheme_asset%]"></script>

...below this:

[%cdn_asset html:'1' type:'js' library:'jquery_ui' version:'1.11.1'%]js/jquery-ui-1.8.18.custom.min.js[%/cdn_asset%]

Step 3. Add the JS to the header

  1. Open header/template.html and paste the below code directly below the </head> tag.
[%site_value id:'footer_javascript'%]
<script>
    // Same/next day delivery countdown feature

    // Global time and date variables required for the functions.
    var currentHour;
    var currentDate;
    var dayText;

    // Function required for the same/next day delivery countdown, and also the "sale ends in" countdown on the product page.
    function getDates(type) {
        serverTime = "[%format type:'date' format:'#Y-#m-#d-#h-#i-#s-#W'%]now[%/format%]";
        serverDate = serverTime.split("-");
        year = serverDate[0];
        monthNames = [null, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        month = monthNames[(serverDate[1])];
        dayNumber = serverDate[2];
        dayText = serverDate[6];
        hour = serverDate[3];
        time = serverDate[3]+":"+serverDate[4]+":"+serverDate[5];

        // Format dates correctly for Jquery countdown.
        // "fullDateAndTime" is an additional parameter to ensure that the countdown function uses the server time, rather than the client time.
        currentDate = serverDate[0]+"/"+serverDate[1]+"/"+serverDate[2];
        fullDateAndTime = month+" "+dayNumber+","+time;

        if (type == 'promo') {
            // Get formatted promo date
            promoEndDateFull = "[%format type:'date' format:'#Y-#m-#d-#h-#i-#s-#W'%][@promo_end@][%/format%]";
            date = promoEndDateFull.split("-");
            time = date[3]+":"+date[4]+":"+date[5];
            dateFormatted = date[0]+"/"+date[1]+"/"+date[2]+" "+time;
        }
    };
    getDates();

    $(document).ready(function(){
        // Display the same day countdown timer
        function sameDayCountdown() {
            $('#countdown').countdown(currentDate+' [@config:countdown_finish_hour_same_day@]:00:00', function(event){
                $(this).html(event.strftime('<p>Order in <span>%H:%M:%S</span> for same day delivery!</p><p>[@config:countdown_text@]</p>'));
            }, fullDateAndTime);
        }

        // Display the next day countdown timer
        function nextDayCountdown() {
            $('#countdown').countdown(currentDate+' [@config:countdown_finish_hour_next_day@]:00:00', function(event){
                $(this).html(event.strftime('<p>Order in <span>%H:%M:%S</span> for next day delivery!</p><p>[@config:countdown_text@]</p>'));
            }, fullDateAndTime);
        }

        /* Show the countdown timers, based on which they offer. The options are pulled from a custom config, with the following available:
           - same_and_next (shows both the same day delivery, and next day delivery countdowns)
           - same (shows same day delivery countdown only)
           - next (shows next day delivery countdown only)

           The countdown timer will only show on weekdays, and not weekends.
        */
        if(dayText != 'Saturday' && dayText != 'Sunday') {
            switch ('[@config:delivery_countdown_type@]') {
                case 'same_and_next':
                    finishHourSameDay = parseInt('[@config:countdown_finish_hour_same_day@]');
                    finishHourNextDay = parseInt('[@config:countdown_finish_hour_next_day@]');
                    if (hour < finishHourSameDay) {
                        sameDayCountdown();
                    }
                    else if (hour < finishHourNextDay) {
                        nextDayCountdown();
                    };
                    break;
                case 'same':
                    sameDayCountdown();
                    break;
                case 'next':
                    nextDayCountdown();
                    break;
            }
        }
    });
</script>
[%/site_value%]

Step 4. Add the HTML to the header

  1. Paste the below code wherever you'd like the countdown timer to appear in the header:
<div id="countdown"></div>

Step 5. Update the sale countdown JS on the product page

The sale countdown on the product page needs to be updated to use the latest version.

  1. Open products/template.html and remove the extra (old version) of the Jquery Countdown script:

<script type="text/javascript" src="//cdn.neto.com.au/assets/neto-cdn/jcountdown/1.4/jquery.jcountdown.min.js"></script>

  1. Replace the entire below block of code...
'onReady' : function () {
    $('.addtocart').button("reset");
    $('.zoom').zoom();
    $("#sale-end").countdown({
        date: "[%format type:'date' format:'#K #d, #Y  #H:#I'%][@promo_end@][%/format%]"
    });
},

...with this:

'onReady' : function () {
    $('.addtocart').button("reset");
    $('.zoom').zoom();
    getDates('promo');
    $('#sale-end').countdown(dateFormatted, function(event){
        $(this).html(event.strftime('%D days %H hours %M mins %S sec'));
    }, fullDateAndTime);
},
  1. Replace the entire below block of code...
<script type="text/javascript">
    $(document).ready(function() {
        $("#sale-end").countdown({
            date: "[%format type:'date' format:'#K #d, #Y  #H:#I'%][@promo_end@][%/format%]"
        });
    });
</script>

...with this:

<script type="text/javascript">
    $(document).ready(function() {
        getDates('promo');
        $('#sale-end').countdown(dateFormatted, function(event){
            $(this).html(event.strftime('%D days %H hours %M mins %S sec'));
        }, fullDateAndTime);
    });
</script>

Final Result

Email Address

Download Files

Download Files


Was this article useful?

Be notified when this page is updated. Optional.