Developing Templates

This guide was updated to reflect the new UI Schemas for the new Editor

To display page modules in MOMENTVM they need the underlying html structure which is called Template in MOMENTVM.

A Template is a piece of html which can contain MOMENTVM Templating code and variables.

Consider this simple Template:

<div class="brand-component paragraph" #if(module_unique_id): id="#(module_unique_id)" #endif>
  <div class="brand-component-column">
    <div class="brand-component--large" style="text-align:center">
      #(paragraph_text)
      <a href="">#(link_text)</a>
    </div>
  </div>
</div>

The variable paragraph_text will be exposed in the Live Editor and can be filled. The name of the variable is up to the developer.

Custom Tags

We have developed custom tags to make template development easier for you.

Module ID

The system is generating a unique module ID, which you can use for targeting individual modules in CSS or Javascript.

<section id="section--#(module_id)-row"></section>

Link to Category

You can use the tag #categoryurl(<categoryid>) for linking to a category inside Salesforce Commerce Cloud (SFCC). The tag will be replaced with the following SFCC syntax when rendering the page in the Live Editor or when publishing the page to SFCC: $url('Search-Show','cgid','<categoryId>')$.

The tag allows up to 3 parameters. If your SFCC system allows adding additional parameters to the category url you can add the parameters to the tag. The tag #categoryurl(<categoryid>, 'param2', 'param3') replaces the following syntax $url('Search-Show','cgid','<categoryId>','param2', 'param3')$.

Example:

<a href="#categoryurl(224455)">Link to Product category</a>

Link to product

You can use the tag #producturl(<productid>) for linking to a product inside Salesforce Commerce Cloud (SFCC). The tag will be replaced with the following SFCC syntax when rendering the page in the Live Editor or when publishing the page to SFCC: $url('Product-Show','pid','<productId>')$.

Example:

<a href="#producturl(800223)">Link to Product</a>

Link to content asset

You can use the tag #contenturl("<content-asset-id>") for linking to a content asset inside Salesforce Commerce Cloud (SFCC). The tag will be replaced with the following SFCC syntax when rendering the page in the Live Editor or when publishing the page to SFCC: $url('Page-Show','cid','<content-asset-id>')$.

If your content asset ID is defined via a template variable (e.g which is called homepageText) from the template schema you have to omit the quotation marks: #contenturl(homepageText)'.

Example:

<a href='#contenturl("homepage")'>Link to content asset</a>
<a href="#contenturl(homepageText)">Link to content asset</a>

Template Syntax

Apart from using the variables which you defined in your Template Schema you can also make use of conditions, loops and expressions.

ID Selectors and Colors

The templating engine currently cannot distinguish ID selectors and colors (starting with a hashtag) from the templating engine’s own tags. Therefore ID Selectors and colors in CSS or Javascript code has to be escaped, using a \ in front of the hash.

Only HEX colors with a character (not a number) following the hashtag must be escaped. In the example below you can see that the color #000 does not need to be escaped , but #fff does.

<div id="section-wrapper"></div>

<style>
  \#section-wrapper {
    background-color: #000;
    color: \#fff;
  }
</style>

Conditions

By using the #if tag you can write conditions in your template to check if a variable exists.

#if(headline): The headline is #(headline) #else: No headline was provided. #endif

You can also compare your template variable with a specific value and add several conditions to your code by using the #elseif tag.

#if(show_button == "yes"): Button is shown #elseif(show_button == "only on mobile"): Button is only shown on mobile
#else: Button is hidden #endif

You can check the length of an array by using the #count tag. If you use a tag as part of your condition, you should omit the # for the inner tag.

#if(count(products) > 0): Your products are shown here #else: There are no products yet #endif

Loops

When you define an array of items in your Template Schema you can use the #for tag to loop over each item. By using #(index) you will get the index (starting at index 0) of the current item in your array.

<ul>
  #for(item in items):
  <li>This is your item #(item) at index: #(index)</li>
  #endfor
</ul>

Expressions

Standard arithmetic operations (+, -, >, <) as well as operators (&&, ||, ==) are available as well.

#if(index > 3): More than three items! #endif

#if(link || button_text ): Show button #endif

Template Schema

In order to expose this to the Live Editor, you will create a Template Schema.

Think of a schema as the piece of info Live Editor needs to build its forms.

We use the standardized JSON Schema

There is a fantastic playground where you can see examples and try yourself: Go to playground

Here is the above variable in the schema:

paragraph_text:
  type: string
  title: Paragraph text
  default: Paragraph text
link_text:
  type: string
  title: Paragraph text
  default: Paragraph text

UI Schema

For the new editor (since April 6th 2020) these need to be declared in the UI Schema as ui:widgets:

• localized This will bring up a HTML editor which enables blog-like text editing including bold style, headlines etc.
• plainTextLocalized (uses a localized plain text editor) This will bring up a plain input field editor that does not change input in any way. Use this if styling is done by site-wide CSS or for variables like product ids where the input must not be changed.
• imageSearch This will make the field an image field. It will bring up the image search component to link up an image

Consider a complex one:

image:
  ui:widget: imageSearch
image_alt_text:
  ui:widget: plainTextLocalized
fact_categories:
  items:
    title:
      ui:widget: localized
    facts:
      items:
        text:
          ui:widget: localized
        link:
          product_id:
            ui:widget: localized