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 Neto by Maropost 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
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
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
For a same day countdown timer, follow these steps:
-
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
-
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".
Next-Day Countdown
For a next day countdown timer, follow these steps:
-
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.
-
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".
Same-Day and Next-Day Countdown
Complete the same-day countdown steps and the next-day countdown steps.
Step 3: Add the countdown plugin file
- Download the latest version of jQuery Countdown.
- In your FTP client, go to
/httpdocs/assets/themes/[THEME-NAME]/js
, and paste thejquery.countdown.min.js
file. - 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
- 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.
- 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%]
.