This article looks at the syntax of MyCashflow Interface tags and using different types of attributes.

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 are start and end with curly brackets:

{PageTitle}

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

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

For clarity, you may want to 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 attributes of the string type, using quotation marks will make the code cleaner.

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

Types of attributes

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 attribute lists on tag pages.

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

If you assign a value is of a wrong data type to an attribute, the tag probably prints incorrect content or doesn't work at all.

You can always consult the syntax scheme and attribute list on the tag page to see the allowed data types for each tag attribute.

Global attributes

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

  • after: / before: With these attributes, you can set the content to be printed before/after the tag's own content. If the tag itself does not produce any content, the content set for these attributes will not be printed either.

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

    {CategoryProducts(
  before: '<ul>',
  after: '</ul>'
)}
  • or: Sets alternative content that is printed 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 printable content, 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 of the attributes.

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

When used as attribute values, Interface tags are written in the same syntax as in general. The only difference is that the value of the helper attribute is placed in double curly brackets:
{Products(
  category: 2,
  helper: {{
      <h3>{ProductName}</h3>
      <div>{ProductDescription}</div>
      <div>{ProductPrices}</div>
      {ProductAddToCart}
  }}
)}

In the above example, the {Products} tag prints all products from the product category with ID 2.

The helper attribute of the {Products} tag defines the content and markup for each list element. The example prints the name, description, price, and purchase button for each product on 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 data 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.