Display Product Variant Metafields

Question

I need to display metafields based on the variants selected on the product page. I want them to change as the variants are clicked. I may need some jquery help but I am not that sure how to apply with liquid. Below is my code, any help is greatly appreciated!

{% for variant in product.variants %}
<div id="tab{{ forloop.index0 }}" class="zr-tabs-panel {% if forloop.first == true %}js-active{% endif %}">
  <div class="table-responsive>">
    <table class="table table-striped">
      <tbody>
        {% for field in current_variant.metafields.var_meta %}
        <tr>
          <td>{{ field | first }}</td>
          <td>{{ field | last }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endfor %}

Short answer is that you will need to (a): Expose your metafields to your site's javascript somehow, then (b): Update your variant-changing code to also update the section based on your metafields. Do you happen to know where your javascript function that changes variants is? In many themes, this is a function named selectCallback, though this isn't the case in all themes. If you need help and are willing to share your site address, I should be able to find it for you just by inspecting the frontend :) — Dave B
Hey thank you Dave B. I was able to find the variant-changing script and add the metafields to it. Thanks for the feedback! — AaronS
No worries! Glad to be able to point you in the right direction! — Dave B
Translating my comment to an answer so that you can show that this question has been solved :) — Dave B

Dave B Dave B · Accepted Answer · 2018-03-15T16:55:32

The short answer is that you will need to (a): Expose your meta fields to your site's javascript somehow, then (b): Update your variant-changing code to also update the section based on your meta fields.

In many themes, the variant-changing code is contained in a function named selectCallback (though this isn't the case in all themes - if you have trouble finding this code, you can try reaching out to your theme's developer for theme-specific advice).

Whenever you're using Liquid code to put values into Javascript code, I strongly recommend using the json filter - Liquid's magic filter that ensures your output will always be Javascript-legal. (Quotation marks and line breaks will be properly escaped, empty values will be printed as null, etc)

Display Product Variant Metafields

1 Answers