What is Liquid Markup?

created by Daniel Gundi on Mar 18, 2012 7:52 PM, last modified by Daniel Gundi on Nov 21, 2012 10:00 PM
Version 5
         

    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.png