Display different message for different selected variants. Show metafield/in stock / out of stock

[Majit]

Hi there,

I am working with metafield to display a different message when a variant changes. I have the code to change messages based on metafield when users use a different variant. But the problem is when there is no metadata for a variant in a product the code still shows messages from another variant. Rather I want to show the in stock message or out of stock message when there is no data added in the metafiled. I will be happy to send some $$ if you find me the solution. Here is my code: 

 {% for variant in product.variants limit:1 %}
      
   {% if variant.metafields.my_fields.shipping != blank and variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}
    
      <div class= "datebox"> <span class = "datedot1"> </span> will be shipped: <span class="variant_shipping_info" > </span> </div>
    
      
      {% capture 'meta_data' %}
      
     
      {% for variant in product.variants %}
      
      
      {{variant.id}}:{{ variant.metafields.my_fields.shipping | json }}{% unless forloop.last %},{% endunless %}
   
      {% endfor %}
     
       
      {% endcapture %}
      
      {% elsif variant.inventory_quantity > 0 %}
      
      <p> in stock </p>
      
      {% elsif variant.inventory_quantity <= 0 and variant.inventory_policy != 'continue' %}
      
      
      <p> out of stock </p>
      
       {% endif %}
        {% endfor %}
     
   
  <script>
  const currentVariantId = {{ product.selected_or_first_available_variant.id }};  // get the currently selected before variant is changed. 
  const metaData = { {{ meta_data }} };
  
  const shippingInfo = (id) => {
   var selector = document.querySelector('.variant_shipping_info');
    if (metaData[id]) {
     selector.style.display = 'inline' 
     selector.innerHTML = metaData[id];
    } 
  }
  shippingInfo(currentVariantId);
  
// When the variant is changed, get the id and call the function. :)
  document.addEventListener('variant:changed', function(event) { 
    var variant = event.detail.variant; // Gives you access to the whole variant details
    var id = variant.id 
     shippingInfo(id);
  });
  
</script> 

[r8r]

@Majit - are you sure that 

 {% if variant.metafields.my_fields.shipping != blank … %}

evaluates to true/false the way you want it to in all the instances?

Mario 

[MyLUCA]

Hey @r8r 

Do you think it is possible to adapt that solution to a simple output of a variant metafield content? 

I do have a metafield that is having a variant specific description. And I would like to showcase that above the general description.

[r8r]

@MyLUCA – not quite sure I understand your question in detail …

[MyLUCA]

@r8r simply display the content of a variant metafield on the product page. 
Preferably as a custom liquid so it can easily be used and arranged in the theme editor.

[r8r]

@MyLUCA – can you give me an example for a product-URL and a corresponding variant-URL – just to make sure, we're talking about the same!

Mario

[MyLUCA]

@r8r 

https://luca-wallets.myshopify.com/products/luca-slim-cash-wallet-handmade-in-germany?variant=399648...

pw is myluca

I do have a Variant Metafield with some text, but do not know how to display it.
I think part of the code above can be helpful. It actually works when included via a custom liquid. 
But the code above only displays fixed text and not content coming from a Variant Metafield.

[r8r]

@MyLUCA – alright. So what you want is a line like this, using the variant-objece:

{{ variant.metafields.YOUR_FIELD_NAMESPACE.YOUR_FIELD_NAME }}

It depends on the way your metafields are set up and how the variant is referenced in the theme.

Liebe Grüße,
Mario

[MyLUCA]

Hi @r8r 

Yes I think so. Is this the liquid code to display something?

I think with a combination of the event listener script posted by Majit, it would be able to display a unique information that changes with every variant?!
I think this is something many people are looking for. Here in the community and on Facebook many people want to display Variant Metafields information on the variant product page.

My last time coding was 20 years ago with Visual Basic. But I will give it a try with the fragments.

[mbgdev]

Yep. This is a basic feature and should exist already without coding anything in the liquid theme. Sadly, it's not not implemented and it's already end of 2024.

[PaulNewton]

for metafield definitions when in doubt push out the value 

{{ variant.metafields.my_fields.shipping.value }}

Further when debugging just output everything to verify logic

 i.e.

 {% for variant in product.variants limit:1 %}
     <p> forloop.index0: {{ forloop.index0 }}<p>
     <p> variant.inventory_quantity: {{ variant.inventory_quantity }}<p>
     <p> variant.inventory_policy: {{ variant.inventory_policy }}<p>

   {% if variant.metafields.my_fields.shipping != blank and variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}
...

[MyLUCA]

Hi Majit,

I do like your solution.

Can it be modified just to show a simple text that is inside a variant metafield? 
I have defined it as variant_description and would like to display the text in it. When the customer changes the variant, the new variant description should be displayed.

I tried to play with your code. But not sure how I can display the variable (text of the metafield).

Thanks.

[Chammond101]

I too am running into this problem. I have setup variant metafield that I would like to change depending on the variant selected. I am running Dawn 2.0 and can get the dynamic PRODUCT metafields to show - but I can't get it to dynamically change when a product has multiple variants.

Any posts I have found regarding this topic is very confusing and I even have coding experience. However, I don't know JS or liquid that well. 

Here is the code I want to work and dynamically update when a certain variant is selected:

-------------------

{%- if product.metafields.my_fields.case_size.value >0 -%}

<p>Case Size: {{ product.metafields.my_fields.case_size.value }} x {{ product.metafields.my_fields.container_volume | metafield_text }}/{{ product.metafields.my_fields.container_type.value }}
</p>

{%- else -%}
<p>Product not sold in cases</p>

{%- endif -%}

-------------------

Any help you can provide would be greatly appreciated!

-C

[Niki_K]

Hi @Chammond101,

If it's still relevant, I decided to write a step-by-step guide on how to render variant metafield values on product pages dynamically–this means when a customer selects a different product variant. The guide includes code snippets, including JavaScript that allows for dynamically updating the values: https://ecommercepot.com/shopify-qa/variant-metafield/

Hope this helps!