Salesforce B2C Commerce 24.7 > Developing Your Site > Page Designer > Create Page and Component Types

Page Designer HTML

The render function of a page type creates the page's HTML markup. Typically, the page type's render function calls an ISML template that uses PageMgr.renderRegion() to render each region of the page.

In this example, a page calls an ISML template. This ISML template renders three regions: header, main, and footer.


         promopage.isml
<html>
   ...
   <isprint value="${PageMgr.renderRegion( pdict.page.getRegion('header') )}" encoding="off"/>
   ...
   <isprint value="${PageMgr.renderRegion( pdict.page.getRegion('main') )}" encoding="off"/>
   ...
   <isprint value="${PageMgr.renderRegion( pdict.page.getRegion('footer') )}" encoding="off"/>
   ...
</html>

Each PageMgr.renderRegion() function in the page ISML finds all assigned and visible components in each region and calls each component’s render function, which in turn calls its own ISML template, as in the following example:


         banner.isml
...
<img width="<!-- calculate it in your component controller using ${pdict.content.size} -->" src="${pdict.content.image.getAbsURL()}" alt="${pdict.content.alt}"/>
<!--
   // if the 'assets.banner' component type had a region 'foobar' we could render it here
   <isprint value="${PageMgr.renderRegion( pdict.component.getRegion('foobar') )}" encoding="off"/>
-->
...

As each region and component is rendered, Page Designer creates an HTML element to wrap the content. You can specify which HTML element to use as the wrapper and which attributes to assign to the wrapper using the dw.experience.RegionRenderSettings and dw.experience.ComponentRenderSettings APIs. For more information, see:

By default, the HTML wrapper for regions and components is div. The default CSS class for regions is experience-region experience-<region_definition_id>. The default CSS class for components is experience-component experience-<componenttype_id>.

Note: Component type ID values include dots, for example, assets.productile. When used in the CSS class name, the dot is replaced with a hyphen, for example,

experience-component
experience-assets-productile

For example, for a region with id my_region and three components, two of type my_component_type_1 and one of type my_component_type_2, the default HTML wrapper is:


         Default Render Settings
<div class="experience-region experience-my_region">
    <div class="experience-component experience-my_component_type_1">
        content of first component (type my_component_type_1) goes here
    </div>
    <div class="experience-component experience-my_component_type_1">
        content of second component (type my_component_type_1) goes here
    </div>
    <div class="experience-component experience-my_component_type_2">
        content of third component (type my_component_type_2) goes here
    </div>
</div>

In some cases, you want a component to have a different style depending on which region contains the component. For example, you define a component type for a product tile that uses default render settings. You define another component type for a carousel, which is a one-region component that scrolls through a number of other components. When the product tile component appears in the carousel, you want it to use different styling specific to the carousel.

You could specify that the HTML wrapper for the carousel uses a custom CSS class called item for the first and second components. Then specify a different CSS class, item active, for the third component, to distinguish it as the active component in the carousel. Here's the HTML wrapper for the carousel.


<div class="carousel-inner">
    <div class="item">
        content of first component (type my_component_type_1) goes here
    </div>
    <div class="item">
        content of second component (type my_component_type_1) goes here
    </div>
    <div class="item active">
        content of third component (type my_component_type_2) goes here
    </div>
</div>

Here's the code to set the custom render settings for the carousel. You could include this code in the render function of the script file for the component.

Note: The Page Designer reference implementation available in GitHub includes helper functionality to streamline this code.

var carousel = component.getRegion('carousel');
  
// set styling for carousel region
var carouselRenderSettings = new dw.experience.RegionRenderSettings();
carouselRenderSettings.setTagName("div");
carouselRenderSettings.setAttributes({"class" : "carousel-inner"});
  
// set carousel item styling (default)
var defaultCarouselComponentRenderSettings = new dw.experience.ComponentRenderSettings();
defaultCarouselComponentRenderSettings.setTagName("div");
defaultCarouselComponentRenderSettings.setAttributes({"class" : "item"});
carouselRenderSettings.setDefaultComponentRenderSettings(defaultCarouselComponentRenderSettings);
  
// set carousel item styling (active one)
var activeCarouselComponent = carousel.visibleComponents[0]; // init the first one as being active
var activeCarouselComponentRenderSettings = new dw.experience.ComponentRenderSettings();
activeCarouselComponentRenderSettings.setTagName("div");
activeCarouselComponentRenderSettings.setAttributes({"class" : "item active"});
carouselRenderSettings.setComponentRenderSettings(activeCarouselComponent, activeCarouselComponentRenderSettings);
 
// render the carousel region
return dw.experience.PageMgr.renderRegion(carousel, carouselRenderSettings);