Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-16 17:30:43 -07:00
Code Issues Packages Projects Releases Wiki Activity

Moving to single collection

Browse Source
This commit is contained in:
Adam Hollett
2015-12-04 18:56:07 -05:00
parent f0c7a601c3
commit 8e3dcf49ba
54 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_docs/basics/handles.md
+50
View File
@@ -0,0 +1,50 @@
---
title: Handles
---
A handle is used to access the attributes of a Liquid object. By default, the handle is the object's title in lowercase with any spaces and special characters replaced by hyphens (-).
For example, a page with the title "About Us" can be accessed in Liquid via its handle `about-us` as shown below:
{% highlight liquid %}
{% raw %}
<!-- the content of the About Us page -->
{{ pages.about-us.content }}
{% endraw %}
{% endhighlight %}
### Creating handles
An object with the title "Shirt" will automatically be given the handle `shirt`. If there is already an object with the handle `shirt`, the handle will auto-increment. In other words, "Shirt" objects created after the first one will receive the handle `shirt-1`, `shirt-2`, and so on.
Whitespace in titles is replaced by hyphens in handles. For example, the title "My Shiny New Title" will be given the handle `my-shiny-new-title`.
Handles also determine the URL of their corresponding objects. For example, a page with the handle `about-us` would have the url `/pages/about-us`.
Websites often rely on static handles for pages, posts, or objects. To preserve design elements and avoid broken links, if you modify the title of an object, **its handle is not automatically updated**. For example, if you were to change a page title from "About Us" to "About This Website", its handle would still be `about-us`.
You can change an object's handle manually (TK how to change a handle manually)
### Accessing handle attributes
In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
<p class="input">Input</p>
<div>
{% highlight liquid %}
{% raw %}
{{ pages.about-us.title }}
{{ pages["about-us"].title }}
{% endraw %}
{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight text %}
About Us
About Us
{% endhighlight %}
</div>
In the example above, notice that we are using `pages` as opposed to `page`.
_docs/basics/operators.md
+84
View File
@@ -0,0 +1,84 @@
---
title: Operators
---
Liquid includes many logical and comparison operators.
### Basic Operators
<table>
<tbody>
<tr>
<td><pre>==</pre></td>
<td>equals</td>
</tr>
<tr>
<td><pre>!=</pre></td>
<td>does not equal</td>
</tr>
<tr>
<td><pre>&gt;</pre></td>
<td>greater than</td>
</tr>
<tr>
<td><pre>&lt;</pre></td>
<td>less than</td>
</tr>
<tr>
<td><pre>&gt;=</pre></td>
<td>greater than or equal to</td>
</tr>
<tr>
<td><pre>&lt;=</pre></td>
<td>less than or equal to</td>
</tr>
<tr>
<td><pre>or</pre></td>
<td>logical or</td>
</tr>
<tr>
<td><pre>and</pre></td>
<td>logical and</td>
</tr>
</tbody>
</table>
For example:
<div>
{% highlight liquid %}{% raw %}
{% if product.title == "Awesome Shoes" %}
These shoes are awesome!
{% endif %}
{% endraw %}{% endhighlight %}
</div>
You can use multiple operators in a tag:
<div>
{% highlight liquid %}{% raw %}
{% if product.type == "Shirt" or product.type == "Shoes" %}
This is a shirt or a pair of shoes.
{% endif %}
{% endraw %}{% endhighlight %}
</div>
### contains
`contains` checks for the presence of a substring inside a string.
{% highlight liquid %}{% raw %}
{% if product.title contains 'Pack' %}
This product's title contains the word Pack.
{% endif %}
{% endraw %}{% endhighlight %}
`contains` can also check for the presence of a string in an array of strings.
{% highlight liquid %}{% raw %}
{% if product.tags contains 'Hello' %}
This product has been tagged with 'Hello'.
{% endif %}
{% endraw %}{% endhighlight %}
`contains` is can only search strings. You cannot use it to check for an object in an array of objects.
_docs/basics/truthy-and-falsy.md
+70
View File
@@ -0,0 +1,70 @@
---
title: Truthy and Falsy
---
In programming, anything that returns `true` in a conditional is called **truthy**. Anything that returns `false` in a conditional is called **falsy**. All object types can be described as either truthy or falsy.
## Truthy
All values in Liquid are truthy except `nil` and `false`.
In the example below, the text "Tobi" is not a boolean, but it is truthy in a conditional:
{% highlight liquid %}{% raw %}
{% assign tobi = 'Tobi' %}
{% if tobi == true %}
This condition will always be true.
{% endif %}
{% endraw %}{% endhighlight %}
[Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
{% if settings.fp_heading %}
<h1>{{ settings.fp_heading }}</h1>
{% endif %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight html %}{% raw %}
<h1></h1>
{% endraw %}{% endhighlight %}
[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty `<div>`:
<p class="input">Input</p>
{% highlight html %}{% raw %}
{% if pages[settings.page] %}
<div>{{ pages[settings.page].content }}</div>
{% endif %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight html %}{% raw %}
<div></div>
{% endraw %}{% endhighlight %}
## Falsy
The falsy values in Liquid are [nil](/basics/types/#nil) and [false](/basics/types/#boolean).
## Summary
The table below summarizes what is truthy or falsy in Liquid.
| | truthy | falsy |
| ------------- |:-------------:|:-------------:|
| true | • | |
| false | | • |
| nil | | • |
| string | • | |
| empty string | • | |
| 0 | • | |
| integer | • | |
| float | • | |
| array | • | |
| empty array | • | |
| page | • | |
| EmptyDrop | • | |
_docs/basics/types.md
+157
View File
@@ -0,0 +1,157 @@
---
title: Types
---
Liquid objects can have one of six types:
- [string](#string)
- [number](#number)
- [boolean](#boolean)
- [nil](#nil)
- [array](#array)
- [EmptyDrop](#emptydrop)
Liquid variables can be initialized by using the [assign](/tags/#assign) or [capture](/tags/#capture) tags.
## String
Strings are declared by wrapping a variable's value in single or double quotes.
{% highlight liquid %}
{% raw %}
{% assign my_string = "Hello World!" %}
{% endraw %}
{% endhighlight %}
## Number
Numbers include floats and integers.
{% highlight liquid %}
{% raw %}
{% assign my_int = 25 %}
{% assign my_float = 39.756 %}
{% endraw %}
{% endhighlight %}
## Boolean
Booleans are either `true` or `false`. No quotations are necessary when declaring a boolean.
{% highlight liquid %}
{% raw %}
{% assign foo = true %}
{% assign bar = false %}
{% endraw %}
{% endhighlight %}
## Nil
Nil is a special empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".
Nil is treated as false in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.
In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:
{% highlight liquid %}
{% raw %}
{% if user %}
Hello {{ user.name }}!
{% endif %}
{% endraw %}
{% endhighlight %}
Tags or outputs that return `nil` will not print anything to the page.
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
The current user is {{ user.name }}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight text %}{% raw %}
The current user is
{% endraw %}{% endhighlight %}
## Array
Arrays hold lists of variables of any type.
#### Accessing items in arrays
To access all of the items in an array, you can loop through each item in the array using a [for](/tags/#for) or [tablerow](/tags/#tablerow) tag.
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{% for user in site.users %}
{{ user }}
{% endfor %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight text %}{% raw %}
Tobi Lina Tetsuro Adam
{% endraw %}{% endhighlight %}
#### Accessing specific items in arrays
You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero.
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight text %}{% raw %}
Tobi
Lina
Adam
{% endraw %}{% endhighlight %}
#### Initializing arrays
You cannot initialize arrays using pure Liquid.
You can, however, use the [split](/filters/#split) filter to break a single string into an array of substrings.
## EmptyDrop
An EmptyDrop object is returned if you try to access a deleted object (such as a page or post) by its [handle](/basics/#Handles). In the example below, `page_1`, `page_2` and `page_3` are all EmptyDrop objects.
{% highlight liquid %}{% raw %}
{% assign variable = "hello" %}
{% assign page_1 = pages[variable] %}
{% assign page_2 = pages["does-not-exist"] %}
{% assign page_3 = pages.this-handle-does-not-exist %}
{% endraw %}{% endhighlight %}
EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is “falsy”, which means that calling it inside an if statement will return *false*. When using an unless statement on existing collections and pages, `empty?` will return `true`.
#### Checking for emptiness
Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.
{% highlight liquid %}{% raw %}
{% unless pages.about.empty? %}
<!-- This content will only print if the page with handle 'about' is not empty -->
<h1>{{ pages.frontpage.title }}</h1>
<div>{{ pages.frontpage.content }}</div>
{% endunless %}
{% endraw %}{% endhighlight %}
If you don't check for emptiness first, Liquid may print empty HTML elements to the page:
{% highlight html %}{% raw %}
<h1></h1>
<div></div>
{% endraw %}{% endhighlight %}
_docs/filters/append.md
+22
View File
@@ -0,0 +1,22 @@
---
title: append
---
`append` concatenates two strings and returns the concatenated value.
{% highlight liquid %}
{% raw %}
{{ "/my/fancy/url" | append:".html" }}
{% endraw %}
# => "/my/fancy/url.html"
{% endhighlight %}
It can also be used with variables:
{% highlight liquid %}
{% raw %}
{% assign filename = "/index.html" %}
{{ product.url | append: filename }}
{% endraw %}
# => "#{product.url}/index.html"
{% endhighlight %}
_docs/filters/capitalize.md
+12
View File
@@ -0,0 +1,12 @@
---
title: capitalize
---
`capitalize` makes the first character of your string capitalized.
| Input | Output |
|:-----------------------------------------------------------|:-----------------|
| {% raw %}`{{ "title" | capitalize }}` {% endraw %} | "Title" |
| {% raw %}`{{ "my great title" | capitalize }}`{% endraw %} | "My great title" |
It only capitalizes the first character, so subsequent words will not be capitalized as well.
_docs/filters/ceil.md
+15
View File
@@ -0,0 +1,15 @@
---
title: ceil
layout: default
---
`ceil` rounds the input up to the nearest whole number.
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ 1.2 | ceil }}` {% endraw %} | 2 |
| {% raw %}`{{ 1.7 | ceil }}` {% endraw %} | 2 |
| {% raw %}`{{ 2.0 | ceil }}` {% endraw %} | 2 |
| {% raw %}`{{ "18.3" | ceil }}`{% endraw %} | 19 |
It will attempt to cast any input to a number.
_docs/filters/date.md
+12
View File
@@ -0,0 +1,12 @@
---
title: date
---
`date` converts a timestamp into another date format.
| Input | Output |
|:--------------------------------------------------------------------------|:---------------------|
| {% raw %}`{{ article.published_at | date: "%a, %b %d, %y" }}`{% endraw %} | Tue, Apr 22, 14 |
| {% raw %}`{{ article.published_at | date: "%Y" }}`{% endraw %} | 2014 |
The format for this syntax is the same as [`strftime`](http://strftime.net/).
_docs/filters/default.md
+22
View File
@@ -0,0 +1,22 @@
---
title: default
---
`default` offers a means of having a fallback in case your value doesn't exist.
{% highlight liquid %}
{% raw %}
{{ product_price | default: 2.99 }}
// => outputs "2.99"
{% assign product_price = 4.99 %}
{{ product_price | default:2.99 }}
// => outputs "4.99"
{% assign product_price = "" %}
{{ product_price | default: 2.99 }}
// => outputs "2.99"
{% endraw %}
{% endhighlight %}
`default` will use its substitute if the left side is `nil`, `false`, or empty.
_docs/filters/divided_by.md
+12
View File
@@ -0,0 +1,12 @@
---
title: divided_by
---
This filter divides its input by its argument.
| Code | Output |
|:--------------------------------------------------|:-------|
| {% raw %}`{{ 4 | divided_by: 2 }}` {% endraw %} | 2 |
| {% raw %}`{{ "16" | divided_by: 4 }}`{% endraw %} | 4 |
It uses `to_number`, which converts to a decimal value unless already a numeric.
_docs/filters/downcase.md
+11
View File
@@ -0,0 +1,11 @@
---
title: downcase
---
`downcase` makes each character in a string lowercase.
| Code | Output |
|:-------------------------------------------------------|:-----------------|
| {% raw %}`{{ "Peter Parker" | downcase }}`{% endraw %} | `"peter parker"` |
It doesn't modify strings which are already entirely lowercase.
_docs/filters/escape.md
+12
View File
@@ -0,0 +1,12 @@
---
title: escape
---
Escapes a string by replacing characters with escape sequences (so that the string can be used in a URI).
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ "Need tips? Ask a friend!" | escape }}`{% endraw %} | `"Need%20tips%3F%Ask%20a%20friend%21"` |
| {% raw %}`{{ "Nope" | escape }}`{% endraw %} | `"Nope"` |
It doesn't modify strings that have nothing to escape.
_docs/filters/escape_once.md
+13
View File
@@ -0,0 +1,13 @@
---
title: escape_once
---
Escapes a string without affecting existing escaped entities.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ "1 < 2 & 3" | escape_once }}`{% endraw %} | `"1 < 2 & 3"` |
| {% raw %}`{{ "<< Accept & Checkout" | escape_once }}`{% endraw %} | `"<< Accept & Checkout"` |
| {% raw %}`{{ "Nope" | escape_once }}`{% endraw %} | `"Nope"` |
It doesn't modify strings that have nothing to escape.
_docs/filters/first.md
+10
View File
@@ -0,0 +1,10 @@
---
title: first
---
Returns the first element of an array. For example, if you have an array called `product.tags` that resolves to: `["sale", "mens", "womens", "awesome"]`:
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ product.tags | first }}`{% endraw %} | `"sale"` |
_docs/filters/floor.md
+14
View File
@@ -0,0 +1,14 @@
---
title: floor
---
`floor` rounds the input down to the nearest whole number.
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ 1.2 | floor }}` {% endraw %} | 1 |
| {% raw %}`{{ 1.7 | floor }}` {% endraw %} | 1 |
| {% raw %}`{{ 2.0 | floor }}` {% endraw %} | 2 |
| {% raw %}`{{ "18.3" | floor }}`{% endraw %} | 18 |
It will attempt to cast any input to a number.
_docs/filters/join.md
+11
View File
@@ -0,0 +1,11 @@
---
title: join
---
`join` joins the elements of an array, using the character you provide.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ product.tags | join: ', ' }}`{% endraw %} | `"sale, mens, womens, awesome` |
In the sample above, assume that `product.tags` resolves to: `["sale", "mens", "womens", "awesome"]`.
_docs/filters/last.md
+11
View File
@@ -0,0 +1,11 @@
---
title: last
---
Return the last element of an array.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ product.tags | last }}`{% endraw %} | `"awesome"` |
In the sample above, assume that `product.tags` resolves to: `["sale", "mens", "womens", "awesome"]`.
_docs/filters/lstrip.md
+9
View File
@@ -0,0 +1,9 @@
---
title: lstrip
---
Strips all whitespace (tabs, spaces, and newlines) from the left side of a string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ ' too many spaces ' | lstrip }}`{% endraw %} | `"too many spaces "` |
_docs/filters/map.md
+11
View File
@@ -0,0 +1,11 @@
---
title: map
---
Collects an array of properties from a hash.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ product | map: 'tag' }}`{% endraw %} | `["sale", "mens", "womens", "awesome"]` |
In the sample above, assume that `product` resolves to: `[{ tags: "sale"}, { tags: "mens"}, { tags: "womens"}, { tags: "awesome"}]`.
_docs/filters/minus.md
+9
View File
@@ -0,0 +1,9 @@
---
title: minus
---
Subtracts two numbers.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 100 | minus: 10 }}`{% endraw %} | `90` |
_docs/filters/modulo.md
+9
View File
@@ -0,0 +1,9 @@
---
title: modulo
---
Performs a modulo operation, i.e. returns the remainder.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 3 | modulo: 2 }}`{% endraw %} | `1` |
_docs/filters/newline_to_br.md
+9
View File
@@ -0,0 +1,9 @@
---
title: newline_to_br
---
Replace every newline (`n`) with an HTML break (`<br>`).
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ "hello\nthere" | newline_to_br }}`{% endraw %} | `hello<br/>there` |
_docs/filters/plus.md
+9
View File
@@ -0,0 +1,9 @@
---
title: plus
---
Adds two numbers.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 100 | plus: 10 }}`{% endraw %} | `110` |
_docs/filters/prepend.md
+9
View File
@@ -0,0 +1,9 @@
---
title: prepend
---
Prepends a string onto another.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'world' | prepend: 'hello ' }}`{% endraw %} | `hello world` |
_docs/filters/remove.md
+9
View File
@@ -0,0 +1,9 @@
---
title: remove
---
Removes every occurrence of a given string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'hello, hello world' | remove: 'hello' }}`{% endraw %} | `, world` |
_docs/filters/remove_first.md
+9
View File
@@ -0,0 +1,9 @@
---
title: remove_first
---
Removes the first occurrence of a given string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'hello, hello world' | remove_first: 'hello' }}`{% endraw %} | `, hello world` |
_docs/filters/replace.md
+9
View File
@@ -0,0 +1,9 @@
---
title: replace
---
Replaces every occurrence of a given string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'hello, hello world' | replace: 'hello', 'goodbye' }}`{% endraw %} | `goodbye, goodbye world` |
_docs/filters/replace_first.md
+9
View File
@@ -0,0 +1,9 @@
---
title: replace_first
---
Replaces the first occurrence of a given string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'hello, hello world' | replace_first: 'hello', 'goodbye' }}`{% endraw %} | `goodbye, hello world` |
_docs/filters/reverse.md
+15
View File
@@ -0,0 +1,15 @@
---
title: reverse
---
Reverses the order of an array.
{% highlight liquid %}
{% raw %}
{{ product.tags }}
// ['cool', 'sale', 'purple', 'awesome']
{{ product.tags | reverse }}
// ['awesome', 'purple', 'sale', 'cool']
{% endraw %}
{% endhighlight %}
_docs/filters/round.md
+12
View File
@@ -0,0 +1,12 @@
---
title: round
---
Rounds the output to the nearest integer or specified number of decimals.
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ 4.6 | round }}` {% endraw %} | 5 |
| {% raw %}`{{ 4.3 | round }}` {% endraw %} | 4 |
| {% raw %}`{{ 4.5612 | round: 2 }}` {% endraw %} | 4.56 |
_docs/filters/rstrip.md
+9
View File
@@ -0,0 +1,9 @@
---
title: rstrip
---
Strips all whitespace (tabs, spaces, and newlines) from the right side of a string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ ' too many spaces ' | rstrip }}`{% endraw %} | `"too many spaces "` |
_docs/filters/size.md
+21
View File
@@ -0,0 +1,21 @@
---
title: size
---
<p>Returns the size of a string or an array.</p>
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 'is this a 30 character string?' | size }}`{% endraw %} | `30` |
`size` can be used in dot notation, in cases where it needs to be used inside a tag.
<div>
{% highlight html %}{% raw %}
{% if collections.frontpage.products.size > 10 %}
There are more than 10 products in this collection!
{% endif %}
{% endraw %}{% endhighlight %}
</div>
_docs/filters/slice.md
+20
View File
@@ -0,0 +1,20 @@
---
title: slice
---
The <code>slice</code> filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned.
| Input | Output |
|:------------------------------------------------|:-------|
| {% raw %}`{{ "hello" | slice: 0 }}`{% endraw %} | h |
| {% raw %}`{{ "hello" | slice: 1 }}`{% endraw %} | e |
| {% raw %}`{{ "hello" | slice: 1, 3 }}`{% endraw %} | ell |
If the passed index is negative, it is counted from the end of the string.
| Input | Output |
|:------------------------------------------------|:-------|
| {% raw %}`{{ "hello" | slice: -3, 2 }}`{% endraw %} | ll |
_docs/filters/sort.md
+23
View File
@@ -0,0 +1,23 @@
---
title: sort
---
Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
{{ product.title }}
{% endfor %}{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
A B a b
{% endraw %}{% endhighlight %}
</div>
_docs/filters/split.md
+23
View File
@@ -0,0 +1,23 @@
---
title: split
---
The `split` filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using [array filters](/themes/liquid-documentation/filters/array-filters).
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
{% assign words = "Hi, how are you today?" | split: ' ' %}
{% for word in words %}
{{ word }}
{% endfor %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
{% highlight text %}
Hi,
how
are
you
today?
{% endhighlight %}
_docs/filters/strip.md
+9
View File
@@ -0,0 +1,9 @@
---
title: strip
---
Strips all whitespace (tabs, spaces, and newlines) from a string.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ ' too many spaces ' | strip }}`{% endraw %} | `"too many spaces"` |
_docs/filters/strip_html.md
+11
View File
@@ -0,0 +1,11 @@
---
title: strip_html
---
<p>Strips all HTML tags from a string.</p>
<p class="input">Input</p>
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ "<h1>Hello</h1> World" | strip_html }}`{% endraw %} | `Hello World` |
_docs/filters/strip_newlines.md
+5
View File
@@ -0,0 +1,5 @@
---
title: strip_newlines
---
Removes any line breaks/newlines from a string.
_docs/filters/times.md
+9
View File
@@ -0,0 +1,9 @@
---
title: times
---
Multiplies two numbers.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ 200 | times: 2 }}`{% endraw %} | `400` |
_docs/filters/truncate.md
+10
View File
@@ -0,0 +1,10 @@
---
title: truncate
---
<p>Truncates a string down to 'x' characters, where x is the number passed as a parameter. An ellipsis (...) is appended to the string and is included in the character count.</p>
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ "The cat came back the very next day" | truncate: 10 }}`{% endraw %} | "The cat..." |
_docs/filters/truncatewords.md
+10
View File
@@ -0,0 +1,10 @@
---
title: truncatewords
---
<p>Truncates a string down to 'x' words, where x is the number passed as a parameter. An ellipsis (...) is appended to the truncated string.</p>
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ "The cat came back the very next day" | truncatewords: 4 }}`{% endraw %} | The cat came back...|
_docs/filters/uniq.md
+19
View File
@@ -0,0 +1,19 @@
---
title: uniq
---
<p>Removes any duplicate instances of an element in an array.</p>
<p class="input">Input</p>
<div>{% highlight html %}{% raw %}
{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}
{% endraw %}{% endhighlight %}</div>
<p class="output">Output</p>
<div>{% highlight html%}{% raw %}
orange apple banana
{% endraw %}{% endhighlight %}</div>
_docs/filters/upcase.md
+11
View File
@@ -0,0 +1,11 @@
---
title: upcase
---
<p>Converts a string into uppercase.</p>
| Input | Output |
|:-------------------------------------------|:-------|
| {% raw %}`{{ 'loud noises' | upcase }}`{% endraw %} | LOUD NOISES |
_docs/filters/url_encode.md
+9
View File
@@ -0,0 +1,9 @@
---
title: url_encode
---
Converts any URL-unsafe characters in a string into percent-encoded characters.
| Code | Output |
|:-------------------------------------------------------|:-------------------|
| {% raw %}`{{ '[email protected]' | url_encode }}`{% endraw %} | `john%40liquid.com` |
_docs/tags/control-flow/case-when
+27
View File
@@ -0,0 +1,27 @@
## case/when
<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% assign handle = 'cake' %}
{% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
This is a cake
{% endraw %}{% endhighlight %}
</div>
_docs/tags/control-flow/elsif-else.md
+26
View File
@@ -0,0 +1,26 @@
## elsif / else
<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<!-- If customer.name = 'anonymous' -->
{% if customer.name == 'kevin' %}
Hey Kevin!
{% elsif customer.name == 'anonymous' %}
Hey Anonymous!
{% else %}
Hi Stranger!
{% endif %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
Hey Anonymous!
{% endraw %}{% endhighlight %}
</div>
_docs/tags/control-flow/if.md
+21
View File
@@ -0,0 +1,21 @@
## if
<p>Executes a block of code only if a certain condition is met.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% if product.title == 'Awesome Shoes' %}
These shoes are awesome!
{% endif %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
These shoes are awesome!
{% endraw %}{% endhighlight %}
</div>
_docs/tags/control-flow/index.html
+15
View File
@@ -0,0 +1,15 @@
---
layout: default
---
CONTROL FLOW HERE
sss
{% for doc in site.collections["tags"].docs %}
<div id="{{ doc.title }}" class="content__item">
<h2 class="content__header">{{ doc.title }}</h2>
<div class="content">
{{ doc.content }}
</div>
</div>
{% endfor %}
_docs/tags/control-flow/unless.md
+31
View File
@@ -0,0 +1,31 @@
## unless
<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% unless product.title == 'Awesome Shoes' %}
These shoes are not awesome.
{% endunless %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
These shoes are not awesome.
{% endraw %}{% endhighlight %}
</div>
This would be the equivalent of doing the following:
<div>
{% highlight html %}{% raw %}
{% if product.title != 'Awesome Shoes' %}
These shoes are not awesome.
{% endif %}
{% endraw %}{% endhighlight %}
</div>
_docs/tags/iteration.md
+487
View File
@@ -0,0 +1,487 @@
---
title: Iteration
---
Iteration Tags are used to run a block of code repeatedly.
<a id="topofpage"></a>
### for
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](/themes/liquid-documentation/objects/for-loops).
`for` loops can output a maximum of 50 results per page. In cases where there are more than 50 results, use the [paginate](/themes/liquid-documentation/tags/theme-tags/#paginate) tag to split them across multiple pages.
<p class="input">Input</p>
<div>
{% highlight liquid %}{% raw %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight text %}
hat shirt pants
{% endhighlight %}
</div>
### break
Causes the loop to stop iterating when it encounters the `break` tag.
<p class="input">Input</p>
<div>
{% highlight liquid %}{% raw %}
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight text %}
1 2 3
{% endhighlight %}
</div>
### continue
Causes the loop to skip the current iteration when it encounters the `continue` tag.
<p class="input">Input</p>
<div>
{% highlight liquid %}{% raw %}
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight text %}
1 2 3 5
{% endhighlight %}
</div>
<div class="sub-sub-section">
<h2 class="parameter">parameters <span>for</span></h2>
<h4>limit</h4>
Exits the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
{{ item }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
1 2
{% endraw %}{% endhighlight %}
</div>
<h4>offset</h4>
Starts the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
{{ item }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
3 4 5 6
{% endraw %}{% endhighlight %}
</div>
<h4>range</h4>
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
<br/><br/>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% assign num = 4 %}
{% for i in (1..num) %}
{{ i }}
{% endfor %}
{% for i in (3..5) %}
{{ i }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
1 2 3 4
3 4 5
{% endraw %}{% endhighlight %}
</div>
<h4>reversed
</h4>
Reverses the order of the for loop.
<br/><br/>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
{{ item }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
6 5 4 3 2 1
{% endraw %}{% endhighlight %}
</div>
</div>
### cycle
Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time <code>cycle</code> is called, the next string that was passed as a parameter is output.
<code>cycle</code> must be used within a <a href="#for">for</a> loop block.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
one
two
three
one
{% endraw %}{% endhighlight %}
</div>
Uses for <code>cycle</code> include:
- applying odd/even classes to rows in a table
- applying a unique class to the last product thumbnail in a row
<div class="sub-sub-section">
<h2 class="parameter">parameters <span>cycle</span></h2>
<code>cycle</code> accepts a parameter called <strong>cycle group</strong> in cases where you need multiple <code>cycle</code> blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
<p>The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.</p>
<div>
{% highlight html %}{% raw %}
<ul>
{% for product in collections.collection-1.products %}
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
<li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
{% endraw %}{% endhighlight %}
</div>
<p>In the code above, if the first collection only has two products, the second collection loop will continue the <code>cycle</code> where the first one left off. This will result in this undesired output:</p>
<div>
{% highlight html %}{% raw %}
<ul>
<li style="clear:both"></li>
</ul>
<ul>
<li></li>
<li class="last"></li>
<li style="clear:both"></li>
<li></li>
</ul>
{% endraw %}{% endhighlight %}
</div>
<p>To avoid this, cycle groups are used for each <code>cycle</code> block, as shown below.</p>
<div>
{% highlight html %}{% raw %}
<ul>
{% for product in collections.collection-1.products %}
<li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
<li{% cycle 'group2': ' style="clear:both;"', '', '', ' class="last"' %}>
<a href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
</a>
</li>
{% endfor %}
</ul>
{% endraw %}{% endhighlight %}
</div>
<p>With the code above, the two <code>cycle</code> blocks are independent of each other. The result is shown below:</p>
<div>
{% highlight html %}{% raw %}
<ul>
<li style="clear:both"></li>
<li></li>
</ul>
<!-- new cycle group starts! -->
<ul>
<li style="clear:both"></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
{% endraw %}{% endhighlight %}
</div>
</div>
### tablerow
<p>Generates an HTML <code>&#60;table&#62;</code>. Must be wrapped in an opening &lt;table&gt; and closing &lt;/table&gt; HTML tags. For a full list of attributes available within a tablerow loop, see <a href="/themes/liquid-documentation/objects/tablerow">tablerow (object)</a>.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<table>
<tr class="row1">
<td class="col1">
Cool Shirt
</td>
<td class="col2">
Alien Poster
</td>
<td class="col3">
Batman Poster
</td>
<td class="col4">
Bullseye Shirt
</td>
<td class="col5">
Another Classic Vinyl
</td>
<td class="col6">
Awesome Jeans
</td>
</tr>
</table>
{% endraw %}{% endhighlight %}
</div>
<div class="sub-sub-section">
<h2 class="parameter">parameters <span>tablerow</span></h2>
<h4>cols</h4>
Defines how many columns the tables should have.
<br/><br/>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<table>
<tr class="row1">
<td class="col1">
Cool Shirt
</td>
<td class="col2">
Alien Poster
</td>
</tr>
<tr class="row2">
<td class="col1">
Batman Poster
</td>
<td class="col2">
Bullseye Shirt
</td>
</tr>
<tr class="row3">
<td class="col1">
Another Classic Vinyl
</td>
<td class="col2">
Awesome Jeans
</td>
</tr>
</table>
{% endraw %}{% endhighlight %}
</div>
<h4>limit</h4>
Exits the tablerow after a specific index.
<br/><br/>
<div>
{% highlight html %}{% raw %}
{% tablerow product in collection.products cols:2 limit:3 %}
{{ product.title }}
{% endtablerow %}
{% endraw %}{% endhighlight %}
</div>
<h4>offset</h4>
Starts the tablerow after a specific index.
<br/><br/>
<div>
{% highlight html %}{% raw %}
{% tablerow product in collection.products cols:2 offset:3 %}
{{ product.title }}
{% endtablerow %}
{% endraw %}{% endhighlight %}
</div>
<h4>range</h4>
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
<br/><br/>
<div>
{% highlight html %}{% raw %}
<!--variable number example-->
{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
{{ i }}
{% endtablerow %}
</table>
<!--literal number example-->
<table>
{% tablerow i in (3..5) %}
{{ i }}
{% endtablerow %}
</table>
{% endraw %}{% endhighlight %}
</div>
</div>
_docs/tags/theme.md
+443
View File
@@ -0,0 +1,443 @@
---
title: Theme
---
Theme Tags have various functions, including:
- Outputting template-specific HTML markup
- Telling the theme which layout and snippets to use
- Splitting a returned array into multiple pages.
<a id="topofpage"></a>
### comment
<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
My name is {% comment %}super{% endcomment %} Shopify.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
My name is Shopify.
{% endraw %}{% endhighlight %}
</div>
### include
Inserts a snippet from the **snippets** folder of a theme.
{% highlight html %}{% raw %}
{% include 'snippet-name' %}
{% endraw %}{% endhighlight %}
Note that the <tt>.liquid</tt> extension is omitted in the above code.
When a snippet is included, the code inside it will have access to the variables within its parent template.
<h3 id="multi-variable-snippet">Including multiple variables in a snippet</h3>
There are two ways to include multiple variables in a snippet. You can assign and include them on different lines:
{% highlight html %}{% raw %}
{% assign snippet_variable = 'this is it' %}
{% assign snippet_variable_two = 'this is also it' %}
{% include 'snippet' %}
{% endraw %}{% endhighlight %}
Or you can consolidate them into one line of code:
{% highlight html %}{% raw %}
{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
{% endraw %}{% endhighlight %}
<h2 class="parameter">parameters <span>include</span></h2>
#### with
The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
For example, we can have a snippet named **color.liquid** which contains the following:
{% highlight html %}{% raw %}
color: '{{ color }}'
shape: '{{ shape }}'
{% endraw %}{% endhighlight %}
Within **theme.liquid**, we can include the **color.liquid** snippet as follows:
{% highlight html %}{% raw %}
{% assign shape = 'circle' %}
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}
{% assign shape = 'square' %}
{% include 'color' with 'red' %}
{% endraw %}{% endhighlight %}
The output will be:
{% highlight html %}{% raw %}
color: shape: 'circle'
color: 'red' shape: 'circle'
color: 'blue' shape: 'circle'
color: 'red' shape: 'square'
{% endraw %}{% endhighlight %}
### form
Creates an HTML <code>&#60;form&#62;</code> element with all the necessary attributes (action, id, etc.) and <code>&#60;input&#62;</code> to submit the form successfully.
<h2 class="parameter">parameters <span>form</span></h2>
#### activate_customer_password
Generates a form for activating a customer account on the <a href="/themes/theme-development/templates/customers-activate-account/">activate_account.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'activate_customer_password' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/activate" method="post">
<input name="form_type" type="hidden" value="activate_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### new_comment
Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form "new_comment", article %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
<input name="form_type" type="hidden" value="new_comment" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### contact
Generates a form for submitting an email through the <a href="/manual/configuration/store-customization/communicating-with-customers/provide-contact-points/add-a-contact-form">Liquid contact form</a>.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'contact' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
<input name="form_type" type="hidden" value="contact" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### create_customer
Generates a form for creating a new customer account on the <a href="/themes/theme-development/templates/customers-register/">register.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'create_customer' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account" id="create_customer" method="post">
<input name="form_type" type="hidden" value="create_customer" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### customer_address
Generates a form for creating or editing customer account addresses on the <a href="/themes/theme-development/templates/customers-addresses/">addresses.liquid</a> template. When creating a new address, include the parameter <code>customer.new_address</code>. When editing an existing address, include the parameter <code>address</code>.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'customer_address', customer.new_address %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/account/addresses/70359392" id="address_form_70359392" method="post">
<input name="form_type" type="hidden" value="customer_address" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### customer_login
Generates a form for logging into Customer Accounts on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'customer_login' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">
<input name="form_type" type="hidden" value="customer_login" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### recover_customer_password
Generates a form for recovering a lost password on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'recover_customer_password' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/account/recover" method="post">
<input name="form_type" type="hidden" value="recover_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
### layout
Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default.
{% highlight html %}{% raw %}
<!-- loads the templates/alternate.liquid template -->
{% layout 'alternate' %}
{% endraw %}{% endhighlight %}
If you don't want **any** layout to be used on a specific template, you can use <code>none</code>.
{% highlight html %}{% raw %}
{% layout none %}
{% endraw %}{% endhighlight %}
### paginate
Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop.
The <code>paginate</code> tag works in conjunction with the <code> for </code> tag to split content into numerous pages. It must wrap a <code>for</code> tag block that loops through an array, as shown in the example below:
{% highlight html %}{% raw %}
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% endpaginate %}
{% endraw %}{% endhighlight %}
The <code>by</code> parameter is followed by an integer <strong>between 1 and 50</strong> that tells the <code>paginate</code> tag how many results it should output per page.
Within <code>paginate</code> tags, you can access attributes of the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> object. This includes the attributes to output the links required to navigate within the generated pages.
{% comment %}
Accessing any attributes of the array you are paginating <em>before</em> the opening <code>paginate</code> tag will cause errors. To avoid this, make sure any variables
**Bad Example**
<div>
{% highlight html %}{% raw %}
{{ collection.title }}
{% paginate collection.products by 5 %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endpaginate %}
{% endraw %}{% endhighlight %}
</div>
**Good Example**
<div>
{% highlight html %}{% raw %}
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--show product details here -->
{% endfor %}
{% endpaginate %}
{% endraw %}{% endhighlight %}
</div>
{% endcomment %}
### raw
<p>Allows output of Liquid code on a page without being parsed.</p>
<p class="input">Input</p>
<div>
<div class="highlight"><pre><code class="html">&#123;% raw %&#125;&#123;&#123; 5 | plus: 6 &#125;&#125;&#123;% endraw %&#125; is equal to 11.</code></pre></div>
</div>
<p class="output">Output</p>
<div>
<div class="highlight"><pre><code class="html">&#123;&#123; 5 | plus: 6 &#125;&#125; is equal to 11.</code></pre></div>
</div>
_docs/tags/variable.md
+197
View File
@@ -0,0 +1,197 @@
---
title: Variable
---
Variable Tags are used to create new Liquid variables.
### assign
<p>Creates a new variable.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% assign my_variable = false %}
{% if my_variable != true %}
This statement is valid.
{% endif %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
This statement is valid.
{% endraw %}{% endhighlight %}
</div>
Use quotations ("") to save the variable as a string.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% assign foo = "bar" %}
{{ foo }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
bar
{% endraw %}{% endhighlight %}
</div>
### capture
<p>Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through {&#37; capture &#37;} are strings.</p>
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
I am being captured.
{% endraw %}{% endhighlight %}
</div>
### increment
Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
<p class="input">Input</p>
{% highlight html %}{% raw %}
{% increment variable %}
{% increment variable %}
{% increment variable %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
0
1
2
{% endraw %}{% endhighlight %}
</div>
Variables created through the <code>increment</code> tag are independent from variables created through <code>assign</code> or <code>capture</code>.
In the example below, a variable named "var" is created through <code>assign</code>. The <code>increment</code> tag is then used several times on a variable with the same name. However, note that the <code>increment</code> tag does not affect the value of "var" that was created through <code>assign</code>.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
0
1
2
10
{% endraw %}{% endhighlight %}
</div>
### decrement
Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
<p class="input">Input</p>
{% highlight html %}{% raw %}
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
{% endraw %}{% endhighlight %}
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
-1
-2
-3
{% endraw %}{% endhighlight %}
</div>
Like <a href="#increment">increment</a>, variables declared inside <code>decrement</code> are independent from variables created through <code>assign</code> or <code>capture</code>.