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
Last updated June 21, 2022
MOMENTVM Documentation
This is the official documentation for MOMENTVM Content Cloud for Salesforce Commerce Cloud.