npx claudepluginhub salesforcecommercecloud/b2c-developer-tooling --plugin b2cThis skill uses the workspace's default tool permissions.
This skill guides you through creating and working with ISML (Isomorphic Markup Language) templates in Salesforce B2C Commerce. ISML templates combine HTML with dynamic server-side tags.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
This skill guides you through creating and working with ISML (Isomorphic Markup Language) templates in Salesforce B2C Commerce. ISML templates combine HTML with dynamic server-side tags.
ISML templates are server-side templates that generate HTML. They use special tags prefixed with is and expressions in ${...} syntax to embed dynamic content.
Templates reside in the cartridge's templates directory:
/my-cartridge
/cartridge
/templates
/default # Default locale
/product
detail.isml
tile.isml
/home
homepage.isml
/util
modules.isml # Custom tag definitions
/fr_FR # French-specific templates
/product
detail.isml
<isif condition="${product.available}">
<span class="in-stock">In Stock</span>
<iselseif condition="${product.preorderable}">
<span class="preorder">Pre-order</span>
<iselse>
<span class="out-of-stock">Out of Stock</span>
</isif>
<isloop items="${products}" var="product" status="loopstate">
<div class="product ${loopstate.odd ? 'odd' : 'even'}">
<span>${loopstate.count}. ${product.name}</span>
<isif condition="${loopstate.first}">
<span class="badge">Featured</span>
</isif>
</div>
</isloop>
Loop status properties:
count - Iteration number (1-based)index - Current index (0-based)first - Boolean, true on first iterationlast - Boolean, true on last iterationodd - Boolean, true on odd iterationseven - Boolean, true on even iterations<!-- Set a variable (scope is required) -->
<isset name="productName" value="${product.name}" scope="page"/>
<!-- Use the variable -->
<span>${productName}</span>
<!-- Remove a variable -->
<isremove name="productName" scope="page"/>
Scopes (required): page, request, session, pdict
<!-- Basic output (HTML encoded by default) -->
<isprint value="${product.name}"/>
<!-- Unencoded output (use carefully) -->
<isprint value="${htmlContent}" encoding="off"/>
<!-- Formatted number -->
<isprint value="${price}" style="CURRENCY"/>
<!-- Formatted date -->
<isprint value="${order.creationDate}" style="DATE_SHORT"/>
<!-- Include local template -->
<isinclude template="product/components/price"/>
<!-- Include with URL (remote include) -->
<isinclude url="${URLUtils.url('Product-GetPrice', 'pid', product.ID)}"/>
Base decorator (layouts/pagelayout.isml):
<!DOCTYPE html>
<html>
<head>
<title>${pdict.pageTitle}</title>
</head>
<body>
<header>
<isinclude template="components/header"/>
</header>
<main>
<isreplace/> <!-- Content inserted here -->
</main>
<footer>
<isinclude template="components/footer"/>
</footer>
</body>
</html>
Page using decorator:
<isdecorate template="layouts/pagelayout">
<isslot id="home-banner" context="global"/>
<div class="homepage-content">
<h1>${pdict.welcomeMessage}</h1>
</div>
</isdecorate>
Expressions use ${...} syntax to embed dynamic values:
<!-- Property access -->
${product.name}
${product.price.sales.value}
<!-- Method calls -->
${product.getAvailabilityModel().isInStock()}
<!-- Built-in objects -->
${pdict.myVariable} <!-- Controller data -->
${session.customer.firstName} <!-- Session data -->
${request.httpParameterMap.pid.stringValue}
<!-- Operators -->
${price > 100 ? 'expensive' : 'affordable'}
${firstName + ' ' + lastName}
${quantity * unitPrice}
<!-- Controller URL -->
<a href="${URLUtils.url('Product-Show', 'pid', product.ID)}">View</a>
<!-- HTTPS URL -->
<a href="${URLUtils.https('Account-Show')}">My Account</a>
<!-- Static resource -->
<img src="${URLUtils.staticURL('/images/logo.png')}" alt="Logo"/>
<!-- Absolute URL -->
<a href="${URLUtils.abs('Home-Show')}">Home</a>
<!-- Get localized string -->
${Resource.msg('button.addtocart', 'product', null)}
<!-- With parameters -->
${Resource.msgf('cart.items', 'cart', null, cartCount)}
<!-- Truncate text -->
${StringUtils.truncate(description, 100, '...')}
<!-- Format number -->
${StringUtils.formatNumber(quantity, '###,###')}
Define reusable custom tags in util/modules.isml:
<!-- Definition in util/modules.isml -->
<ismodule template="components/productcard"
name="productcard"
attribute="product"
attribute="showPrice"
attribute="showRating"/>
<!-- Usage in any template -->
<isinclude template="util/modules"/>
<isproductcard product="${product}" showPrice="${true}" showRating="${true}"/>
Component template (components/productcard.isml):
<div class="product-card">
<img src="${product.image.url}" alt="${product.name}"/>
<h3>${product.name}</h3>
<isif condition="${pdict.showPrice}">
<span class="price">${product.price.sales.formatted}</span>
</isif>
<isif condition="${pdict.showRating && product.rating}">
<span class="rating">${product.rating} stars</span>
</isif>
</div>
<!-- Cache for 24 hours -->
<iscache type="relative" hour="24"/>
<!-- Daily cache (expires at midnight) -->
<iscache type="daily" hour="0" minute="0"/>
<!-- Vary cache by parameter -->
<iscache type="relative" hour="1" varyby="price_promotion"/>
Place <iscache> at the beginning of the template.
<!-- Set content type (must be first in template) -->
<iscontent type="text/html" charset="UTF-8"/>
<!-- For JSON responses -->
<iscontent type="application/json" charset="UTF-8"/>
<!-- For XML -->
<iscontent type="application/xml" charset="UTF-8"/>
<isscript>
var ProductMgr = require('dw/catalog/ProductMgr');
var product = ProductMgr.getProduct(pdict.pid);
var price = product.priceModel.price;
</isscript>
<span>${price.toFormattedString()}</span>
Best Practice: Keep <isscript> blocks minimal. Move complex logic to controllers or helper scripts.
<!-- HTML comment (visible in source) -->
<iscomment>
ISML comment - stripped from output.
Use for documentation and hiding sensitive info.
</iscomment>
Not all ISML tags can be used anywhere. Important constraints:
| Tag | Allowed Location |
|---|---|
<iscontent> | Must be before DOCTYPE declaration |
<isredirect> | Must be before DOCTYPE declaration |
<isprint> | Only in <body> |
<isbreak> | Only in <body>, inside <isloop> |
<iscontinue> | Only in <body>, inside <isloop> |
<isnext> | Inside <isloop> |
<isreplace> | Must be within <isdecorate> tags |
<isactivedatahead> | Only in <head> |
Tags that can be used anywhere: <isif>, <isloop>, <isinclude>, <isset>, <isremove>, <iscache>, <iscomment>, <ismodule>, <iscookie>, <isstatus>.
<iscomment> instead of HTML comments for sensitive info<iscontent> first in templates that need itutil/modules.isml for consistency<iscache>For comprehensive tag documentation: