Restricting Estimated Delivery Date Display to In-Stock Items Only

Mireta
Tourist
3 0 0

Hi everyone,

I need help with a code issue on my product page. My product page shows an estimated delivery date, but it appears even for sold-out items. I want to display the date only for items that are in stock

Can anyone guide me on how to modify this to work only for available products? Thanks!

I'm using Dawn 12 theme.
Here is the code that I added in a custom liquid block on my product page:
<p>

<style="height:25px;float:left;margin-right:10px;padding-bottom: 4px;"/>

Get it between <strong><span id="fromDate"></span> - <span id="toDate"></span></strong>

</p>

{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}

<script>

var fromDate = Date.today().addDays(5);

if (fromDate.is().saturday() || fromDate.is().sunday()) {

fromDate = fromDate.next().monday();

}

var toDate = Date.today().addDays(10);

if (toDate.is().saturday() || toDate.is().sunday()) {

toDate = toDate.next().monday();

}

document.getElementById('fromDate').innerHTML = fromDate.toString('dddd MMMM dS');

document.getElementById('toDate').innerHTML = toDate.toString('dddd MMMM dS');

</script>

Replies 2 (2)
Lee-Strong-SEO
Shopify Partner
110 17 20

Hi @Mireta,

 

You can use the product.available tag to only show your custom code when the product is in stock.

{% if product.available %}

// Your existing code

{% endif %}

 

Strong SEO - The Best SEO App for Shopify
Get More Customers from Google, Without Paying for Clicks!

➡️ Install Strong SEO Now ⬅️
Mireta
Tourist
3 0 0

Thanks Lee, The code you provided works but it's static, doesn't reacts to the change of variant.
I want the estimated delivery date to dynamically update or disappear based on the availability of the selected variant. If the new variant is in stock, the delivery date should update to reflect this variant's delivery timeline. If the variant is out of stock or unavailable, the delivery date should not be displayed at all.