Rendering¶

In Experience Builder, rendering refers to the process of including and displaying snippets, components, and widgets within your Liquid resources. This guide provides a thorough explanation of the various rendering tags available and how to utilize their parameters effectively to create dynamic, functional templates.

rendercomponent¶

Renders snippets & components

    {% rendercomponent "[resource-name].component" %}

Note that specifying the .component file extension is unnecessary when referencing the file. The system automatically recognizes and processes it as a Liquid resource, streamlining your workflow and reducing the need for redundant input.

The code within a rendered resource does not automatically inherit access to variables assigned using variable tags in the parent page. Likewise, variables defined within the rendered resource remain isolated and cannot be accessed by code in other pages. This ensures a clear separation of scope, maintaining the integrity and modularity of your code.

rendercomponent (parameters)¶

Variables assigned using variable tags can be passed to a resource by listing them as parameters on the render tag.

    {% assign my_variable = "apples" %}
    {% rendercomponent "name", my_variable: my_variable, my_other_variable: "oranges" %}

You can pass one or more objects to a resource, allowing dynamic data to be injected and utilized within its context. This capability enables greater flexibility and customization, as the resource can render content or perform operations based on the specific objects provided.

    {% assign featured_product = all_products["product_handle"] %}
    {% rendercomponent "product", product: featured_product %}

with¶

A single object can be passed to a page by using the with and optional as parameters.

    {% assign featured_product = all_products["product_handle"] %}
    {% rendercomponent "product" with featured_product as product %}

In the example above, the product variable in the rendered page will hold the value of featured_product from the parent page.

for¶

A resource can be rendered once for each value of an enumerable object by using the for and optional as parameters.

    {% assign variants = product.variants %}
    {% rendercomponent "product_variant" for variants as variant %}

In the example above, the resource is rendered individually for each version of the product, with the variant variable holding a unique object for each iteration. This ensures the resource adapts dynamically, reflecting the specific attributes of each product version.

When using the for parameter, the forloop object is accessible within the rendered resource.

renderwidget¶

rendersnippet¶

rendercomponentblocks¶

renderbody¶

The layout page determines where to render the content of the calling page.

From inside main.layout

     <html>
        <head></head>
        <body>
           {% renderbody %}
        </body>
     </html>

renderinline¶

The renderinline tag along with the inlinesection tag allows content injection between liquid files.

Input

from inside main.layout

         <html>
            <head>
                {% renderinline Css %}
            </head>
            <body>
               {% renderbody %}
               {% renderinline Scripts %}             
            </body>
         </html>

from inside sample.component

      {% inlinesection Css %}
           <style>
               body {
                     background-color: blue;
                  }
           </style>
      {% endinlinesection %}

       <p>  Some html paragraph </p>

      {% inlinesection Scripts %}
           <script>
               function() { console.log('Hi I am in page.lilquid'); }
           </script>

      {% endinlinesection %}

      {% schema %}
        {

        }
      {% endschema %}

Output

     <html>
        <head>
           <style>
               body {
                     background-color: blue;
                  }
           </style>
         </head>
        <body>
           <div><h1>This is a test page</h1></div>
           <script>
               function() { console.log('Hi I am in page.lilquid'); }
           </script>            
        </body>
     </html>

asset¶

The asset tag generates an HTML element for the specified asset resource, ensuring seamless integration of images, scripts, or styles within the page. This tag simplifies referencing and embedding assets directly into your layout or content.

input

{% asset "image.png" %} <br>
{% asset "sample-script.js" %} <br>
{% asset "sample-style.css %} <br>

output

    <img src="/en/us/image.png" /> <br>
    <script src="/en/us/sample-script.js" ></script> <br>
    <link rel="stylesheet" href="/en/us/sample-style.css">

raw¶

Temporarily suspends tag processing, allowing you to generate content with conflicting syntax, such as Mustache or Handlebars without interference.

Input

    {% raw %}
    In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
    {% endraw %}

Output

    In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

liquid¶

Groups multiple tags within a single set of delimiters, enabling you to write Liquid logic in a more compact and streamlined manner. This approach helps reduce repetition and enhances the clarity of your code, particularly in complex templates.

    {% liquid
    case component.blocks.size
    when 1
      assign column_size = ''
    when 2
      assign column_size = 'one-half'
    when 3
      assign column_size = 'one-third'
    else
      assign column_size = 'one-quarter'
    endcase %}

Because any tag blocks opened within a liquid tag must also be closed within the same tag, use echo to output data.

echo¶

Outputs an expression in the rendered HTML. This is identical to wrapping an expression in {{ and }}, but works inside liquid tags and supports filters.

Input

    {% liquid
    for product in collection.products
      echo product.title | capitalize
    endfor %}

Output

    Hat Shirt Pants

comment¶

The comment tag allows you to leave un-rendered code within a Liquid page. Any text placed between the opening and closing comment blocks will be ignored and not outputted, ensuring that the code inside these blocks is neither rendered nor executed. This feature is useful for adding notes or temporarily disabling code without affecting the page's rendering.

Input

    {% assign verb = "turned" %}
    {% comment %}
    {% assign verb = "converted" %}
    {% endcomment %}
    Anything you put between {% comment %} and {% endcomment %} tags
    is {{ verb }} into a comment.

Output

    Anything you put between  tags
    is turned into a comment.

Inline comments¶

You can use inline comments to prevent an expression from being rendered or output. Any text within the comment tag will also be ignored and not displayed in the final output.

You can create multi-line inline comments by placing a #, at the beginning of each line. This allows you to add detailed explanations or temporarily disable multiple lines of code without affecting the rest of the Liquid template.

Input

{% # for i in (1..3) -%}
  {{ i }}
{% # endfor %}

{%
  ###############################
  # This is a comment
  # across multiple lines
  ###############################
%}

Output

Inline comments inside `liquid` tags¶

You can use the inline comment tag inside liquid tags. The tag must be used for each line that you want to comment.

Input

{% liquid
  # this is a comment
  assign topic = 'Learning about comments!'
  echo topic
%}

Output

Learning about comments!

Rendering¶

rendercomponent¶

rendercomponent (parameters)¶

with¶

for¶

renderwidget¶

rendersnippet¶

rendercomponentblocks¶

renderbody¶

renderinline¶

asset¶

raw¶

liquid¶

echo¶

comment¶

Inline comments¶

Inline comments inside liquid tags¶

Inline comments inside `liquid` tags¶