Chapter 5: Diving into Liquid Core with Filters

In the previous two chapters, we learned about all the different Liquid tags and objects, and now, we will be focusing on the last of the Liquid Core features, which is filters. We have referenced filters on a few occasions now, but what exactly is the purpose of filters? Filters are methods denoted by a pipe character, |, through which we can manipulate different data types, including strings, numbers, variables, or even objects, making it a compelling feature.

We can split the chapter into the following topics:

• HTML and URL filters
• Enhancing the product media gallery
• Building product accordions
• Math and money filters
• Exploring the additional filters

By the time we complete this chapter, we will precisely understand how much power filters provide us. Similarly, as with the previous chapter, instead of simply listing and going through all of the filters, we will only explain some essential filters through...

Technical requirements

While we will explain each topic and present it with accompanying screenshots, you will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

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

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

Working with HTML and URL filters

In the previous chapter, we had the chance to see a type of URL filter when we worked on outputting the product images, {{ image | img_url: "400x400" }}. However, what exactly are URL filters?

URL filters are methods that allow us to output a direct path to the assets on Shopify's Content Delivery Network (CDN). We can use URL filters in many ways. However, URL filters alone only provide a string path to the requested asset. Therefore, to find them helpful, we must pair them with HTML tags, such as the image tag, inside which we can add the string path to a specific asset as the href attribute. Alternatively, we can combine URL filters with HTML filters to automatically generate the necessary HTML element with the necessary attributes. Let's see them in action now.

In Chapter 1, Getting Started with Shopify, we learned about the Assets directory inside our theme files and how it contains all of the internal assets that our...

Enhancing the product media gallery

In the previous exercise, we learned how to output the image elements needed to output the necessary elements to create a basic product gallery that contains only images. In the following project, we will learn how to use media objects and filters to create a multifunctional gallery that will support images, 3D models, and internal videos hosted on Shopify. Additionally, we will also embed external video links to some of the most popular video platforms, Vimeo and YouTube, and autogenerate the appropriate video player for both.

Most of the newest themes today already contain a product media gallery. However, many stores still use outdated theme files, so it is essential to know how to create the feature from scratch.

Let's start by navigating to the Product Gallery page we created in the previous Building a product gallery subsection, located under the Working with HTML and URL filters section, and revise the previously included code to...

Building product accordions

In the following project, we will be learning about the string and array filters by working with and creating the product accordions feature. But, before we proceed with the project, what exactly do string and array filters do?

String filters are methods that allow us to manipulate the output of Liquid code or the variable itself as long as the variable is a string type, whereas array filters allow us to manipulate the output of arrays.

For this project, we will first find one product with a lengthy description. To save some time, we already included the necessary description in the Black Armchairs product that we previously imported from the product-data.csv file in Chapter 3, Diving into Liquid Core with Tags.

Figure 5.4 – Example of a long product description

As we can see from the previous screenshot, having a lengthy product description can be quite inefficient as it takes up a lot of space. While we can easily...

Math and money filters

In the previous chapter, we had a chance to see money filters in action while working on the Custom collections project. Money filters are simple types of filters whose only task is to format the number value based on the currency formatting options, but what exactly does this mean?

To better understand, let's navigate to our admin page and click on the Settings button in the bottom-left corner. Consequently, click on the General option to open where we will be able to update the store's basic information. Once inside, scroll down until you have reached the section named Store currency. This is where we can change the store's default currency, which our customers will use to make their purchases. Instead of changing the store currency, let's click on the Change formatting button.

Figure 5.7 – Location of the store currency formatting

By clicking the Change formatting button, we will reveal additional currency...

Exploring the additional filters

The additional filters are a set of filters that do not fit under any other filter groups. However, this does not make them any less important. While there are many types of filters that we can name here, we will only mention three of them that are the most essential as we will be using them regularly.

The default filter

As its name suggests, the default filter allows us to set a default value for any variable, whether it is a string, array, or hash type. Note that we can only return the default value if the variable returns nil, false, or an empty string. If the variable contains whitespace characters, we will not be able to return the default value:

Hello {{ customer.name | default: "customer" }}

By introducing the default value in the previous example, we have ensured that we will not end up with a broken string even if the customer has not provided us with their name. Additionally, we also make our code look a lot cleaner....

Summary

In this chapter, we have learned how using something trivial such as a filter to manipulate different data types can create powerful features. We have learned how using URL and HTML filters can provide us with access to the various types of assets throughout Shopify and help us generate them in the storefront using their respective HTML tags.

Working on the product media gallery project has provided us with a deeper understanding of media objects and filters, which every developer needs to be familiar with. The product accordions project taught us how to easily manipulate data using string and array filters to create unique page content elements that are clean and easily maintainable. Moving on to the math and money filters, we have gained much-needed insight into performing complex calculations through Shopify and formatting the prices according to the currency formatting set in our store.

Lastly, we learned about the additional filters, which provided us with essential...

Questions

1. Suppose that we have an array named product_handles with handles of 30 products. What issue in the following code would prevent us from outputting the images of all 30 products successfully?

   {% for handle in product_handles %}
     {% assign product_object = all_products[handle] %}
     {% for image_item in product_object.images %}
       <img src="{{ image_item | img_url }}"/>
     {% endfor %}
   {% endfor %}

2. Why is only using the model_viewer_tag tag not recommended when creating the product media gallery?

   {% for media in product_object.media %}
     {% case media.media_type %}
       {{ media | model_viewer_tag }}
     {% endcase %}
   {% endfor %}

3. Which filter could we use if we were looking to access an item at a specific location inside the array?
4. What filter can we use to quickly update any occurrence of a string value inside the theme files?

Practice makes perfect

Project 3

In one of our previous exercises, we learned how to create basic and complex product galleries by outputting all types of product media types. However, what if we only needed to output several images related to the specific variant at a time?

For our third project, we will be working on rendering a product media gallery with distinctive markings that will allow us to show only the thumbnails of the currently selected variant.

Here are the instructions for the assets:

1. Create a new page template using the name variant-thumbnails.liquid.
2. Create a new page named Product Variant Thumbnails.
3. Create a new layout file with the name alternate.liquid.
4. Create a new product with at least three color variants and upload at least three media assets to represent each variant. When creating a new product, we should set the product status to Active and not leave it to Draft. Otherwise, we will not be able to access it later.
5. Create...