Switch Statements in Twig

For choice in con­trol flow in Twig, we only have if and its sib­lings else and elseif. How­ev­er, if you are using Craft CMS, you also have access to an addi­tion­al con­trol flow option: switch. Craft CMS’s imple­men­ta­tion of switch is cus­tom and not part of the core Twig library.

But the switch state­ment is com­mon in most lan­guages, espe­cial­ly those some­what root­ed in C. The switch state­ment replaces a series of if/else/elseif state­ments and makes the code more straight­for­ward and readable.

An every­day use of the switch state­ment in Craft CMS and Twig is out­putting Matrix field data. 

Let’s say we have a data set for a few online cours­es. Two of them are video-based, and one is an ebook. I want to present dif­fer­ent options depend­ing on the course type. The video course will have a pre­view, and the ebook will have a down­load sam­ple. There could, poten­tial­ly, be oth­er lay­out issues we’d want to incorporate.

Of course, I could accom­plish this with a series of if state­ments, but it’s a bit more ele­gant to use switch.

Here’s our data:

{% set materials = {
	    'CQ-CRAFT': {
	        'type': 'video',
	        'name': 'Up and Running with Craft 3',
	        'url': 'https://craftquest.io/courses/craft-3',
	        'videoId': '123456'
	    },
	    'CQ-TWIG': {
	        'type': 'video',
	        'name': 'Twig Templates in Craft',
	        'url': 'https://craftquest.io/courses/twig-templates',
	        'videoId': '123456'
	    },
	    'CQ-CRAFT-BOOK': {
	        'type': 'ebook',
	        'name': 'Up and Running with Craft CMS',
	        'url': 'https://craftquest.io/ebooks/craft-cms',
	        'sampleFile': 'https://craftquest.io/downloads/somefile.pdf'
	    }
	}
%}

We could accom­plish this like this:

{% for item in materials %}
		{% if item.type == 'video' %}
			{# something here #}
		{% elseif item.type == 'ebook' %}
			{# something else here #}
		{% endif %}
{% endfor %}

But with many cas­es to go through, this could get dif­fi­cult to man­age. So it may look okay right now but using switch is a clean­er approach. 

And this is what our code would look like with switch (I’ve added a bit more detail to the out­put code):

<dl>
	{% for item in materials %}
		<dt>
			<h4>{{ item.name }}</h4>
		</dt>
		<dd>
			<h5>Material Type: {{ item.type | upper }}</h5>
			{% switch item.type %}
				
				{% case 'video' %}
				<p>Video Preview:
				{{ item.videoId }}</p>
				
				{% case 'ebook' %}
				<p><a href="{{ item.sampleFile }}">Download Sample</a></p>
	
			{% endswitch %}
		</dd>
	{% endfor %}
</dl>

The first thing we have to do is iter­ate over each of the items in the materials array, and then on each of those items’ type, we can do with cas­es check­ing for the type and then out­putting the markup or con­tent spe­cif­ic to that type.

Now we have a much clean­er and more main­tain­able way to iter­ate over Matrix blocks while react­ing to the dif­fer­ent block types.

Watch our free video course to learn more about Craft CMS and Twig con­trol flow to learn more about how to con­trol how and when you out­put con­tent in your Twig templates.