Shopify themes, liquid, logos, and UX
Hi Guys
I am no coding expert, but I am trying to add some code that will allow me to add 'Estimated Delivery' under my ATC button (using the Impulse theme). The code works fine and appears under my ATC, but I want the delivery time to always stay between 1-3 days (depending on what shipping they choose when they checkout). I borrowed the code from someone who seems to have added code that always shows delivery estimates between 20/11 and 29/11 (this date reference is at the end of the HTML code). It's driving me nuts working out what I need to change!
I am sure this is a very simple fix for someone with coding expertise so thank you so much if you can help. The code I am using (and having trouble with) is the JS and HTML codes below:
(function() {
// estimate the delivery date
if(document.getElementById('fromDate')) {
var dateStart = 6;
var dateEnd = 12;
var fromDate = Date.today().addDays(dateStart);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
var toDate = Date.today().addDays(dateEnd);
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');
}
})();
and...
<script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js" type="text/javascript"></script>
<div class="dg-shipping-date">
<p>
<img src="https://cdn.shopify.com/s/files/1/0557/9836/6415/files/returns-symbol.png?v=1635932347" style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;">Easy returns <span>under 30 days</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/0557/9836/6415/files/Free_Gift_Wrapping.png?v=1635932347" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Gift Wrapped <span>online</span>
</p>
<p>
<img src="https://cdn.shopify.com/s/files/1/0557/9836/6415/files/Delivery_Symbol.png?v=1635932347" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Delivery estimated within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>
Cheers
Sarah
Can you show a working example?
Hi CHoosiZon
I've taken all the code down off the site. The code works fine it's just showing the estimated delivery date as between 20th and 29th Nov. The person is a drop shipper (i am not) which is why i think they have that gap in their window for estimated delivery. It sits here in the code:
<img src="https://cdn.shopify.com/s/files/1/0557/9836/6415/files/Delivery_Symbol.png?v=1635932347" style="height:25px;float:left;margin-right:10px;padding-bottom: 3px;">Delivery estimated within <span id="fromDate">20/11</span> and <span id="toDate">29/11</span>
</p>
</div>
It's puzzling me as i thought the code just looked at the current date and then added on what window you chose after that. For me, i want 1-3 days from the date it shows (always).
The date.js is compiled some 14 yrs ago. Javascript has since changed.
So maybe that it is not working anymore. It is impossible or too hard to see where it is not working.
14 years ago? WOW ok. The code works fine it's just pushing out the weird dates and i don't know what i need to change within the code to simply show 1-3 days (from the day the customer sees the product page).
Thanks for attempting to help.
The 1st pic is grabbed fr the .js file provided by you above. You able to see the date compiled.
2nd pic fr github : GitHub - datejs/Datejs: A JavaScript Date and Time Library
So should I just scrap the code as it's clearly obsolete now?
@SarahTinySteps wrote:So should I just scrap the code as it's clearly obsolete now?
Well i searched all over and found no working example.
If you able to find one working maybe you can try make it work. Otherwise no point keeping.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024