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

[namphan]

Hi @matusmachus,

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