PART 1: INTRODUCTION TO LIQUID (Learning Liquid for WebinOne)

Prerequisites

• Just a very basic understand of HTML. This course will start at the very beginning and build on concepts as we go along. Although, if you’d like to play along we recommend having access to a WebinOne site instance, which you can do so for free here if not already signed up.

• A thirst for knowledge (get it?)

What is Liquid

Firstly, Liquid was designed to be easy to use and understand, while providing great power and flexibility. The perfect coding language for designers and front-end devs… which is why we use it in WebinOne.

Liquid is defined as a templating language, meaning it uses templated snippets of code, or layouts, to be later populated with your sites data/content.

On top of this it provides methods for retrieving your sites data and to manipulate that data, hence controlling the final output based on a variety of conditions.

In a nutshell; it allows you to retrieve site data, adjust it for your needs, and render it in the browser based on your required layout.

In a smaller nutshell; it helps you build awesome dynamic websites.

Tricksy Little Templates

Being called a ‘templating language’ often confuses Liquid beginners, as a ‘template’ is typically thought of as the entire wrapper for the whole contents of a page. Whereas in this sense, a template is simply a part, or snippet, of the overall page/document that will be used to format a set of data. In WebinOne, we tend to refer to this concept as a Layout.

Simplified Syntax

Wherever you see characters like {{ }} and {% %}, this is the Liquid syntax being used.

Let’s clarify what Liquid is with a simplified example.

So, you’ve saved some navigation items in WebinOne via the Menu module. Now you have ‘Home’, ‘About’, and ‘Contact’ as your dataset.

You can retrieve that dataset with Liquid:

{% component type: "menu" %}

And create a layout (template) to use:

<ul>
{% for item in menu %}
  <li><a href="{{item.url}}">{{item.name}}</a></li>
{% endfor %}
</ul>

See all those curly brackets and percent characters? They denote data placeholders and layout constructs in Liquid.
Which, with your dataset, would render:

<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Notice how the end result contains no Liquid syntax. This is because Liquid is processed on the server-side and only sends the final output to the browser for rendering - making it a fast and secure server-side language.

The above example has been simplified for illustration purposes. The actual WebinOne Menu module has a few other aspects to it which we’ll cover as we dig deeper.

Why do we use Liquid

Using Liquid puts programmatic control of data into the hands of front-end designers/developers, significantly enhancing the possibilities in the realm of web development when working with dynamic data, reducing the need to use more complex server-side languages like PHP, Python, Ruby, etc. which are often restricted in use within a CMS or, are beyond the toolset of the designer or front-end developer.

Wow, that was a long sentence.

Related Articles

• Liquid Objects & Usage
  Working with Liquid
  WebinOne has implemented the full standard Shopify Liquid library. See the External Resources below for...
• Liquid Objects & Usage
  Liquid Filters
  Liquid Filters allow you to modify the output of a Liquid object, whether that's adding something to it, removing something from it, executing a calculation, creating an array, or a wide variety of other powerful functions.
• Liquid Objects & Usage
  {{ this }} object
  This Liquid object is globally accessible in every liquid template or layout and outputs specific...
• Liquid Objects & Usage
  {{ request }} object
  This Liquid object is globally accessible in every liquid template or layout and outputs various...
• Liquid Objects & Usage
  {{ liquidContext }} object
  This Liquid object is globally accessible in every liquid template or layout and outputs a...
• Liquid Objects & Usage
  {{ siteglobals }}
  This liquid object will output any custom configure Site Information data (found in the Admin's main menu under 'Settings' > 'Site Information').
• Liquid Objects & Usage
  {{ member }} object
  This liquid object will output the Member's details of whom submitted a Form. You can...
• Liquid Objects & Usage
  {{ workflow }} object
  This liquid object will output the Workflow details of a submitted Form. You can use...
• Learning Liquid
  Part 2: Liquid in WebinOne
  In this part of the course we’ll explore how Liquid is implemented in treepl CMS and the overall concepts on using it to harness your website data.
• Learning Liquid
  Part 3: Using Liquid Filters
  In this part of the course we’ll explore using Liquid Filters to transform and manipulate the display of your WebinOne website data.
• Learning Liquid
  Part 4: Advanced Liquid Tags
  
• Liquid Components
  domain_settings
  This module component retrieves settings associated with the current domain, or optionally from another specified domain configured in the site instance.
• Liquid Components
  json
  This component parses JSON data for use in Liquid, either from a remote source, a local file, or string.
• Extras
  Migrating from Liquid 2.0 to 3.0
  This article describes differences and possible required actions for migrating from the Liquid rendering engine v2.0 to v3.0.

External Resources

There are currently no external resources available.

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@webinone.com and we will consult you as soon as possible.