Liquid Templates for B2B Marketplace

Overview

Liquid is an open source templating language that was originally created by Shopify that we have opted to use within our product. If you are not familiar with liquid, there are a couple sections from Shopify’s help documentation that we recommend reading through to get started.

Our web site is using ported version of liquid for the .net framework called DotLiquid. Additional documentation on DotLiquid can be found on their wiki.

http://dotliquidmarkup.org

Creating a New Template

All liquid templates for Customer Portal are currently stored under: /assets/liquid/Templates

To create a new liquid template, use the text editor of your choice to create a new file and ensure it’s saved with a .liquid file extension. Ex. custom.liquid. If the liquid template your creating is potentially going to be embedded in other templates using a liquid include, then the file name would need to start with and underscore. Ex. _custom.liquid.

Each liquid template can have an accompanying .json file to set up any template properties you would like to be able to reference, both from within the template and InterConnect Manager Add-On in Business One. The file should be named the same as the template it’s meant to pair with .liquid.json as the file extension. For example:

• Template File: Product-details.liquid
• JSON Settings File: Product-details.liquid.json

JSON properties

Each JSON settings file must contain the following fields and the appropriate value for each.

A sample of a JSON settings file can be seen below:

{
    "FriendlyName": "Product Details",
    "Template Context": "ProductDetail",
    "TemplateFieldMeta": [
    {
        "FieldName": "show_product_img",
        "DisplayName": "Show Product Image",
        "Required": false,
        "DataType": "Text",
        "ValidValues": [ "true", "false" ]
    },
    {
        "FieldName": "show_QTY",
        "DisplayName": "Show Quantity",
        "Required": false,
        "DataType": "Text",
        "ValidValues": [ "true", "false" ]
    },]
}

Registering a Template in Business One

When a template and its associated *.liquid.json file is added to the website under the assets/liquid/templates, it will automatically get picked up by the addon. This means that it will show up in all the template dropdowns and any additional properties to the addon to update.

Customization Best Practices

To ensure future upgrades go smoothly if you wish to customize and existing template, the best approach would be to create a copy of it to work with instead of just changing the existing file.

In an effort to keep configuration simple and ensure our code is more readable, the out of the box templates have been split up so that there is one main template for each section (collections, products, search, etc.). Code within that template is then split into separate smaller liquid templates that can be inserted in the main template with liquid includes. This helps keep the code readable, and also allows you to potentially reuse it in order templates.

For example, on collections and searches we have two templates to contain the content for list and grid views, and those are set as includes on the main product.liquid and search.liquid templates. We recommend using the same approach when creating your own custom templates to help make maintenance easier on both you and your users.

Data Model

The data model that gets passed to the liquid renderer is fully dynamic and based on several different queries. To get the exact data model for any given template, place the {% debug = true %} on that template and browse to a page that uses that template

Default Liquid Templates

Below is a list of the liquid templates we have included out of the box, and their purpose.

Liquid Template Properties

This is a list of the existing liquid template properties in use by Customer Portal.