Replace Product Metafields with Variant Metafields in Kalles Delivery Estimation

Ghidini1849
Excursionist
30 0 2

Hi,

inside my Kalles theme by The4, I can use my product metafields in order to calculate the Delivery Estimation Date.

We have a metafield for StartDate and one for EndDate. This works really well, however I need to change it to variant metafields because we produce our items and some finishes/colors take more time than others. Therefore I need to show the Delivery Estimation inside each Product Page Summary as now, but it should work with the following metafields:

variant.metafields.meta.estimateStartDate

variant.metafields.meta.estimateEndDate

 

I managed to make it work with those, but then the Variant Selector is not updating my delivery estimation. I tried to look at the file, but I really do not know how to do it.

 

Product Page Example : https://ghidini1849.com/collections/italian-brass-lighting/products/design-pendant-light-black-gold-...

 

Replies 4 (4)
LitExtension
Shopify Partner
3731 738 782

Hi @Ghidini1849,

I.e. with different variants, it will show different times? 

And when you click variants, it changes.

This is going to be a complicated request because Kalles has coded a lot of JS files, so it will be difficult to debug this. Therefore, I recommend you to hire an expert or contact Kalles directly for support.

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Ghidini1849
Excursionist
30 0 2

Hi,

I tried to contact Kalles but they are not replying and I do not think they will check on this issue.

I have checked the theme and found where the solution might be.

Store Preview : https://nyoaax6w4att8ha7-55710711987.shopifypreview.com

Please see these images and please let me know because it is really important for my store.

I haved added vr_metafields and vr_metafields_meta and changed them inside the delivery estimation.

This worked but if I select another variant, the delivery estimation does not get any update.

I also found where the selectCallback is: swatch.js and swatch.min.js but now I do not know what code and where to add. I found the SKU and maybe I thought to replicate something like that. But I really do not know how to start.
I really hope you can help me please.

Thank you very much anyway!

 

1.png

2.png

3.png

4.png

    

LitExtension
Shopify Partner
3731 738 782

Hi @Ghidini1849,

You can use this tutorial I made for Dawn theme. Refer https://community.shopify.com/c/shopify-design/how-to-map-the-variants-with-shopify-product-meta-fil...

Which means now you need to list all variants metafields, hide them all and show only metafields with current variant.

Then in JS you check id variant and show/hide metafield.

Hope it is clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Ghidini1849
Excursionist
30 0 2

I have added the following code as custom liquid inside product page summary and it shows all variants metafields correctly. Then I went inside swatch.js and added the other code but it is not working. It is always showing all variant metafields.

{% for variant in product.variants %}
<div id="product{{ variant.id }}" class="variant__metafields {% unless variant.id == product.selected_or_first_available_variant.id %}hidden{% endunless %}">
                {% if variant.metafields.meta.estimateStartDate != blank and variant.metafields.meta.estimateEndDate != blank %}
                  <p data_vid="{{variant.id}}">Estimated Delivery : {{ variant.metafields.meta.estimateStartDate }} - {{ variant.metafields.meta.estimateEndDate }} days</p>
                {% endif %}
</div>
{% endfor %}