Check current variant's custom metafeild value in Javascript function.

[Excan-Nick]

Hello shoplifters,

I have the following code in my theme.js file which checks if a variant's sku changes on variant selection.

if (!newVariant || newVariant['sku'] === '') {
          productSku.style.display = 'none';
        } else {
          if (previousVariant && previousVariant['sku'] === newVariant['sku']) {
            return; // The SKU do not have changed so let's return to avoid changing the DOM for nothing
          }

This code works great but I want to change it to check if a variant's metafeild changes instead of the variants sku.

In my head I want to change

newVariant['sku']
previousVariant['sku']

to:

newVariant['variant.metafeild.NAMESPACE.KEY']
previousVariant['variant.metafeild.NAMESPACE.KEY']

but that doesn't work so I'm just not sure if there is a why to reference variant metafeilds from my newVariant & previousVariant objects.

I may also be going about this in the wrong way. Any guidance is apricated.

Thank you!

[kaalTechGeeks]

Hi @Excan-Nick, 
you cannot directly access the product metafield information directly from the product object. So it wont be possible to achieve what you are looking for. But maybe if you can elaborate your point in more detail that what you actually you want to achieve by changing the variant metafield. So it can give me a clear point and I can help you with the right approach to achieve that. 
Thanks & Regards
KaalTechGeeks    

[Excan-Nick]

Thanks for the reply, @kaalTechGeeks .

To expand some here is my store front's variant selector with my variant metafeild highlighted.

When I change the selected variant I need the highlighted area to change to the new variant's custom field. Right now it's just static and unchanging.

This is my liquid code to display my metafeild:

<span class="product-meta__sku" {% if selected_variant.metafields.exwings.model_number == blank %}style="display: none"{% endif %}>
          {{- 'product.general.sku' | t -}} <span class="product-meta__sku-number">{{ selected_variant.metafields.exwings.model_number.value | metafield_text }}</span>
</span>

Note: I cannot just use the included shopify sku product field as our customer facing sku needs to be different than our internal sku for organization reasons.  

[kaalTechGeeks]

@Excan-Nick, 
In this scenario what you can do is, you can store the variants metafield in a input field with type hidden

{% for variant in product.variants %}
<input type="hidden" data-sku="{{ variant.metafields.namespace.key }}" data-variant_id="{{ 
variant.id }}"/>
{% endfor %}

and when the variant changes then you can use the value stored in the input fields to be displayed as per the selected variant.   
This will help you fix this.