Custom Tags & Modules

SFCC lets you define reusable custom tags with <ismodule>. The ISML language server indexes these declarations so your custom tags complete with their attributes and navigate to the template they render - just like the built-in tags.

Declaring a Custom Tag

An <ismodule> declaration maps a tag name to a template and lists the attributes the tag accepts:

<!-- modules.isml -->
<ismodule
    template="components/productTile"
    name="producttile"
    attribute="product"
    attribute="class"
/>

This declares <isproducttile> - usable anywhere the module file is loaded - passing product and class through to components/productTile.isml.

<!-- using it -->
<isproducttile product="${pdict.product}" class="grid-tile" />

Discovery

The server scans your module files for <ismodule> declarations and records each tag's name, template, and attribute list. By default it looks at files named modules.isml and module.isml.

You can change which files are treated as module definitions with the setting:

{
  "intellij-sfcc.isml.modules.files": ["modules.isml", "module.isml"]
}

What You Get

Once indexed, each custom tag behaves like a first-class ISML tag:

• Tag completion - the custom tag name appears in the <is… completion list.
• Attribute completion - the attributes declared on its <ismodule> complete inside the tag.
• Hover - hovering the tag surfaces its declaration.
• Navigation - Ctrl/Cmd-click the tag (or its template) to open the template it renders. See Navigation.

Related