Setting initial values for variables in Shopify Liquid

"RuffRuff 予約販売" supports the reduction of opportunity losses that occur when products are out of stock, new products are not on sale, or are on backorder.
It's incredibly easy to create pre-orders on your Shopify store, allowing you to register an unlimited number of pre-order products and accept unlimited pre-orders. You can also restrict people from ordering pre-order items and regular items at the same time, or send notifications when the item will be back in stock if it is not yet determined.
There are many unique features that are not found in other pre-order sales apps, such as the "Pay Later" feature that allows you to collect payment before the product is shipped.

This is Ogasawara from Tsun Inc.!
While developing Shopify apps, I often write Liquid when developing theme extensions.
This time, I will introduce how to set the initial value of variables when handling variables, which are essential when writing Liquid.

Target audience

• Those who have basic knowledge of Liquid

What are Shopify Liquid variables?

Shopify Liquid allows you to create variables using the assign tag.
Variables are used in the same way as in other programming languages.
For those with JavaScript experience, I think it will be easier to understand if you think of them as equivalent to var and let.

If you create a variable with the same name as a Liquid object, it will be overwritten, so be careful not to create a variable with the same name as a Liquid object.

For basic usage of assign, please refer to the official reference. https://shopify.dev/docs/api/liquid/tags/assign

Advantages of setting initial values for variables

There is basically no problem if you do not set an initial value when handling variables, but it is very advantageous when writing code to make it clear that some value has been set.
For example, if you want to handle nullable values in Liquid objects or JSON, you need to check that the values are not nil before comparing them. However, by setting an initial value, you no longer need to check that the values are not nil, and you can simplify your code.

How to set initial values for variables

Use the default filter.
It's simple to use: just use the filter together with the initial value for the variable you want to set an initial value for.
You can set initial values for empty, false, and nil values. https://shopify.dev/docs/api/liquid/filters/default

Set initial value of string

This is the basic usage of default filter.

{%- liquid
  assign your_message = your_json.message | default: 'default message'
-%}

Set initial value of numerical value

When setting the initial value of a numeric value, it is safe to force the conversion to a numeric type.
Liquid does not have a filter to convert to numeric type, but it is possible to convert to numeric type by adding 0. (Similar to multiplying by 1, etc.)

{%- liquid
  assign your_price = your_json.price | default: 1000 | plus: 0
-%}

Set the initial value of a boolean

Be careful with booleans.
The default filter has the behavior that the initial value is set when the variable is false, so if the initial value is set to true, it will always be true even if the variable value is false.
Therefore, if you want to set the initial value to true, set the allow_false option.
https://shopify.dev/docs/api/liquid/filters/default#default-allow_false

{%- liquid
  assign has_product = your_json.has_product | default: true, allow_false: true
-%}

Summary

This time, we introduced how to set initial values for variables in Shopify Liquid and its benefits.
It's a small topic, but I think I use it often when writing Liquid, so I'd be happy if it was useful.

Closing

Tsun Inc. uses Shopify to build stores and develop apps.
If you would like to build a store or develop an app, please contact Tsun Inc.