Interface tag syntax

The content printed by Interface tags varies a lot: some of the tags print content suitable for the <head> element of the page (for example, {MinifyCSS} and {MinifyJS}), while some are better used within the <body> section.

All tags start and end with curly brackets:

{PageTitle}

Many tags have attributes to refine or modify the content output by the tag. Attributes are defined as a comma-separated attribute: 'value' list placed in round brackets inside a tag:

{ProductPrice(decimals: 2, includetax: true)}

For clarity, you should place individual attributes in separate rows:

{ProductPrice(
    decimals: 2,
    includetax: true
)}

You can also wrap attribute values in quotation marks (" or '), which is not obligatory though. In string-type attributes, using quotation marks will make the code cleaner.

{Products(
    before: '<h2>Products</h2>'
)}

Attribute types

Each attribute has a permissible data type that specifies what kind of values ​​can be given to the attribute. The data types in use are as follows:

• Boolean (boolean): true or false.
• Integers (int): integers (e.g. 24).
• String (string): text and/or HTML and Interface markup.

  Some attributes have a limited number of allowed strings. All allowed options are listed in the attribute lists on tag pages.

  Not all string attributes allow HTML/Interface markup. You will find detailed information about allowed attribute values on the tag documentation pages.

Global attributes

The following global attributes are available for almost all Interface tags:

• before: / after: With these two attributes, you can define content that is output before or after the content produced by the tag. If the tag does not produce any content, the content of the before and after attributes will also not be displayed.

  In this way, you can add e.g. a container element around a product list:

  {CategoryProducts(
    before: '<ul>',
    after: '</ul>'
  )}

• or: Defines alternative content that is displayed if the tag itself does not produce any content.

  For example, if you are printing a product category with no products, the value of the or attribute will be displayed:

  {CategoryProducts(
    or: 'No products'
  )}

• escape: Adds an escape character before each quotation mark in the content printed by the tag, so that it is easier to process the content with JavaScript.

Using tags as attribute values

It is possible to use the content produced by other Interface tags as values of some attributes.

For example, some lists include a helper attribute to format the content and formatting of a single list element.

{ProductSet(
  category: 2,
  helper: {{
      <h3>{ProductName}</h3>
      <div>{ProductDescription}</div>
      <div>{ProductPrices}</div>
      {ProductAddToCart}
  }}
)}

In the example, the {ProductSet} tag prints all products from the product category with an ID of 2 defined in the category attribute.

The tag's helper attribute, in turn, defines the content and markup of the list elements. In this example, the tag prints the name, description, price information, and add-to-cart button for each product in the list.

Using file references as attribute values

It is possible to use references to HTML files located in the theme folder as attribute values. For example, by using the {Helper} tag's file attribute, the selected file's content is loaded and printed on the page.

File references are always defined in relation to the theme's root directory. The extension of the referenced file should be omitted in the reference:

{Helper(
    product: 3,
    file: 'helpers/product-display'
)}

In the example, the {Helper} tag prints the details of one product. The desired markup is specified in the theme's helpers/product-display.html file that is loaded as the value of the file attribute.