How can I access and use metafields in product variants?

RNicolet · ‎05-06-2022

Hello,

I'm trying to setting up a change of view (translation) when selecting product variants. I could update the ISBN easily with the following code snippet

{% if product.options[0] %}
  var opt1 = document.getElementById('SingleOptionSelector-0').value;
{% endif %}
{% for v in product.variants %}
  if(opt1=="{{ v.option1 }}") {
    var id = {{ v.id }};
    var isbn = {{ v.barcode }};
  }
{% endfor %}
document.getElementById('ISBNDiv').innerHTML = "ISBN: "+isbn;

Now I'd like to try with other non-default fields. For example, I created a metafield variant.metafields.my_fields.translated_title for the translated title of each variant. However, the Liquid request (placed in the if(opt1==) loop)

{{ v.metafields.my_fields.translated_title }}

breaks the code, which doesn't run anymore. I also tried with .value to the end, without success.

How can I make it to work and access these metafields? Thanks a lot for your help!