How to use Metafield Value for Condition checking

[Bini1]

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. 

[made4Uo]

Hi @Bini1, 

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

[PaulNewton]

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.

[Bini1]

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

[Bini1]

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

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

This is Metafield 

[Bini1 · 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]

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