I am sure many of you are more than familiar withLiquid control tagssuch asifandelse, but are you familiar with case/when?
Here's how theShopify docsdescribe it:
Case/when creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.
Here's an example:
{% assign handle = 'cake' %} {% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}
In this instance, the output will be determined when the variable calledhandleis "equal" to "cake" or is equal to "cookie". If neither condition evaluates totrue,it will output the text after the lastelseclause.
If you omit theelseclause and the handle variable never evaluates totrue,no output will be output. This is because theelseclause acts as a fallback in the above example.
Real world example
As nice as our example is, you might be wondering when you might use this in your own theme development.
One example I have used in the past is in relation to banners in a theme. Despite my love ofalternate templates, there are occasions where creating a variety of templates simply to display different promotional banners would be very time-consuming. Not only would you have to build the templates, but you'd also have to assign them to each product in turn. A more practical approach is to let Shopify do the heavy lifting for you.
Let's say we wanted to display different promo banners on particular products. One way we could do this is to use product handles andcase/when. This code example will work in aproduct.liquidtemplate.
{% assign handle = product.handle %}
{% case handle %}
{% when 'coffee-cup' %}
{% include 'promo-coffee-cup' %}
{% when 'cup-saucer' %}
{% include 'promo-cup-saucer' %}
{% else %}
{% include 'promo-default' %}
{% endcase %}
We start off by creating a variable calledhandleand assign it the current value ofproduct.handle. If you aren't familiar with handles then thedocshave a great primer to get you started. Next we instantiate ourcaseclause. What follows is a series ofwhenstatements.
In our example, if our product handleequalscoffee-cupthen the snippet titledpromo-coffee-cupwill be included and Shopify will head right toendcaseand carry on.
Alternatively, if the product handle isequaltocup-saucerthen the snippet titledpromo-cup-saucerwill be included. If the product handle is neithercoffee-cuporcup-saucerthen theelseclause kicks in and the snippet titledpromo-defaultwill be output.
We have achieved quite a lot with a little. We are conditionally loading different snippets depending on the product being viewed and outputting a default promo banner if neither condition is met. We've also achieved this without having to create any alternate templates.
To extend the example, you could simply add in further specific product handles when needed. However, an alternative approach might be needed if you wanted to include tens of different banners. Of course, there's many different ways to achieve the same thing in Liquid and in a future tutorial we'll look at how to use other Liquid constructs such as contains and unless to achieve similar results.
You might also like:Ways to Customise the img element in Shopify Themes