Product variant shipping dates

[Franrulzok]

Hi, I have a Shopify site (https://leadingsolutions.co.nz/) using theme Woodstock.

Some products have variants and some don't. I want to show estimated delivery for each product and/or variant. I currently have this code on my product page: 

{% if product.variants.first.inventory_quantity < 0 or product.variants.first.inventory_quantity == 0%}
<p style="color: #00bf63; font-weight:bold">{{ product.metafields.custom.deliverytime }}</p>
{% elsif product.variants.first.inventory_quantity > 0 %}
<p style="color: #00bf63; font-weight:bold">Delivered in 1-3 Days</p>
{% endif %}

and it's working really well. However, it's not picking up the new delivery time metafield I created and added to the products with variants. This would be: variant.metafields.custom.delivery_times I believe.

I'm looking to update the above code so it basically says the above but there is also an or rule that caters to the variants too. I'm struggling to know what this code would be.

Thanks!

[namphan]

Hi @Franrulzok,

If you display for each variant, it will include displaying by variant, and then changing it when the variant changes.

Do you have multiple variants to display this information? Or do all variants display the same?

[Franrulzok]

I'm not sure I understand your answer. 

Yes each variant has that metafield attached to it and therefore each variant will display either their unique metafield or the other option if stock is 0. At the moment, the delivery time is only picking up what is attached to the 'parent' product, but I need it to read at a variant level.

[namphan]

Hi @Franrulzok,

Please change all code:

<div class="deliverytime-{{ section.id }}">
  {% if product.selected_or_first_available_variant.inventory_quantity < 0 or product.selected_or_first_available_variant.inventory_quantity == 0%}
    <p style="color: #00bf63; font-weight:bold">{{ product.selected_or_first_available_variant.metafields.custom.deliverytime }}</p>
  {% elsif product.selected_or_first_available_variant.inventory_quantity > 0 %}
    <p style="color: #00bf63; font-weight:bold">Delivered in 1-3 Days</p>
  {% endif %}
</div>
 <script>
   window.addEventListener('DOMContentLoaded', () => {
    subscribe (PUB_SUB_EVENTS.variantChange, (event) => {
     const { html, variant, sectionId } = event.data;
      debugger;
     const source = html.querySelector('.deliverytime-{{ section.id }}');
     const destination = document.querySelector('.deliverytime-{{ section.id }}');
     if (source && destination) destination.innerHTML = source.innerHTML;
    });
   });
 </script>

[Franrulzok]

That doesn't work. To confirm, this code is being used in a custom liquid block on the product page. When I use that code, all the text dissapears and no delivery time is shown.

[namphan]

Hi @Franrulzok,

Did you add the deliverytime metafields for each variant?

Can I send you a collaborator invite? it will help me debug things better

[Franrulzok]

Sure can. My store is: https://admin.shopify.com/store/leading-solutions. I'm working on the 'tablets' product page and previewing the product 'Bouncepad Branch - iPad'

I'm trying to replace the current Custom Liquid code that is sitting below the price on the product page.

[namphan]

Hi @Franrulzok,

Please send me the collaborator code in private message, I will send you the invitation and check it

[namphan · Accepted solution]

Hi @Franrulzok,

Please follow these steps:

- Step 1: Please add code for Custom liquid block:

<div class="deliverytime-{{ section.id }}">
  {% if product.selected_or_first_available_variant.inventory_quantity < 0 or product.selected_or_first_available_variant.inventory_quantity == 0%}
    <p style="color: #00bf63; font-weight:bold">{{ product.selected_or_first_available_variant.metafields.custom.delivery_times }}</p>
  {% elsif product.selected_or_first_available_variant.inventory_quantity > 0 %}
    <p style="color: #00bf63; font-weight:bold">Delivered in 1-3 Days</p>
  {% endif %}
</div>

- Step 2: Go to critical-global.js file and add code here:

Code:

const deliverytimeDestination = document.querySelectorAll(`.deliverytime-${this.dataset.section}`);
        const deliverytimeSource = html.querySelector(`.deliverytime-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
        if (deliverytimeSource && deliverytimeDestination) {
          deliverytimeDestination.forEach((deliverytimeDesc, index) => {
            deliverytimeDesc.innerHTML = deliverytimeSource.innerHTML;
          })
        }