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

Majit
Shopify Partner
9 0 2

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> 
Replies 12 (12)

r8r
Shopify Expert
2555 327 940

@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 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
MyLUCA
Excursionist
18 0 5

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
Shopify Expert
2555 327 940

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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
MyLUCA
Excursionist
18 0 5

@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
Shopify Expert
2555 327 940

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
MyLUCA
Excursionist
18 0 5

@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
Shopify Expert
2555 327 940

@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

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
MyLUCA
Excursionist
18 0 5

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.

PaulNewton
Shopify Partner
6274 573 1319

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' %}
...

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


MyLUCA
Excursionist
18 0 5

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
Shopify Partner
7 0 4

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
Shopify Partner
447 45 124

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!

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.