Liquid Basics - Revision history

Admin: /* Filtered Expressions */

2016-01-11T06:38:17Z

Filtered Expressions

Admin: /* Filtered Expressions */

2016-01-11T00:42:49Z

Filtered Expressions

Admin: /* Filtered Expressions */

2016-01-11T00:40:52Z

Filtered Expressions

Admin: /* Filtered Expressions */

2016-01-11T00:28:52Z

Filtered Expressions

Admin: /* Filters */

2011-06-15T00:26:04Z

Filters

Admin: /* Further References */

2011-05-27T04:57:57Z

Further References

Admin at 04:54, 27 May 2011

2011-05-27T04:54:12Z

Admin at 04:53, 27 May 2011

2011-05-27T04:53:07Z

Admin at 04:23, 27 May 2011

2011-05-27T04:23:19Z

Show changes

Admin at 03:56, 27 May 2011

2011-05-27T03:56:51Z

Show changes

@@ Line 73: / Line 73: @@
 Filtered expressions can also be used in expressions in the following tags
 * Assign
-Here are some examples:
+Here is an example:
 <pre>
 {% assign prefix = product.title | substring: 0, 3 | upcase %}
 </pre>

@@ Line 76: / Line 76: @@
 * Unless/Else
 * Assign
 Here are some examples:

@@ Line 77: / Line 77: @@
 * Assign
 * Case
 Here are some examples:

@@ Line 78: / Line 78: @@
 * Case
 * Cycle
 Here are some examples:

← Older revision		Revision as of 00:26, 15 June 2011
Line 68:		Line 68:

	For a full description of all the Liquid filters, please refer to the [[Liquid Filter Reference]].		For a full description of all the Liquid filters, please refer to the [[Liquid Filter Reference]].
		+
		+	== Filtered Expressions ==
		+
		+	Filtered expressions can also be used in expressions in the following tags
		+
		+	* If/Else
		+	* Unless/Else
		+	* Assign
		+	* Case
		+	* Cycle
		+	* For Loops
		+
		+	Here are some examples:
		+
		+	<pre>
		+	{% if settings.background_colour \| brightness > 50 %}Too bright{% else %}Just right{% endif %}
		+
		+	{% assign prefix = product.title \| substring: 0, 3 \| upcase %}
		+	</pre>

	== Further Reference ==		== Further Reference ==

@@ Line 69: / Line 69: @@
 For a full description of all the Liquid filters, please refer to the [[Liquid Filter Reference]].
-== Further References ==
+== Further Reference ==
 * [[Liquid Tag Reference]]

@@ Line 66: / Line 66: @@
 Hello {{ 'now' | date: "%Y %h" }}
 </pre>
 == Further References ==

@@ Line 5: / Line 5: @@
 Liquid is the templating engine for customizing your store layout. It's a small and fast template language which is quick and easy to learn but contains very powerful features for full customization.
-The Spiffy Stores Liquid Variables Reference can be found [[Liquid Variable Reference|here]].
+You can use a template language such as Liquid to substitute variable data into a page layout. For example, each product page is defined by the <code>product.liquid</code> template. This file contains the HTML that describes the layout of the various elements on a product page. Within this template, you will find various Liquid tags and variables that help to display different data for each product.
 == Basics ==
-There are two types of markup in liquid: Output and Tag.
+There are two types of markup in liquid: '''Output''' and '''Tag'''.
-* Output is surrounded by <pre> {{ two curly brackets }} </pre>
+* '''Output''' is surrounded by - <code><nowiki>{{ two curly brackets }}</nowiki></code>
-* Tags are surrounded by <pre> {% a curly bracket and a percent %} </pre>
+* '''Tags''' are surrounded by - <code><nowiki>{% a curly bracket and a percent %}</nowiki></code>
 Output blocks will always be replaced with the data which they reference.
-For instance if your liquid template has a product object exposed to it you can print the name of the product to the screen by referencing <pre> {{ product.title }} </pre>
+For instance if your liquid template has a product object exposed to it you can print the name of the product to the screen by referencing <code><nowiki>{{ product.title }}</nowiki></code>
-Tags drive the logic of templates. They are responsible for loops and branching logic such as If / Else.
+Tags allow you to control the logic of templates. They are responsible for loops and branching logic such as <code>If / Else</code>.
 == Output ==
-Here is a simple example of Output:
+Here is a simple example of '''Output'''. The Liquid code contains variables that will be replaced by the actual values when the template is rendered.
 <pre>
-Hello {{name}}
+Hello {{ name }}
-Hello {{user.name}}
+Hello {{ user.name }}
 Hello {{ 'fred' }}
 </pre>
-=== Acceptable Tags and Comments ===
+For a full description of all the Liquid variables that can be used in the various templates, please refer to the [[Liquid Variable Reference]].
-We sanitize all templates, so that you may not use javascript or tags that might be harmful to the application. Disallowed tags include, but aren’t limited to:
+* <code><nowiki><HEAD></nowiki></code>
-* HEAD
+== Comments ==
-=== Comments ===
+HTML comments are automatically sanitized, so if you wish to place comments in your code, do it with a Liquid comment.
-HTML comments are automatically sanitized by our system. If you wish to place comments in your code, do it with a liquid comment, like so:
+<pre>
-<pre> {{ # This is a comment in liquid, and won't show up on the output }} </pre>
+== Filters ==
-=== Filters ===
+Within the '''Output''' blocks, you can add filters that modify the results of the output block. The filters can be chained together, with the output from one filter being passed as input to the next. A filter is a small piece of code that performs some simple transformation.
-Output markup takes filters. Filters are simple methods. The first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters the template will receive the resulting string.
+When filters are chained together, the first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters the template will receive the resulting string.
 <pre>
@@ Line 54: / Line 66: @@
 Hello {{ 'now' | date: "%Y %h" }}
 </pre>