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

Majit
Tourist
7 0 1

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 10 (10)
r8r
Shopify Expert
2216 284 755

@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
PaulNewton
Shopify Partner
3501 234 685

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

 

What important thing did you learn this Black Friday?


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

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

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
MyLUCA
Excursionist
14 0 2

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.

MyLUCA
Excursionist
14 0 2

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
2216 284 755

@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
14 0 2

@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
2216 284 755

@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
14 0 2

@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
2216 284 755

@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