mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-12 23:40:45 -07:00
Merge pull request #1638 from Shopify/gh-pages-sr
Update documentation for open-source liquid objects (forloop + tablerowloop), Liquid variations, case/when, inline comments
This commit is contained in:
shainaraskas
@@ -3,7 +3,7 @@ title: Variations of Liquid
|
||||
description: An overview of the different installations of Liquid and how Liquid can change depending on where you're using it.
|
||||
---
|
||||
|
||||
Liquid is a flexible, safe language, and is used in many different environments. Liquid was created for use in [Shopify](https://www.shopify.com) stores, and is also used extensively on [Jekyll](https://jekyllrb.com) websites. Over time, both Shopify and Jekyll have added their own objects, tags, and filters to Liquid. The most popular versions of Liquid that exist are **Liquid**, **Shopify Liquid**, and **Jekyll Liquid**.
|
||||
Liquid is a flexible, safe language, and is used in many different environments. Liquid was created for use in [Shopify](https://www.shopify.com) stores, and is also used extensively on [Jekyll](https://jekyllrb.com) websites. Over time, both Shopify and Jekyll have added their own objects, tags, and filters to Liquid. The most popular versions of Liquid that exist are **Liquid**, **Shopify Liquid for themes**, and **Jekyll Liquid**.
|
||||
|
||||
This site documents the latest version of **Liquid** including betas and release candidates — that is, Liquid as it exists outside of Shopify and Jekyll. If you download the Liquid repository or install it as a [gem](https://rubygems.org/gems/liquid), you will get access to whatever objects, tags, and filters are in the version of Liquid that you chose.
|
||||
|
||||
@@ -11,7 +11,7 @@ This site documents the latest version of **Liquid** including betas and release
|
||||
|
||||
Shopify always uses the latest version of Liquid as a base, but Shopify adds a significant number of objects, tags, and filters to Liquid for use in merchants' stores. These include objects representing store, product, and customer information, and filters for displaying store data and manipulating storefront assets like product images.
|
||||
|
||||
Shopify's version of Liquid is documented in the [Shopify developer documentation](https://shopify.dev/docs/themes/liquid/reference). If you want to try out Shopify's version of Liquid, you can create a development store through the [Shopify Partner Dashboard](https://help.shopify.com/en/partners/dashboard/managing-stores/development-stores).
|
||||
Shopify has several versions of Liquid. The most popular version is used to build Shopify themes. To learn about the Liquid elements that you can use to build Shopify themes, and to learn about the other versions of Liquid at Shopify, refer to the [Shopify Liquid reference](https://shopify.dev/api/liquid).
|
||||
|
||||
## Jekyll
|
||||
|
||||
|
||||
@@ -79,6 +79,8 @@ Hey Anonymous!
|
||||
|
||||
Creates a switch statement to execute a particular block of code when a variable has a specified value. `case` initializes the switch statement, and `when` statements define the various conditions.
|
||||
|
||||
A `when` tag can accept multiple values. When multiple values are provided, the expression is returned when the variable matches any of the values inside of the tag. Provide the values as a comma-separated list, or separate them using an `or` operator.
|
||||
|
||||
An optional `else` statement at the end of the case provides code to execute if none of the conditions are met.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
|
||||
+88
-2
@@ -7,7 +7,7 @@ Iteration tags repeatedly run blocks of code.
|
||||
|
||||
## for
|
||||
|
||||
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops).
|
||||
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, refer to the [`forloop` object](#forloop-object).
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
@@ -192,6 +192,54 @@ Reverses the order of the loop. Note that this flag's spelling is different from
|
||||
6 5 4 3 2 1
|
||||
```
|
||||
|
||||
## forloop (object)
|
||||
|
||||
Information about a parent [`for` loop](#for).
|
||||
|
||||
```json
|
||||
{
|
||||
"first": true,
|
||||
"index": 1,
|
||||
"index0": 0,
|
||||
"last": false,
|
||||
"length": 4,
|
||||
"rindex": 3
|
||||
}
|
||||
```
|
||||
|
||||
### Use the `forloop` object
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{%- raw -%}
|
||||
{% assign smoothie_flavors = "orange, strawberry, banana" | split: ", " %}
|
||||
|
||||
{% for flavor in smoothie_flavors -%}
|
||||
{%- if forloop.length > 0 -%}
|
||||
{{ flavor }}{% unless forloop.last %}-{% endunless -%}
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
orange-strawberry-banana
|
||||
```
|
||||
|
||||
### forloop (properties)
|
||||
|
||||
| Property | Description | Returns |
|
||||
| --- | --- | --- |
|
||||
| `length` | The total number of iterations in the loop. | `number` |
|
||||
| `parentloop` | The parent `forloop` object. If the current `for` loop isn't nested inside another `for` loop, then `nil` is returned. | `forloop` |
|
||||
| `index` | The 1-based index of the current iteration. | `number` |
|
||||
| `index0` | The 0-based index of the current iteration. | `number` |
|
||||
| `rindex` | The 1-based index of the current iteration, in reverse order. | `number` |
|
||||
| `rindex0` | The 0-based index of the current iteration, in reverse order. | `number` |
|
||||
| `first` | Returns `true` if the current iteration is the first. Returns `false` if not. | `boolean` |
|
||||
| `last` | Returns `true` if the current iteration is the last. Returns `false` if not. | `boolean` |
|
||||
|
||||
## cycle
|
||||
|
||||
Loops through a group of strings and prints them in the order that they were passed as arguments. Each time `cycle` is called, the next string argument is printed.
|
||||
@@ -245,7 +293,7 @@ Uses for `cycle` include:
|
||||
|
||||
## tablerow
|
||||
|
||||
Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags. For a full list of attributes available within a `tablerow` loop, see [tablerow (object)](https://shopify.dev/docs/themes/liquid/reference/objects/tablerow).
|
||||
Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags. For a full list of attributes available within a `tablerow` loop, refer to the [`tablerowloop` object](#tablerowloop-object).
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
@@ -377,3 +425,41 @@ Defines a range of numbers to loop through. The range can be defined by both lit
|
||||
</table>
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
## tablerowloop (object)
|
||||
|
||||
Information about a parent [`tablerow` loop](#tablerow).
|
||||
|
||||
```json
|
||||
{
|
||||
"col": 1,
|
||||
"col0": 0,
|
||||
"col_first": true,
|
||||
"col_last": false,
|
||||
"first": true,
|
||||
"index": 1,
|
||||
"index0": 0,
|
||||
"last": false,
|
||||
"length": 5,
|
||||
"rindex": 5,
|
||||
"rindex0": 4,
|
||||
"row": 1
|
||||
}
|
||||
```
|
||||
|
||||
### tablerowloop (properties)
|
||||
|
||||
| Property | Description | Returns |
|
||||
| --- | --- | --- |
|
||||
| `col` | The 1-based index of the current column. | `number` |
|
||||
| `col0` | The 0-based index of the current column. | `number` |
|
||||
| `col_first` | Returns `true` if the current column is the first in the row. Returns `false` if not. | `boolean` |
|
||||
| `col_last` | Returns `true` if the current column is the last in the row. Returns `false` if not. | `boolean` |
|
||||
| `first` | Returns `true` if the current iteration is the first. Returns `false` if not. | `boolean` |
|
||||
| `index` | The 1-based index of the current iteration. | `number` |
|
||||
| `index0` | The 0-based index of the current iteration. | `number` |
|
||||
| `last` | Returns `true` if the current iteration is the last. Returns `false` if not. | `boolean` |
|
||||
| `length` | The total number of iterations in the loop. | `number` |
|
||||
| `rindex` | The 1-based index of the current iteration, in reverse order. | `number` |
|
||||
| `rindex0` | The 0-based index of the current iteration, in reverse order. | `number` |
|
||||
| `row` | The 1-based index of current row. | `number` |
|
||||
|
||||
+49
-1
@@ -34,6 +34,54 @@ Anything you put between {% comment %} and {% endcomment %} tags
|
||||
is {{ verb }} into a comment.
|
||||
```
|
||||
|
||||
## Inline comments {%- include version-badge.html version="5.4.0" %}
|
||||
|
||||
You can use inline comments to prevent an expression from being rendered or output. Any text inside of the tag also won't be rendered or output.
|
||||
|
||||
You can create multi-line inline comments. However, each line must begin with a `#`.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{%- raw -%}
|
||||
{% # for i in (1..3) -%}
|
||||
{{ i }}
|
||||
{% # endfor %}
|
||||
|
||||
{%
|
||||
###############################
|
||||
# This is a comment
|
||||
# across multiple lines
|
||||
###############################
|
||||
%}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
|
||||
|
||||
```
|
||||
|
||||
### Inline comments inside `liquid` tags
|
||||
|
||||
You can use the inline comment tag inside [`liquid` tags](#liquid). The tag must be used for each line that you want to comment.
|
||||
|
||||
<p class="code-label">Input</p>
|
||||
```liquid
|
||||
{%- raw -%}
|
||||
{% liquid
|
||||
# this is a comment
|
||||
assign topic = 'Learning about comments!'
|
||||
echo topic
|
||||
%}
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
<p class="code-label">Output</p>
|
||||
```text
|
||||
Learning about comments!
|
||||
```
|
||||
|
||||
## raw
|
||||
|
||||
Temporarily disables tag processing. This is useful for generating certain content that uses conflicting syntax, such as [Mustache](https://mustache.github.io/) or [Handlebars](https://handlebarsjs.com/).
|
||||
@@ -153,7 +201,7 @@ A template can be rendered once for each value of an enumerable object by using
|
||||
|
||||
In the example above, the template will be rendered once for each variant of the product, and the `variant` variable will hold a different product variant object for each iteration.
|
||||
|
||||
When using the `for` parameter, the [`forloop`](https://shopify.dev/docs/themes/liquid/reference/objects/for-loops) object is accessible within the rendered template.
|
||||
When using the `for` parameter, the [`forloop`]({{ "/tags/iteration/#forloop-object" | prepend: site.baseurl }}) object is accessible within the rendered template.
|
||||
|
||||
## include
|
||||
|
||||
|
||||
Reference in New Issue
Block a user