B2c Isml

ISML Skill

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.

Overview

ISML templates are server-side templates that generate HTML. They use special tags prefixed with is and expressions in ${...} syntax to embed dynamic content.

File Location

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

Essential Tags

Conditional Logic

    In Stock

    Pre-order

    Out of Stock

Loops

    
        ${loopstate.count}. ${product.name}
        
            Featured
        
    

Loop status properties:

• count - Iteration number (1-based)
• index - Current index (0-based)
• first - Boolean, true on first iteration
• last - Boolean, true on last iteration
• odd - Boolean, true on odd iterations
• even - Boolean, true on even iterations

Variables

${productName}

Scopes (required): page, request, session, pdict

Output

Include Templates

Decorator Pattern

Base decorator (layouts/pagelayout.isml):

    ${pdict.pageTitle}

    
        
    
    
          
    
    
        
    

Page using decorator:

    
    
        ${pdict.welcomeMessage}
    

Expressions

Expressions use ${...} syntax to embed dynamic values:

${product.name}
${product.price.sales.value}

${product.getAvailabilityModel().isInStock()}

${pdict.myVariable}           
${session.customer.firstName} 
${request.httpParameterMap.pid.stringValue}

${price > 100 ? 'expensive' : 'affordable'}
${firstName + ' ' + lastName}
${quantity * unitPrice}

Built-in Utilities

URLUtils

View

My Account

Home

Resource (Localization)

${Resource.msg('button.addtocart', 'product', null)}

${Resource.msgf('cart.items', 'cart', null, cartCount)}

StringUtils

${StringUtils.truncate(description, 100, '...')}

${StringUtils.formatNumber(quantity, '###,###')}

Custom Modules

Define reusable custom tags in util/modules.isml:

Component template (components/productcard.isml):

    
    ${product.name}
    
        ${product.price.sales.formatted}
    
    
        ${product.rating} stars
    

Caching

Place `` at the beginning of the template.

Content Type

Embedded Scripts

    var ProductMgr = require('dw/catalog/ProductMgr');
    var product = ProductMgr.getProduct(pdict.pid);
    var price = product.priceModel.price;

${price.toFormattedString()}

Best Practice: Keep `` blocks minimal. Move complex logic to controllers or helper scripts.

Comments

    ISML comment - stripped from output.
    Use for documentation and hiding sensitive info.

Tag Location Constraints

Not all ISML tags can be used anywhere. Important constraints:

| Tag | Allowed Location | |-----|------------------| | ` | Must be before DOCTYPE declaration | | | Must be before DOCTYPE declaration | | | Only in | | | Only in , inside | | | Only in , inside | | | Inside | | | Must be within tags | | | Only in ` |

Tags that can be used anywhere: `, , , , , , , , , `.

Best Practices

1. Use `` instead of HTML comments for sensitive info
2. Place `` first in templates that need it
3. Define modules in util/modules.isml for consistency
4. Keep templates simple - move logic to controllers/helpers
5. Use decorators for consistent page layouts
6. Enable caching on cacheable pages with ``
7. Encode output - default encoding prevents XSS

Detailed Reference

For comprehensive tag documentation:

• [Tags Reference](references/TAGS.md) - All ISML tags with examples
• [Expressions Reference](references/EXPRESSIONS.md) - Expression syntax and built-in functions

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: SalesforceCommerceCloud
• Source: SalesforceCommerceCloud/b2c-developer-tooling
• License: Apache-2.0
• Homepage: https://salesforcecommercecloud.github.io/b2c-developer-tooling/

Install and usage instructions live in the source repository linked above.