How can I display variant metafields for specific product variants only?

[EdgarPateno]

Hi there, 

We are using Dawn 11.  The issue sounds pretty simple, but it's not.  There is no easy way to display the variant metafields. Tried a lot of forum recommendations, but it didn't work.  

Please please, I need your help.

Our variant metafield definition is variant.metafields.custom.variant_data_1.  We want to display it below the price, so in the main-product.liquid file below the {% when 'price' %} code block, I injected this:

<!-- This is for the variant metafields -->
            <div class="hideAll">
                <p><span>Extra Info 1: </span><span class="variant_data_1"></span></p>
            </div>

            {% capture 'meta_data_1' %}
                {% for variant in product.variants %}
                    {{variant.id}}:{{ variant.metafields.custom.variant_data_1 | json }}
                    {% unless forloop.last %},{% endunless %}
               {% endfor %}
            {% endcapture %}

            <script>
              const currentVariantId = {{ product.selected_or_first_available_variant.id }};
              const metaData = { {{ meta_data_1 }} };
              const extraVariantInfo = (id) => {
              let selector = document.querySelector('.variant_data_1');
              let hide = document.querySelector('.hideAll')
                if (metaData[id]) {
                 hide.style.display = 'block'
                 selector.innerHTML = metaData[id];
                }
                else
                 hide.style.display = 'none'
              }
              extraVariantInfo(currentVariantId);
            
            </script>

 However, on this line const metaData = { {{ meta_data_1 }} }; I got a warning saying: 'Unknown object 'meta_data_1' used.  I ignored that and proceeded.  Inside global.js file, I injected this method  this.updateMeta(); below the onVariantChange() inside the else block.

onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();
    this.updateVariantStatuses();

    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
      this.updateMeta();
    }
  }

And further down, I injected this updateMeta code below the other update methods:

updateMeta() {
extraVariantInfo(this.currentVariant.id);
}

updateMasterId() {
    this.currentVariant = this.getVariantData().find((variant) => {
      return !variant.options
        .map((option, index) => {
          return this.options[index] === option;
        })
        .includes(false);
    });
  }

  updateMeta() {
	  extraVariantInfo(this.currentVariant.id);
  }

Now, I tested adding texts on one variant.  It was displayed on the product page below the price, but it was displayed on all 4 variants instead of only the specific variant I tested.  This is so frustrating.  Please help.

Thanks and take care

[EdgarPateno]

This community is useless.