Chapter 3: Diving into Liquid Core with Tags

In the previous chapters, we saw some Liquid tags, such as control flow tags, in action. In this chapter, we will learn more about all the different tags we can use to modify our page content dynamically. We will learn about creating variable tags and theme tags and the best way to use them.

Learning about various types of iterations tags and parameters, we will gain the ability to execute blocks of code repeatedly, which will help us write better-quality code. Finally, we will mention some deprecated tags; they still appear in some older themes, so it is essential to know what they do and how to use them.

This chapter covers the following topics:

• Controlling the flow of Liquid (control tags)
• Variable tags
• Iterations tags
• Theme tags
• Deprecated tags

This third chapter will expand our knowledge of logic and comparison operators and different data types by exploring Liquid programming logic.

Technical requirements

You will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

The dataset used in this chapter, in *.csv format, is available on GitHub: https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/blob/main/Product-data.csv.

The code for this chapter is available on GitHub: https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter03.

The Code in Action video for the chapter can be found here: https://bit.ly/3nP8uwG

Getting things ready

Before we can proceed, we will need to create some product and collection pages first, which we will be using throughout the following exercises.

Creating the product page

Generally, creating a page or a product page is a straightforward and intuitive process:

1. We can start by navigating to the Products section in our sidebar and clicking the Add products button, automatically redirecting us to the page to define our product name, description, image, price, and other parameters. We will not go into too many details on managing a product. However, if you would like to read more about this topic, refer to https://help.shopify.com/en/manual/products/add-update-products.
2. To avoid creating a significant number of products manually that we will require later, we will use already created products that we can find on GitHub. We have created a .csv file that allows us to easily create many products for our development store for this specific purpose. The...

Controlling the flow of Liquid

In the previous chapters, we saw some control flow tags, such as if, and, and or, in action; now we will dive further into this topic and learn about all the control flow types of tags and how to use them. Control flow tags are a type of Liquid programming logic that tells our Liquid code what to do by allowing us to be selective about which block of code should execute under specific conditions. We can divide the control flow tags into four separate groups:

• if/else/elsif
• and/or
• case/when
• unless

The if/else/elsif tags

We have had the pleasure of seeing the conditional if statement in some of our previous examples, which, if proved true, execute the code inside our statement. Let's see it in action. In the previous chapter, we created the Learning about the page handle page.

However, let's try and create a new page for this exercise to solidify our knowledge and keep everything concise:

1. Let's start...

Variable tags

We can consider variables as data containers to save the various types of information that we want to use later in our code or overwrite as needed. Besides saving the information for later use, variables also allow us to use descriptive text as a label, allowing us to understand what type of information a particular variable contains. We can divide the variable tags into the following four groups:

• assign
• capture
• increment
• decrement

The assign tag

The assign tag allows us to declare a variable to which we can assign string, number, or Boolean data. We can declare a variable by writing the assign keyword followed by the name of the variable we are declaring, followed by the equal sign and the date we assign to that particular variant, and encapsulating it within the curly brace delimiters with percentage symbols:

{% assign stringVar = "This is a string!" %}
{% assign numberVar = 2021 %}
{% assign booleanVar = true %}

Once we...

Iterations tags

Iterations tags are different Liquid programming logic types that allow us to run blocks of code repeatedly. Using iteration tags will save us the time that it would otherwise take us to execute code for each occurrence manually; plus, it will make our code much more concise and readable. To keep the topic concise, we will only mention some of the most used iteration tags and their parameters, which is more important than listing them all as they are all created using similar concepts. We can divide the iteration tags into four separate groups:

• for/else
• jump statements
• for parameters
• cycle

The for/else tags

In the previous chapter, we had the chance to use the for loop in one of our examples when we explained the arrays inside the Understand the types of data topic. However, we have not had the chance to explain all the possibilities that the for loop gives us. The for loop is a type of Liquid programming logic that allows us to loop over...

Theme tags

Theme tags are a special type of tag that give us specific control over both un-rendered and rendered code. Using the various types of theme tags that we have at our disposal, we can create a different type of HTML markup for specific templates that is essential for creating a form that will allow customers to purchase products from our store. Additionally, they allow us to select different theme layouts to use for different pages, define sections or snippet files that we can use to create reusable blocks of code, and many other things. We can divide theme tags into the following groups:

• layout
• liquid and echo
• form
• paginate
• render
• raw
• comment

The layout tag

As we recall from the first chapter, when discussing the Layout directory, we mentioned the importance of the theme.liquid file as it is in this file that we will render all of our files and templates. It is in this file that we arrange the general layout of our pages.

Our...

Deprecated tags

Deprecated tags are Liquid tags that are considering as outdated, and we should no longer use them in our developing process. However, we may still encounter them inside some of the older themes, so it is important to recognize them and know what they do.

The only tag that Shopify has deprecated is the include tag, which works similarly to the render tag, which we have previously covered:

{% include "snippet-name" %}

The only key difference between the two is that when rendering a snippet using the include tag, the code inside our snippet can automatically access and modify the variables within its parent template. This not only creates a lot of performance issues but also makes our code a lot harder to maintain, which is why Shopify replaced it with the render tag.

Summary

In this third chapter, we have learned about the Liquid programming logic that allows us to select which code block should execute under specific conditions. We have gained an understanding of variable and iteration tags and how we can use them in combination with different programming logic to execute a block of code repeatedly and recover only specific results.

Lastly, we have learned about the different types of theme tags and how we can use them to output a template-specific HTML markup. By learning how to use snippets to make our code more readable and maintainable, we have already taken a step forward in writing better-quality code. This will be especially important in the following chapter, where we will be diving further into Liquid core and learning more about Liquid objects and their attributes.

Questions

1. What parameters should we use inside a for loop if we want to show a maximum of seven iterations while also skipping the first three iterations?
2. What types of data can we assign to a variable created using the capture tag?
3. What are the two problems in the following block of code?

   Liquid for product in collections["outdoor"].products
     if product.price > 10000
       continue
     else
       product.title
     endif
   endfor

4. What approach should we take to modify an HTML-generated product form by replacing the existing class attribute with a combination of a string and a variable?
5. What parameter should we use if we want to pass an object from the parent element?