kemko/liquid
1
0
Fork 0
mirror of https://github.com/kemko/liquid.git synced 2026-01-01 15:55:40 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adding tags, removing custom Liquid

Browse Source
This commit is contained in:
Tetsuro
2015-08-28 15:45:28 -04:00
parent 57ccbd4898
commit 67b80e35f9
14 changed files with 1336 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
_basics/types.md
View File

@@ -2,13 +2,11 @@
title: Types
---
# Types
Liquid objects can return one of six types: String, Number, Boolean, Nil, Array, or EmptyDrop. Liquid variables can be initialized by using the <a href="/themes/liquid-documentation/tags/variable-tags/#assign">assign</a> or <a href="/themes/liquid-documentation/tags/variable-tags/#capture">capture</a> tags.
## Strings
### Strings
Strings are declared by wrapping the variable's value in single or double quotes.
@@ -19,7 +17,7 @@ Strings are declared by wrapping the variable's value in single or double quotes
</div>
## Numbers
### Numbers
Numbers include floats and integers.
@@ -31,7 +29,7 @@ Numbers include floats and integers.
## Booleans
### Booleans
Booleans are either true or false. No quotations are necessary when declaring a boolean.
@@ -44,7 +42,7 @@ Booleans are either true or false. No quotations are necessary when declaring a
## Nil
### Nil
Nil is an empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".
@@ -75,10 +73,7 @@ Tracking number:
## Arrays
### Arrays
Arrays hold a list of variables of all types.

2
_sass/main.scss
View File

@@ -9,7 +9,7 @@
@import "modules/layout";
@import "modules/buttons";
@import "modules/home-banner";
@import "modules/page-content";
@import "modules/content-area";
@import "vendors/syntax-highlighting";

11
_sass/modules/_base.scss
View File

@@ -173,3 +173,14 @@ table {
padding: 6px 13px;
}
}
td {
code {
border: none;
background: none;
}
}
p {
line-height: 1.8;
}

13
_sass/modules/_content-area.scss Normal file
View File

@@ -0,0 +1,13 @@
.content__item {
margin-bottom: $spacing-unit * 2;
h3 {
text-decoration: underline;
}
}
.content__header {
font-weight: bold;
}

18
_sass/modules/_page-content.scss
View File

@@ -1,18 +0,0 @@
td {
code {
border: none;
background: none;
}
}
p {
line-height: 1.8;
}
.content__item {
margin-bottom: $spacing-unit * 2;
}
.content__header {
font-weight: bold;
}

147
_tags/control-flow-tags.md Normal file
View File

@@ -0,0 +1,147 @@
---
title: Control Flow Tags
---
# Control Flow Tags
Control Flow tags determine which block of code should be executed based on different conditions.
### 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>
### 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>
### 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>
### 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>

489
_tags/iteration-tags.md Normal file
View File

@@ -0,0 +1,489 @@
---
title: Iteration Tags
---
# Iteration Tags
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>

11
_tags/join.md
View File

@@ -1,11 +0,0 @@
---
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"]`.

11
_tags/last.md
View File

@@ -1,11 +0,0 @@
---
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"]`.

9
_tags/lstrip.md
View File

@@ -1,9 +0,0 @@
---
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 "` |

15
_tags/temp-index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Tags
---
Liquid _tags_ are the programming logic that tells templates what to do. Tags are wrapped in: <code>{&#37;</code> <code>&#37;}</code>.
Certain tags, such as <a href="#for"><code>for</code></a> and <a href="#cycle"><code>cycle</code></a> can take on parameters. Details for each parameter can be found in their respective sections.
Tags can be broken down into four categories:
- [Control Flow Tags](/themes/liquid-documentation/tags/control-flow-tags/)
- [Iteration Tags](/themes/liquid-documentation/tags/iteration-tags/)
- [Theme Tags](/themes/liquid-documentation/tags/theme-tags/)
- [Variable Tags](/themes/liquid-documentation/tags/variable-tags/)

450
_tags/theme-tags.md Normal file
View File

@@ -0,0 +1,450 @@
---
layout: default
title: Theme Tags
landing_as_article: true
nav:
group: Liquid Documentation
weight: 1
---
# Theme Tags
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>

199
_tags/variable-tags.md Normal file
View File

@@ -0,0 +1,199 @@
---
title: Variable Tags
---
# Variable Tags
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>.

30
index.md
View File

@@ -4,31 +4,13 @@ layout: default
{% include home-banner.html %}
<p>Liquid is an extraction from the e-commerce system Shopify. Shopify powers many thousands of e-commerce stores which all call for unique designs. For this we developed Liquid which allows our customers complete design freedom while maintaining the integrity of our servers.</p>
<p>Liquid has been in production use since June 2006 and is now used by many other hosted web applications.</p>
<p>It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works excellently as a stand alone library.</p>
Liquid is an open-source, Ruby-based template language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
Liquid uses a combination of _tags_, _objects_, and _filters_ to load dynamic content. They are used inside Liquid _template files_, which are a group of files that make up a theme. For more information on the available templates, please see <a href="/themes/theme-development/templates/">Theme Development</a>.
## Tags
Tags make up the programming logic that tells templates what to do.
{% raw %}
{% if user.name == 'elvis' %}
Hey Elvis
{% endif %}
{% endraw %}
## Filters
Filters are used to modify the output of strings, numbers, variables, and objects.
## What is Liquid?
{% raw %}
{{ 'sales' | append: '.jpg' }} <!-- Output: sales.jpg -->
{% endraw %}
Liquid is an open-source, Ruby-based template language created by [Shopify](http://www.shopify.com). It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
Liquid has been in production use since June 2006 and is now used by many other hosted web applications.
It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works excellently as a stand alone library.