How to use Metafield Value for Condition checking

Solved
Bini1
Shopify Partner
4 1 1

I am using Product Metafield to display Spice Level of the Product with fix list of Low , Medium and High as fixed text, Currently i am trying to display images of Chilli which are uploaded on Shopify itself. If Low it will show 1 chilli and if 2 - for medium and 3 for High. 

Using Metafield for all the product - product.metafields.my_fields.spice_level 

Trying to use it like

 

{% if product.metafields.my_fields.spice_level != blank %} 
        	<div class="product-spicy">
              <h5> Spicy Level : {{product.metafields.my_fields.spice_level.value}} </h5>
              {%- if product.metafields.my_fields.spice_level.value == 'Low' -%} 
              	<img src="" height="16" width="16" alt="spicy_level">              
        	  {%- elsif product.metafields.my_fields.spice_level.value == 'Medium' -%}
              	<img src="" height="16" width="16" alt="spicy_level">
              	<img src="" height="16" width="16" alt="spicy_level">
      		  {%- elsif product.metafields.my_fields.spice_level.value == 'High' -%} 
              	<img src="" height="16" width="16" alt="spicy_level">
              	<img src="" height="16" width="16" alt="spicy_level">
              	<img src="" height="16" width="16" alt="spicy_level">
	 {%- endif -%}
</div>
{%- endif -%}

 

 

How can we implement this correctly to show images based on Metafield Values selected. I also tried assigning and then tried it but it also didnt work. 

Accepted Solution (1)

Accepted Solutions
Bini1
Shopify Partner
4 1 1

This is an accepted solution.

Found the solution @PaulNewton . I tried your method and output the assign and it showed me in this format ["medium"] instead of just showing medium. Than i changed the case to '["medium"]' and it works now. 

{% if product.metafields.my_fields.spice_level != blank %}
        
        	{%- capture image_spicy_level_html -%}
				<img src="" height="16" width="16" alt="spicy_level">
			{%- endcapture -%}	 
        
        	<div class="product-spicy">
              <h5> Spicy Level : {{product.metafields.my_fields.spice_level.value}} </h5>
              {%- assign spice_level_value = product.metafields.my_fields.spice_level.value | downcase -%}
              {{image_spicy_level_html }}
                {%- case spice_level_value -%}
                 {%- when '["medium"]' -%}
                  {{image_spicy_level_html }}
                 {%- when '["high"]' -%} 
                  {{image_spicy_level_html }}
                  {{image_spicy_level_html }}
                {%- endcase -%}
        	</div>
           {% endif %}




View solution in original post

Replies 6 (6)
made4Uo
Shopify Partner
801 85 137

Hi @Bini1

 

Enlighten me. Are you the one selecting the spiciness in your metafield or the customer is selecting it?

✿✿✿-If this helps, please Accept as Solution✌-✿✿✿
Need help? Custom edits?
Just visit me at my ☏ website and check my codes for as low as $7 custom sections and snippets.
I can write a code for you as well.
PaulNewton
Shopify Partner
4181 299 886

Hi @Bini1 ,welcome

I see here you are outputting the value to double check it

 <h5> Spicy Level : {{product.metafields.my_fields.spice_level.value}} </h5>

So look at the rest of your code as long as your seeing a value being output, the first thing I'd check is the case-sensitivity as CSS may be uppercasing the text but the actual value is all lower case, view the pages html source and check the casing.

 

If case sensitivity is the issue consider normalizing such variables and comparisons with the downcase filter,etc;  as a matter of habit just in case.

 

When fixed to future proof it a bit in case of additional ranks later.

 Using a {% case %} tag instead for logic like this.

Or changes to the html make it so it only needs to happen in 1 place.

 And capturing the desired html into a variable for reuse in each output.

 

{%- capture image_spicy_level_html -%}
<img src="" height="16" width="16" alt="spicy_level">
{%- endcapture -%}

{%- assign spice_level_value = product.metafields.my_fields.spice_level.value | downcase -%}
{%- case spice_level_value -%}
{%- when 'low' -%} 
  {{image_spicy_level_html }}
 {%- when 'medium' -%}
  {{image_spicy_level_html }}
  {{image_spicy_level_html }}
 {%- when 'high' -%} 
  {{image_spicy_level_html }}
  {{image_spicy_level_html }}
  {{image_spicy_level_html }}
{%- endcase -%}

 

 

Over optimization:

This is something to consider if really needing to squeeze performance out of theme code.

It should also be noted that when the value does exist there is always at least 1 spicy-image that is output. So technically 1 spicy-image could be output before the case statement, or checking for low could be skipped and case statement could default to 1 spicy-image output and  every check only puts out 1 less spicy-image.

Save time seeking solutions - Learn To Ask Questions The Smart Way

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
Bini1
Shopify Partner
4 1 1

Yes i am the one selecting the spiciness level while creating or modifying product. 

Bini1
Shopify Partner
4 1 1

I did update the code as per your guide for Optimization. I tried using the above code for some reason it didnt work also. 

{% if product.metafields.my_fields.spice_level != blank %}
        
        	{%- capture image_spicy_level_html -%}
				<img src="" height="16" width="16" alt="spicy_level">
			{%- endcapture -%}	 
        
        	<div class="product-spicy">
              <h5> Spicy Level : {{product.metafields.my_fields.spice_level.value}} </h5>
              {%- assign spice_level_value = product.metafields.my_fields.spice_level.value | downcase -%}
              {{image_spicy_level_html }}
                {%- case spice_level_value -%}
                 {%- when 'medium' -%}
                  {{image_spicy_level_html }}
                 {%- when 'high' -%} 
                  {{image_spicy_level_html }}
                  {{image_spicy_level_html }}
                {%- endcase -%}
        	</div>
           {% endif %}

Bini1_0-1652529684091.png


I just took a random image as of now for checking and still it didnt work for some reason.

This is Metafield 

Bini1_1-1652529757475.png

 

Bini1
Shopify Partner
4 1 1

This is an accepted solution.

Found the solution @PaulNewton . I tried your method and output the assign and it showed me in this format ["medium"] instead of just showing medium. Than i changed the case to '["medium"]' and it works now. 

{% if product.metafields.my_fields.spice_level != blank %}
        
        	{%- capture image_spicy_level_html -%}
				<img src="" height="16" width="16" alt="spicy_level">
			{%- endcapture -%}	 
        
        	<div class="product-spicy">
              <h5> Spicy Level : {{product.metafields.my_fields.spice_level.value}} </h5>
              {%- assign spice_level_value = product.metafields.my_fields.spice_level.value | downcase -%}
              {{image_spicy_level_html }}
                {%- case spice_level_value -%}
                 {%- when '["medium"]' -%}
                  {{image_spicy_level_html }}
                 {%- when '["high"]' -%} 
                  {{image_spicy_level_html }}
                  {{image_spicy_level_html }}
                {%- endcase -%}
        	</div>
           {% endif %}




PaulNewton
Shopify Partner
4181 299 886

That's odd however it should be outputting as a string, what that ["medium"]  is showing is it's outputting like an array item for some reason.

 

I'd try to resolve that oddity,  or normalize the strings by removing any non A-Z characters.

https://shopify.dev/api/liquid/filters/string-filters#remove

 

Goodluck

Save time seeking solutions - Learn To Ask Questions The Smart Way

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