Hey,
I've seen a lot of people looking for this online without a solution. I built this and am testing it out on The William Painter Sunglasses website. Here is a screenshot of how it looks.
This uses javascript to show the estimated delivery date of your products with javascript by calculating todays date, adding two days, or more depending on what the current day of the week is. This is built to avoid weekend days so people don't get estimates that are on weekends as delivery doesn't normally happen then. This is a very rudimentary solution as it does not connect with any shipping provider, but works well to increase conversion by showing this information.
First, add this to your product form where you want the information to show. This has a liquid backup of two days from now, in case the javascript does not fire.
{% assign seconds = 5 | times: 72 | times: 60 | times: 60 %}
<div class="get_it_by">
{% render 'icon_svg' with 'truck' %}
<p>Order in the next <strong id="HMSremaining"></strong>, and get {{ product.title }} by <strong id="deliveryday">{{ 'now' | date: "%s" | plus: seconds | date: "%A, %B %d" }}</strong> with expedited Shipping at checkout.</p>
</div>
Second, add this to your theme.js javascript file to trigger the date and time remaining. I added some logic that will add an extra day if it is past noon, as that is a common cutoff date.
$(document).ready(function() {
function calculateHMSleft() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var monthday = new Array(12);
monthday[0] = "January";
monthday[1] = "February";
monthday[2] = "March";
monthday[3] = "April";
monthday[4] = "May";
monthday[5] = "June";
monthday[6] = "July";
monthday[7] = "August";
monthday[8] = "September";
monthday[9] = "October";
monthday[10] = "November";
monthday[11] = "December";
//calculate
var now = new Date();
var hoursleft = 12-now.getHours();
console.log(hoursleft);
var minutesleft = 59-now.getMinutes();
var secondsleft = 59-now.getSeconds();
//format 0 prefixes
if(minutesleft<10) minutesleft = "0"+minutesleft;
if(secondsleft<10) secondsleft = "0"+secondsleft;
if (hoursleft < 0) {
var hoursleft = hoursleft + 24
}
//display
$('#HMSremaining').html(hoursleft+" hours and "+minutesleft+" minutes");
if (hoursleft > 12) {
if (d.getDay() == 0 || d.getDay() <= 2) {
d.setHours(d.getHours() + 72);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + ' ' + day;
} else if (d.getDay() == 3) {
d.setHours(d.getHours() + 120);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + ' ' + day;
} else {
d.setHours(d.getHours() + 96);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + '-' + day;
}
} else {
if (d.getDay() > 0 || d.getDay() <= 3) {
d.setHours(d.getHours() + 48);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + ' ' + day;
} else if (d.getDay() == 0) {
d.setHours(d.getHours() + 48);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + ' ' + day;
} else {
d.setHours(d.getHours() + 96);
var deliver = weekday[d.getDay()];
var day = d.getDate();
var month = monthday[d.getMonth()];
document.getElementById("deliveryday").innerHTML = deliver + ' ' + month + '-' + day;
}
}
}
calculateHMSleft();
setInterval(calculateHMSleft, 60000);
});
Let me know if this works for you and share improvements on the code. I am still optimizing it for load time, but wanted to share what I have working so far.