Replace Product Metafields with Variant Metafields in Kalles Delivery Estimation

Technical Q&A
1

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-premium

2

Hi @atertonien ,

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!

3

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
1.png1920Ɨ1080 333 KB

2.png
2.png1920Ɨ1080 291 KB

3.png
3.png1920Ɨ1080 341 KB

4.png
4.png1920Ɨ1080 319 KB

4

Hi @atertonien ,

You can use this tutorial I made for Dawn theme. Refer https://community.shopify.com/post/1429404

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.

5

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 %}

                {% if variant.metafields.meta.estimateStartDate != blank and variant.metafields.meta.estimateEndDate != blank %}
                  

Estimated Delivery : {{ variant.metafields.meta.estimateStartDate }} - {{ variant.metafields.meta.estimateEndDate }} days

                {% endif %}

{% endfor %}