What is Liquid Markup?

[Daniel_Gundi]

     

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.

            

[bcguy123]

Is this available now for webapps?

[mario_gudelj]

Not yet. Only eCommerce for now.

[bcguy123]

thanks, any idea when?

[mario_gudelj]

We haven't been given ETA on that but look out for announcements on our blog. I believe that something will be posted there prior to release.

[mj1975]

Is this enabled for all ecommerce sites so far?

[M__Adey]

I have the same question! There is no annoucement of any sort, but it is in the known issues of the182/december 2012 release!

[RodJ]

This is such a necessary feature. I am very surprised as a new BC user that such a basic template language is not available across the product. Is this going to be fixed anytime soon? The last on this was in Dec 2012 and it is now well over a year later!