Variant metafields on product page (Broadcast Theme)

Store Design
1

Hi Guys,

Ive been trying to display the variant metafield in the product page but it doesn’t update when selecting variants.

heres the code i used for it to show

<div class="variant-meta" {{ block.shopify_attributes }} style="margin-top:">
                    {% for variant in product.variants %}
                      {% if product.selected_or_first_available_variant.id == variant.id %}
                        <p class="meta-msrp">MSRP: <strong><span class="variant-metafields">{{ variant.metafields.custom.msrp_price }}</span></strong></p>
                      {% endif %}
                    {% endfor %}
                  </div>

ive used the same concept for the variant sku and heres what i did that worked.

this to show variant sku on product page

<div class="sku-container" {{ block.shopify_attributes }} style="margin-top:">
                    {% if product.selected_or_first_available_variant.sku != blank %}
                      <p class="product-sku">SKU#: <strong><span id="variant-sku">{{ product.selected_or_first_available_variant.sku }}</span></strong></p>
                    {% endif %} 
                </div>

this for it to update when selecting variants

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var skuElement = document.querySelector('.product-sku #variant-sku');
    var variantSelect = document.querySelector('[name="id"]');
    var variants = {{ product.variants | json }};
    var variantMap = {};

    // Create a variant map for easier lookup
    variants.forEach(function(variant) {
      variantMap[variant.id] = variant;
    });

    variantSelect.addEventListener('change', function() {
      var variantId = variantSelect.value;
      var selectedVariant = variantMap[variantId];

      if (selectedVariant) {
        skuElement.textContent = selectedVariant.sku ? selectedVariant.sku : 'N/A';
      } else {
        skuElement.textContent = '';
      }
    });

    // Trigger the change event initially to display the SKU for the default selected variant
    variantSelect.dispatchEvent(new Event('change'));
  });
</script>

if anyone can help me get the variant meta field to update - or is thee an app that will display variant meta fields on the product page? (must be using shopifys variant meta fields as i have 1000s already inputed

1 Like
2

Hi @Davethebrave ,

The liquid code does not listen to user’s input, like clicking. You need to write a javascript code to do so

3

ive made this but currently it give me N/A . what am i getting wrong?

4

Oh. This code is not right. You have to listen to an array of elements instead of one. I would suggest to hire a developer to do so

1 Like