Variant metafields are not updated

[matusmachus]

I've created Custom liquid,

{% if product.selected_variant %}
    {{ product.selected_variant.metafields.custom.new_desc}}
  {% else %}
    {{ product.description }}
  {% endif %}

but if I change the variant, the content doesn't change.

Anyone know how to fix this?

[tim · Accepted solution]

Liquid code runs only on the Shopify servers. When people change selectors on your product page theme Javascript updates your page to reflect those changes.

Theme JS has no idea that it needs to update your text. You'd need to have your own JS to do it.

This would be different for different themes.

Say, for Dawn I'd be doing something like, but this should be a "Custom liquid" block under Product Information section, not a separate section. 

<div class="custom-description">
  {{ product.selected_or_first_available_variant.option1 }}
 </div>
 <script>
   window.addEventListener('DOMContentLoaded', () => {
    subscribe (PUB_SUB_EVENTS.variantChange, (event) => {
     const { html, variant, sectionId } = event.data;
      debugger;
     const source = html.querySelector(`[data-section=${sectionId}] .custom-description`);
     const destination = document.querySelector(`[data-section=${sectionId}] .custom-description`);
     if (source && destination) destination.innerHTML = source.innerHTML;
    });
   });
 </script>

Also -- you may consider using an app for this https://apps.shopify.com/dynamic-variant-description 

[matusmachus]

It works!
Thank you

[felucita]

I tried to adopt the solution, but I can't access the new metafields value when the selected option has changed.

The critical line is:

var variant_specs= "{{ variant.metafields['custom']['variant_specs'] }}";

This should contain the value of the newly selected variant. But it doesn't work. It still needs a manual refresh to update the Custom Liquid's content. Any ideas? Thank you!

Here is the entire code:

<div id="specs">
{{ product.selected_or_first_available_variant.metafields.custom.variant_specs }}
</div>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', () => {
subscribe (PUB_SUB_EVENTS.variantChange, (event) => {const { html, variant, sectionId } = event.data;
var variant_specs= "{{ variant.metafields['custom']['variant_specs'] }}";
const destination = document.getElementById("specs");
destination.innerHTML= variant_specs;
});
});
</script>

[namphan]

Hi @matusmachus,

Please send me the store link, I will check it for you