What is Liquid Markup?

Liquid Markup Preview

What is Liquid Markup?

Liquid Markup is the way to achieve 100% creative freedom with BC. Bringing full control over generated content, server-side support for conditionals and loops, and more, liquid markup enables easier building of amazing sites without JavaScript hacks you had to use in the past.

Here are some of the new features brought by liquid markup integration in BC:

Unlimited module templates (layouts) for modules

Rather than choosing between the two layouts available when using a module, the module template is specified via the "template" parameter:

{module_productList
        template="/_System/ModuleTemplates/Shop/myProductList.html"}

This allows having different ways to list products depending on various conditions such as what catalog it is in or special promotions.

New filter, sort and paginate syntax for modules

{module_productList template="..." catalogId="2" onSale="true" price="between(100,500)" sortBy="price asc" itemsPerPage="{{get.PageSize}}"}

Named parameters syntax make the code readable without having to reach for documentation. Filtering, sorting and pagination can be easily set and changed for each module instance, without having to use JavaScript to do these in the browser.

Output markup for object properties

<div class="small-product">

          <h3><a href="{{product.url}}">{{product.name}}</a></h3>

          <div class="product-image"> 

            <a href="{{product.url}}">

                <img alt="{{product.name}}" src="{{product.smallImage}}" />

            </a>

          </div>

        </div>

Each object data property can be accessed exactly how it's stored in database, without any additional hardcoded markup. This gives you 100% control over how the final markup is generated in the browser.

Loops

Collections can be looped through:

<ul class="productList">

        {% for prd in products %}

            <li class="productItem">

            {module_product template="/_System/ModuleTemplates/Shop/productSmall.html" productId="{{prd.Id}}"}

            </li>

        {% endfor %}

        </ul>

Conditionals

Different markup can be generated, according to specific conditions:

{% if product.stock>0 %}

            Stock: {{product.stock}}

        {% else %}

            Out of stock. Delivery will take additional 3 days.

        {% endif %}

...and more

Through module templates, all markup generated by BC is exposed and can be adjusted as desired. Examples of former hard-coded markup range from image tags or add to cart buttons to catalog breadcrumbs and search results navigation.

Liquid Markup Preview