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

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

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

Template Syntax

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

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 (uses a HTML editor)
  • plainTextLocalized (uses a localized plain text editor)
  • imageSearch (for MOMENTVMs Dynamic Images)

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

Last updated April 06, 2020


MOMENTVM Documentation

This is the official documentation for MOMENTVM Content Cloud for Salesforce Commerce Cloud.

© 2021, MOMENTVM Content Cloud GmbH