Register a Template

This topic applies to

Applies to

Commerce Web Stores

Extension developers can register a template to be available as an alternative layout for any page type in SMT using the Extensibility API. To do this, call the following method, which is part of the PageType component:

registerTemplate()

Extension developers can specify templates to be alternative layouts for one or more page types. When an SMT admin creates a new page or enhances a pre-existing page, they can choose the default layout or select from a list of alternative layouts. These layouts are defined by the active extension.

To register a template as an alternative layout:

  1. Open your extension’s entry point JavaScript file.

  2. In the mountToApp() method, register an alternative template using the PageType Component and the registerTemplate() method.

    Your code should look similar to the following example:

    //...
    return  {
       mountToApp: function mountToApp (container)
       {
    
       //...
    
          var pageType = container.getComponent('PageType');
    
            pageType.registerPageType({
               //...
               // Optional page type registration code.
               //...
                }
            });
    
          pageType.registerTemplate({
              pageTypes: ['MyNewPageType', 'cms-landing-page']    
          ,   template: {
                   name: 'My_New_Alternate_Template.tpl'             
                ,   displayName: 'My Alternate Layout'
                ,   thumbnail: Utils.getAbsoluteUrl(getExtensionAssetsPath('img/two_column123.png'))
             }
    
          });
       }
    };
    //...
    • pageTypes – This array declares the page types that accept the template as an alternative layout. The page types listed here can be any currently supported or newly registered page types. For a list of supported, core page types, see Supported Page Types.

    • template – This object defines the template and accepts the following parameters:

      • name – This string declares the template file name to be used as an alternative layout for the listed pageTypes.

      • displayName – This string specifies the user interface label for the layout, as rendered in SMT.

      • thumbnail – This string specifies the location of the thumbnail image for the layout, as rendered in SMT. This must be an absolute URL. As a best practice, introduce thumbnails as assets and use the getAbsoluteUrl and getExtensionAssetsPath helpers to define the path. See HTML Helpers for details.

  3. Save your entry point JavaScript file.

Note

Registered templates must exist as part of the extension. For more information on creating templates to take advantage of SMT content areas, see SMT Templates and Areas.


In this example code snippet, SMT provides my-new-alternate-template.tpl as an optional layout when an SMT admin creates or edits a page with MyNewPageType or cms-landing-page as the page type. This layout displays alternate-thumbnail.png as the thumbnail image with the label: My Alternate Layout. In SMT, you see the default layout and thumbnail for the page type as shown in the example below.