Business Catalyst Blog

Introducing Liquid Markup support in Business Catalyst (prerelease)

Marius Andreiana Tuesday, October 18, 2011

Hello Partners,

While working on BC, we always keep in mind we're building it for designers and web professionals. From time to time, we're amazed to see some of the beautiful results you're producing with it. Still, we're not yet at the level we want to be with the platform. We want to grant you 100% creative freedom. If there's something which can be done with HTML5, CSS and JavaScript, it should be easy to fully accomplish it with BC.

Therefore, we've been working for quite a while on integrating liquid markup support with other powerful BC specific features. Combined, these will enable you to take your design implementations to the next level, while dropping 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"}

 

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}}"}

 

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>

 

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.

For a larger overview, please see Using Liquid Markup in Business Catalyst and some other standard features. BC specific documentation, such as global objects, is still in progress.

Schedule

We're rolling out liquid functionality in alpha mode, starting with eCommerce. If you'd like to be part of the liquid pre-release, please register at http://www.businesscatalyst.com/liquid. General availability for eCommerce is scheduled for the begining of next year, followed by web apps and rest of BC modules by mid next year.

To see liquid in action with Business Catalyst today, please view Bogdan's MAX presentation, Sneak Peek: Build Powerful Online Businesses with Business Catalyst v3 (liquid starting at 16:30).

Last but not least, Liquid templating engine is open source. Initially developed by Shopify, it's now used and enhanced by several CMSes. We're working on contributing back to community the non-specific BC enhancements we've developed on top of liquid, so these can be released in future liquid versions and be availalable to all platforms using it.

On behalf of BC team, have a good start of the week!
Marius

blog comments powered by Disqus