Delivery Countdown

Add a countdown timer to the header of your webstore to illustrate the cut-off point for same-day and/or next-day delivery.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

• Read through the Introduction to Maropost Commerce Cloud Document to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Countdown Timer Options

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

1: Same-Day Countdown

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

2: Next-Day Countdown

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

3: Same-Day & Next-Day Countdowns

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

Coding Instructions

Step 1: Setup the countdown timer type

1. Go to Settings & tools > All Settings & Tools > Custom Configs. 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

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

   • Both same-day and next-day countdowns: enter "same_and_next"
   • Same-day countdown: enter "same"
   • Next-day countdown: enter "next"

Note: To disable the timer, simply remove the text completely from the custom config. The text which accompanies the countdown will still show.

Step 2: Setup the countdown end time

• Same-Day Countdown
• Next-Day Countdown
• Same-Day & Next-Day Countdown

Step 3: Add the countdown plugin file

1. Download the latest version of jQuery Countdown.
2. In your FTP client, go to /httpdocs/assets/themes/[THEME-NAME]/js, and paste the jquery.countdown.min.js file.
3. Open /httpdocs/assets/themes/[THEME-NAME]/templates/footer/includes/scripts.template.html.

Look for [%cdn_asset html:'1' type:'js' library:'jquery_ui' version:'1.12.1'%]jquery-ui.min.js[%/cdn_asset%] and paste the following code below it <script type="text/javascript" src="[%ntheme_asset%]js/jquery.countdown.min.js[%/ntheme_asset%]"></script>

Step 4: Add javascript code to the header template

1. Open /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html and paste the below code directly below the closing </head> tag.

<!-- JS Delivery countdown feature -->
[%site_value id:'footer_javascript'%]
    <script>
        // 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>'));
                }, 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>'));
                }, 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 5: Add code to the header template

Paste the following code into the header template where you would like the countdown timer to appear <div id="countdown" class="text-center"></div>.

Step 6: Update the countdown timer javascript on the product page

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

1. Open /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/product_scripts.template.html and remove the extra jQuery Countdown script [%cdn_asset html:'1' type:'js' library:'jcountdown' version:'2.2.0'%]jquery.countdown.min.js[%/cdn_asset%].

Final Result