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

Styled input/output codeblocks, going through all docs to make sure codeblocks are consistent

Browse Source
This commit is contained in:
Tetsuro
2015-12-04 21:34:18 -05:00
parent 95dc90e503
commit 6bf836b719
8 changed files with 101 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/modules/_content-area.scss
+26 -2
View File
@@ -2,8 +2,32 @@
margin-bottom: $spacing-unit * 2; margin-bottom: $spacing-unit * 2;
} }
.code--input { .code-block {
pre {
border-radius: 0 0 3px 3px;
border-top: none;
}
&:before { &:before {
content: 'stuff' padding: 8px 12px;
display: block;
box-sizing: border-box;
font-weight: bold;
color: $color-white;
background: $color-blue-5;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
}
.code-block--input {
&:before {
content: 'Input';
}
}
.code-block--output {
&:before {
content: 'Output';
} }
} }
basics/handles.md
+2 -4
View File
@@ -29,8 +29,7 @@ You can change an object's handle manually (TK how to change a handle manually)
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. 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 class="code-block code-block--input">
<div>
{% highlight liquid %} {% highlight liquid %}
{% raw %} {% raw %}
{{ pages.about-us.title }} {{ pages.about-us.title }}
@@ -39,8 +38,7 @@ In many cases you may know the handle of a object whose attributes you want to a
{% endhighlight %} {% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight text %} {% highlight text %}
About Us About Us
About Us About Us
basics/truthy-and-falsy.md
+10 -6
View File
@@ -20,31 +20,35 @@ In the example below, the text "Tobi" is not a boolean, but it is truthy in a co
[Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty: [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> <div class="code-block code-block--input">
{% highlight liquid %}{% raw %} {% highlight html %}{% raw %}
{% if settings.fp_heading %} {% if settings.fp_heading %}
<h1>{{ settings.fp_heading }}</h1> <h1>{{ settings.fp_heading }}</h1>
{% endif %} {% endif %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<h1></h1> <h1></h1>
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
[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>`: [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> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% if pages[settings.page] %} {% if pages[settings.page] %}
<div>{{ pages[settings.page].content }}</div> <div>{{ pages[settings.page].content }}</div>
{% endif %} {% endif %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<div></div> <div></div>
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
## Falsy ## Falsy
basics/types.md
+15 -12
View File
@@ -63,17 +63,17 @@ In the following example, if the user does not exist (that is, `user` returns `n
Tags or outputs that return `nil` will not print anything to the page. Tags or outputs that return `nil` will not print anything to the page.
<p class="input">Input</p> <div class="code-block code-block--input">
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
The current user is {{ user.name }} The current user is {{ user.name }}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
{% highlight text %}{% raw %} {% highlight text %}{% raw %}
The current user is The current user is
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
## Array ## Array
@@ -83,40 +83,43 @@ Arrays hold lists of variables of any type.
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. 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> <div class="code-block code-block--input">
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" --> <!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{% for user in site.users %} {% for user in site.users %}
{{ user }} {{ user }}
{% endfor %} {% endfor %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
{% highlight text %}{% raw %} {% highlight text %}{% raw %}
Tobi Lina Tetsuro Adam Tobi Lina Tetsuro Adam
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
### Accessing specific items in arrays
#### Accessing specific items in arrays
You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero. You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero.
<p class="input">Input</p> <div class="code-block code-block--input">
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" --> <!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{{ site.users[0] }} {{ site.users[0] }}
{{ site.users[1] }} {{ site.users[1] }}
{{ site.users[3] }} {{ site.users[3] }}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
{% highlight text %}{% raw %} {% highlight text %}{% raw %}
Tobi Tobi
Lina Lina
Adam Adam
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
#### Initializing arrays ### Initializing arrays
You cannot initialize arrays using pure Liquid. You cannot initialize arrays using pure Liquid.
@@ -137,7 +140,7 @@ 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`. 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 ### 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. Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.
tags/control-flow.md
+9 -22
View File
@@ -6,8 +6,7 @@ title: Control Flow
<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>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 >Input</p> <div class="code-block code-block--input">
<div class="code--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% assign handle = 'cake' %} {% assign handle = 'cake' %}
{% case handle %} {% case handle %}
@@ -21,9 +20,7 @@ title: Control Flow
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
This is a cake This is a cake
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -33,9 +30,7 @@ This is a cake
<p>Executes a block of code only if a certain condition is met.</p> <p>Executes a block of code only if a certain condition is met.</p>
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% if product.title == 'Awesome Shoes' %} {% if product.title == 'Awesome Shoes' %}
These shoes are awesome! These shoes are awesome!
@@ -43,9 +38,8 @@ This is a cake
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p>
<div> <div class="code-block code-block--output">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
These shoes are awesome! These shoes are awesome!
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -55,9 +49,8 @@ These shoes are awesome!
<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p> <p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
<p class="input">Input</p>
<div> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<!-- If customer.name = 'anonymous' --> <!-- If customer.name = 'anonymous' -->
{% if customer.name == 'kevin' %} {% if customer.name == 'kevin' %}
@@ -70,9 +63,7 @@ These shoes are awesome!
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
Hey Anonymous! Hey Anonymous!
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -82,9 +73,7 @@ Hey Anonymous!
<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p> <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 class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% unless product.title == 'Awesome Shoes' %} {% unless product.title == 'Awesome Shoes' %}
These shoes are not awesome. These shoes are not awesome.
@@ -92,9 +81,7 @@ Hey Anonymous!
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
These shoes are not awesome. These shoes are not awesome.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -102,7 +89,7 @@ These shoes are not awesome.
This would be the equivalent of doing the following: This would be the equivalent of doing the following:
<div> <div class="code-block code-block--output">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% if product.title != 'Awesome Shoes' %} {% if product.title != 'Awesome Shoes' %}
These shoes are not awesome. These shoes are not awesome.
tags/iteration.md
+21 -78
View File
@@ -4,16 +4,13 @@ title: Iteration
Iteration Tags are used to run a block of code repeatedly. Iteration Tags are used to run a block of code repeatedly.
<a id="topofpage"></a>
### for ### 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). 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. `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 class="code-block code-block--input">
<div>
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
{% for product in collection.products %} {% for product in collection.products %}
{{ product.title }} {{ product.title }}
@@ -21,8 +18,7 @@ Repeatedly executes a block of code. For a full list of attributes available wit
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight text %} {% highlight text %}
hat shirt pants hat shirt pants
{% endhighlight %} {% endhighlight %}
@@ -32,8 +28,7 @@ hat shirt pants
Causes the loop to stop iterating when it encounters the `break` tag. Causes the loop to stop iterating when it encounters the `break` tag.
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
{% for i in (1..5) %} {% for i in (1..5) %}
{% if i == 4 %} {% if i == 4 %}
@@ -45,8 +40,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight text %} {% highlight text %}
1 2 3 1 2 3
{% endhighlight %} {% endhighlight %}
@@ -56,8 +50,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
Causes the loop to skip the current iteration when it encounters the `continue` tag. Causes the loop to skip the current iteration when it encounters the `continue` tag.
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight liquid %}{% raw %} {% highlight liquid %}{% raw %}
{% for i in (1..5) %} {% for i in (1..5) %}
{% if i == 4 %} {% if i == 4 %}
@@ -69,8 +62,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight text %} {% highlight text %}
1 2 3 5 1 2 3 5
{% endhighlight %} {% endhighlight %}
@@ -82,10 +74,8 @@ Causes the loop to skip the current iteration when it encounters the `continue`
<h4>limit</h4> <h4>limit</h4>
Exits the for loop at a specific index. Exits the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] --> <!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %} {% for item in array limit:2 %}
@@ -94,9 +84,7 @@ Exits the for loop at a specific index.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
1 2 1 2
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -105,10 +93,8 @@ Exits the for loop at a specific index.
<h4>offset</h4> <h4>offset</h4>
Starts the for loop at a specific index. Starts the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] --> <!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %} {% for item in array offset:2 %}
@@ -117,9 +103,7 @@ Starts the for loop at a specific index.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
3 4 5 6 3 4 5 6
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -127,10 +111,8 @@ Starts the for loop at a specific index.
<h4>range</h4> <h4>range</h4>
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers. 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> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% assign num = 4 %} {% assign num = 4 %}
{% for i in (1..num) %} {% for i in (1..num) %}
@@ -143,22 +125,18 @@ Defines a range of numbers to loop through. The range can be defined by both lit
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
1 2 3 4 1 2 3 4
3 4 5 3 4 5
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<h4>reversed <h4>reversed
</h4> </h4>
Reverses the order of the for loop. Reverses the order of the for loop.
<br/><br/>
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] --> <!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %} {% for item in array reversed %}
@@ -167,34 +145,12 @@ Reverses the order of the for loop.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
6 5 4 3 2 1 6 5 4 3 2 1
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
</div> </div>
### cycle ### cycle
@@ -203,8 +159,7 @@ Loops through a group of strings and outputs them in the order that they were pa
<code>cycle</code> must be used within a <a href="#for">for</a> loop block. <code>cycle</code> must be used within a <a href="#for">for</a> loop block.
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %}
@@ -213,8 +168,7 @@ Loops through a group of strings and outputs them in the order that they were pa
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
one one
two two
@@ -232,7 +186,6 @@ Uses for <code>cycle</code> include:
<h2 class="parameter">parameters <span>cycle</span></h2> <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. <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> <p>The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.</p>
@@ -334,9 +287,7 @@ Uses for <code>cycle</code> include:
<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>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 class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<table> <table>
{% tablerow product in collection.products %} {% tablerow product in collection.products %}
@@ -346,10 +297,7 @@ Uses for <code>cycle</code> include:
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<div class="code-block code-block--output">
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<table> <table>
<tr class="row1"> <tr class="row1">
@@ -381,14 +329,11 @@ Uses for <code>cycle</code> include:
<h2 class="parameter">parameters <span>tablerow</span></h2> <h2 class="parameter">parameters <span>tablerow</span></h2>
<h4>cols</h4> <h4>cols</h4>
Defines how many columns the tables should have. Defines how many columns the tables should have.
<br/><br/>
<p class="input">Input</p>
<div> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% tablerow product in collection.products cols:2 %} {% tablerow product in collection.products cols:2 %}
{{ product.title }} {{ product.title }}
@@ -396,9 +341,7 @@ Defines how many columns the tables should have.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
<table> <table>
<tr class="row1"> <tr class="row1">
tags/theme.md
+4 -209
View File
@@ -10,38 +10,21 @@ Theme Tags have various functions, including:
- Splitting a returned array into multiple pages. - Splitting a returned array into multiple pages.
<a id="topofpage"></a>
### comment ### 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>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 class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
My name is {% comment %}super{% endcomment %} Shopify. My name is {% comment %}super{% endcomment %} Shopify.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
My name is Shopify. My name is Shopify.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
### include ### include
@@ -71,12 +54,9 @@ Or you can consolidate them into one line of code:
{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %} {% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
<h2 class="parameter">parameters <span>include</span></h2> <h2 class="parameter">parameters <span>include</span></h2>
### with
#### with
The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet. The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
@@ -107,52 +87,13 @@ color: 'blue' shape: 'circle'
color: 'red' shape: 'square' color: 'red' shape: 'square'
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
### form ### 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. 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> <h2 class="parameter">parameters <span>form</span></h2>
### new_comment
#### 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. 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.
@@ -177,152 +118,6 @@ Generates a form for creating a new comment in the <a href="/themes/theme-develo
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </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 ### 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. 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.
tags/variable.md
+14 -39
View File
@@ -4,16 +4,11 @@ title: Variable
Variable Tags are used to create new Liquid variables. Variable Tags are used to create new Liquid variables.
## assign ## assign
<p>Creates a new variable.</p> <p>Creates a new variable.</p>
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% assign my_variable = false %} {% assign my_variable = false %}
{% if my_variable != true %} {% if my_variable != true %}
@@ -22,9 +17,7 @@ Variable Tags are used to create new Liquid variables.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
This statement is valid. This statement is valid.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -32,41 +25,31 @@ Variable Tags are used to create new Liquid variables.
Use quotations ("") to save the variable as a string. Use quotations ("") to save the variable as a string.
<p class="input">Input</p> <div class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% assign foo = "bar" %} {% assign foo = "bar" %}
{{ foo }} {{ foo }}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
bar bar
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
## capture ## 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>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>
<div class="code-block code-block--input">
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% capture my_variable %}I am being captured.{% endcapture %} {% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }} {{ my_variable }}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
I am being captured. I am being captured.
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
@@ -76,17 +59,15 @@ I am being captured.
Creates a new number variable, and increases its value by one every time it is called. The initial value is 0. 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> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% increment variable %} {% increment variable %}
{% increment variable %} {% increment variable %}
{% increment variable %} {% increment variable %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
0 0
1 1
@@ -98,9 +79,7 @@ Variables created through the <code>increment</code> tag are independent from va
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>. 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 class="code-block code-block--input">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% assign var = 10 %} {% assign var = 10 %}
{% increment var %} {% increment var %}
@@ -110,9 +89,7 @@ In the example below, a variable named "var" is created through <code>assign</co
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div> </div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
0 0
1 1
@@ -126,17 +103,15 @@ In the example below, a variable named "var" is created through <code>assign</co
Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1. 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> <div class="code-block code-block--input">
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
{% decrement variable %} {% decrement variable %}
{% decrement variable %} {% decrement variable %}
{% decrement variable %} {% decrement variable %}
{% endraw %}{% endhighlight %} {% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p> <div class="code-block code-block--output">
<div>
{% highlight html %}{% raw %} {% highlight html %}{% raw %}
-1 -1
-2 -2