Displaying product variant metafields on Expanse theme 2.0.1

[markatia]

I am currently having an issue checking and displaying product variant metafield with the below syntax. Any help would be great!

{% if variant.metafields.variant.shade != blank %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}

[LitExtension]

Hi @markatia,

Please change the code:

{% for variant in product.variants %}
{% if variant.metafields.variant.shade != blank %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}
{% endfor %}

You need to display product variant metafields.

Hope it is clear to you.

If you find my answer can help you solve your issue, please mark it as a solution. Thank you and good luck. 

[markatia]

Hi,

Thanks for your help.

I had to loop through the variant like so product.variants[forloop.index0].metafields.variant.shade to get the right metafields value.

[LitExtension]

You can also check with variant.title. Ex:

{% for variant in product.variants %}
{% if variant.metafields.variant.shade != blank and variant.title == 'Red' %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}
{% endfor %}

With this you can filter out all metafields of variant.

If my answer can help you solve your issue, please mark it as a solution. Thank you.

[arslanfakhir]

Hi @LitExtension 

For the Expanse theme, I've added variant metafield for each variant and want it to be displayed when the variant is selected, but it's not happening on selection, it's happening on refreshing the page.

Please can you provide suitable script of JS or jQuery or any other solution which can make the metafield updated on variant selection.

Here's what i'm trying:

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong> Grid ({{variant.title}}) Comes with {{ variant.metafields.custom.quantiry_per_box }} Units</strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>

[mpaule1004]

I'm using the same theme, and here is my code

{% for variant in product.variants %}
<div class="variant__description" data-variant-id="{{variant.id}}" {% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>
{% if variant.metafields.custom.variant_size %}
<p><span class="font-body-bold">Dimension:</span>{{ variant.metafields.custom.variant_size }}</p>
{% endif %}
{% if variant.metafields.custom.variant_cubage %}
<p><span class="font-body-bold">Cubage:</span>{{ variant.metafields.custom.variant_cubage }}</p>
{% endif %}
</div>
{%- endfor -%}


the code is ok, but it's not updating on Expanse theme, it need to refresh the page. trying to configure theme.js but don't know the right code