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

Technical Q&A
,
1

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);
    });
  }

  <strong>updateMeta() {
	  extraVariantInfo(this.currentVariant.id);
  }</strong>

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

2

This community is useless.