Dear community,
I am trying to implement an estimated delivery time by the current location on my product page. But it’s not working, please help me to improve the HTML codes…
Here are my HTML codes:
product-template. liquid
<img src="https://cdn.shopify.com/s/files/1/0756/8369/2886/files/package.png?v=1688971981" style="height:34px;margin-right:10px;padding-bottom: 3px;">Delivery estimated within <span id="fromDate">'dd/MM'</span> - <span id="toDate">'dd/MM'</span>
timber.js.liquid
<script>
// Estimate the delivery date based on current location
function estimateDeliveryTime() {
var location = getCurrentLocation(); // Replace getCurrentLocation() with the function that retrieves the current location
var dateStart, dateEnd;
var fromDate = Date.today();
var toDate = Date.today();
// Set the delivery time range based on location
if (location === 'Europe') {
var dateStart = 10;
var dateEnd = 15;
} else if (location === 'Asia') {
var dateStart = 7;
var dateEnd = 10;
} else if (location === 'Africa') {
var dateStart = 10;
var dateEnd = 15;
} else if (location === 'North America' || location === 'South America') {
var dateStart = 8;
var dateEnd = 15;
} else if (location === 'Australia') {
var dateStart = 10;
var dateEnd = 18;
} else {
var dateStart = null;
var dateEnd = null;
}
if (dateStart && dateEnd) {
fromDate.addDays(dateStart);
toDate.addDays(dateEnd);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
if (toDate.is().saturday() || toDate.is().sunday()) {
toDate = toDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dd/MM');
document.getElementById('toDate').innerHTML = toDate.toString('dd/MM');
} else {
document.getElementById('deliveryTime').innerHTML = 'N/A';
}
}
// Call the function to estimate and display delivery time
estimateDeliveryTime();
</script>
