Difference between revisions of "Liquid Basics"
From Spiffy Stores Knowledge Base
(98 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | Spiffy Stores gives you 100% control over the HTML and CSS for your online storefront. Our themes use standard HTML and CSS, with dynamic tags from a templating language called "Liquid" to display dynamic data. This helps you transform your design into a dynamic e-commerce web site as quickly as possible. | |
− | This is an introduction to the Spiffy Stores | + | This is an introduction to the Spiffy Stores Liquid template syntax, and a reference for Spiffy Stores-specific Tags and Filters. |
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. | 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. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | For example, a product template will usually contain a product title, using the <code><nowiki>{{ product.title }}</nowiki></code> Liquid variable. A different title will be used for each different product that is displayed, as the Liquid variable is substituted for the actual product title. | ||
== Basics == | == 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 < | + | * '''Output''' is surrounded by - <code><nowiki>{{ two curly brackets }}</nowiki></code> |
− | * Tags are surrounded by < | + | * '''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. | 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 < | + | 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 | + | Tags allow you to control the logic of templates. They are responsible for loops and branching logic such as <code>If / Else</code>. |
== Output == | == 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> | <pre> | ||
− | Hello {{name}} | + | Hello {{ name }} |
− | Hello {{user.name}} | + | Hello {{ user.name }} |
Hello {{ 'fred' }} | Hello {{ 'fred' }} | ||
</pre> | </pre> | ||
− | + | For a full description of all the Liquid variables that can be used in the various templates, please refer to the [[Liquid Variable Reference]]. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Tags == | == Tags == | ||
− | + | For a full description on all the Liquid tags, please refer to the [[Liquid Tag Reference]]. | |
− | + | == Acceptable Tags and Comments == | |
− | + | All templates are sanitized, so 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> | |
+ | * <code><nowiki><BODY></nowiki></code> | ||
+ | * <code><nowiki><SCRIPT></nowiki></code> | ||
− | + | == Comments == | |
− | |||
− | |||
− | + | HTML comments are automatically sanitized, so if you wish to place comments in your code, do it with a Liquid comment. | |
− | |||
− | |||
− | in | ||
<pre> | <pre> | ||
− | { | + | {{ # This is a comment in Liquid, and won't show up on the output }} |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | == | + | == 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. | |
− | + | 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> | <pre> | ||
− | { | + | Hello {{ 'fred' | upcase }} |
− | + | Hello fred has {{ 'fred' | length }} letters! | |
− | + | Hello {{ '*fred*' | textilize | upcase }} | |
− | + | Hello {{ 'now' | date: "%Y %h" }} | |
− | { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | { | ||
− | { | ||
− | |||
− | { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | { | ||
− | |||
− | { | ||
− | { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | + | 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 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | * Assign | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | Here is an example: | ||
<pre> | <pre> | ||
− | + | {% assign prefix = product.title | substring: 0, 3 | upcase %} | |
− | |||
− | |||
</pre> | </pre> | ||
+ | == Further Reference == | ||
− | + | * [[Liquid Tag Reference]] | |
− | + | * [[Liquid Variable Reference]] | |
− | + | * [[Liquid Filter Reference]] | |
− | + | * [[Liquid Paginate Tag|Pagination ]] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Latest revision as of 16:38, 11 January 2016
Spiffy Stores gives you 100% control over the HTML and CSS for your online storefront. Our themes use standard HTML and CSS, with dynamic tags from a templating language called "Liquid" to display dynamic data. This helps you transform your design into a dynamic e-commerce web site as quickly as possible.
This is an introduction to the Spiffy Stores Liquid template syntax, and a reference for Spiffy Stores-specific Tags and Filters.
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.
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 product.liquid
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.
For example, a product template will usually contain a product title, using the {{ product.title }}
Liquid variable. A different title will be used for each different product that is displayed, as the Liquid variable is substituted for the actual product title.
Contents
Basics
There are two types of markup in liquid: Output and Tag.
- Output is surrounded by -
{{ two curly brackets }}
- Tags are surrounded by -
{% a curly bracket and a percent %}
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 {{ product.title }}
Tags allow you to control the logic of templates. They are responsible for loops and branching logic such as If / Else
.
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.
Hello {{ name }} Hello {{ user.name }} Hello {{ 'fred' }}
For a full description of all the Liquid variables that can be used in the various templates, please refer to the Liquid Variable Reference.
Tags
For a full description on all the Liquid tags, please refer to the Liquid Tag Reference.
Acceptable Tags and Comments
All templates are sanitized, so you may not use JavaScript or tags that might be harmful to the application. Disallowed tags include, but aren’t limited to:
<HEAD>
<BODY>
<SCRIPT>
Comments
HTML comments are automatically sanitized, so if you wish to place comments in your code, do it with a Liquid comment.
{{ # This is a comment in Liquid, and won't show up on the output }}
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.
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.
Hello {{ 'fred' | upcase }} Hello fred has {{ 'fred' | length }} letters! Hello {{ '*fred*' | textilize | upcase }} Hello {{ 'now' | date: "%Y %h" }}
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
- Assign
Here is an example:
{% assign prefix = product.title | substring: 0, 3 | upcase %}