Examples: Page Components
- Download Examples
- Example 1 - Top-level Menu
- Example 2 - Nested Menu
- Example 3 - Breadcrumbs
- Example 4 - Sidebar
- Example 5 - Containerless Scripts
- More Examples
Download Examples
All the Page Component Examples are available as a jsHarmony CMS Theme. You can download the theme using the button above and extract it into a site SFTP folder to install. A video tutorial for installing templates can be found in Getting Started Tutorial 1.
Example 1 - Top-level Menu
First, define the Page Component in the "templates/components" folder. Since this menu example only lists the top-level menu items, we can use a "jsh-foreach-item" tag to loop over "menu.topItems".
This example will require a menu to be define in the Menus tab, with a menu tag "main".
The "href", "onclick", "target", "class", and "style" properties are set based on the Menu definition.
<script type="text/cms-component-config">
{
"target": "page"
}
</script>
<a jsh-foreach-item="menu.topItems" href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>" class="<%-item.class%>" style="<%~item.style%>">
<%-item.html%>
</a>In order to add the menu to the page, the "cms-component" tag is added to the Page Template with the "cms-menu-tag" attribute:
<div cms-component="01_TopLevelMenu" cms-menu-tag="main"></div>Example 2 - Nested Menu
A render template can be used to render multiple levels of menu items.
First, use the "jsh-template" tag to define a render template. Call "renderTemplate" on the "menu.tree" property, to pass a list of menu items and their children to the render template.
Inside of the render template, call "jsh-foreach-item" on each item to render each item in the list.
Finally, call "renderTemplate" on the "item.children" property to recursively render the menu item's children:
<script type="text/cms-component-config">
{
"target": "page"
}
</script>
<ul jsh-template="menu-items">
<li jsh-foreach-item>
<a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>" class="<%~item.class%>" style="<%~item.style%>"><%-item.html%></a>
<%-renderTemplate('menu-items', item.children)%>
</li>
</ul>
<%-renderTemplate('menu-items', menu.tree)%>
In order to add the menu to the page, the "cms-component" tag is added to the Page Template with the "cms-menu-tag" attribute:
<div cms-component="02_NestedMenu" cms-menu-tag="main"></div>Example 3 - Breadcrumbs
Breadcrumbs are rendered based on the sitemap.
In the example below, first the "jsh-for-item" tag is used to only render the breadcrumbs if "sitemap.currentItem" is defined. If a page is not in the sitemap, then the breadcrumbs will not be rendered.
Next, "jsh-foreach-item" is called on the breadcrumbs, and a " / " separator is added between each item:
<script type="text/cms-component-config">
{
"target": "page"
}
</script>
<div jsh-for-item="sitemap.currentItem">
<a jsh-foreach-item="sitemap.breadcrumbs" jsh-foreach-item-separator=" / " href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a>
</div>In order to add the breadcrumbs to the page, the "cms-component" tag is added to the Page Template:
<div cms-component="03_Breadcrumbs""></div>Example 4 - Sidebar
A sidebar can be rendered based on the sitemap. The "relative sitemap" is generated based on the current page. The top-level item in the sidebar can have the "Hide Parents" option checked in the sitemap to make it the top-most item in that group of pages. The "sitemap.tree" property will then list that only that item and its children.
Since the sidebar can have multiple levels, in the example below, a "jsh-template" is used to recursively render the sidebar items, similar to the Nested Menu example above.
<script type="text/cms-component-config">
{
"target": "page"
}
</script>
<ul jsh-template="sitemap-items">
<li jsh-foreach-item>
<a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>" class="<%~item.class%>" style="<%~item.style%>"><%-item.html%></a>
<%-renderTemplate('sitemap-items', item.children)%>
</li>
</ul>
<%-renderTemplate('sitemap-items', sitemap.tree)%>In order to add the sidebar to the page, the "cms-component" tag is added to the Page Template:
<div cms-component="04_Sidebar"></div>Example 5 - Containerless Scripts
In HTML, scripts added to the HEAD element cannot be nested within other tags. This poses a challenge when using script tags with Page Components.
Use the "cms-component-remove-container" attribute to publish Page Components without the container wrapper.
For example, the following component has two script tags:
<script type="text/cms-component-config">
{
"target": "page"
}
</script>
<script type="text/javascript">console.log('Script 1');</script>
<script type="text/javascript">console.log('Script 2');</script>Add the component to the HEAD tag, using the "cms-component-remove-container" attribute:
<script cms-component="05_Scripts" cms-component-remove-container></script>On publish, the "script" wrapper will not be rendered, and only the component content with the two scripts will be added to the HEAD tag:
<script type="text/javascript">console.log('Script 1');</script>
<script type="text/javascript">console.log('Script 2');</script>
More Examples
Additional Page Component examples can be found in the Starter Templates. Open any theme and navigate to the "templates/components" subfolder to see the component source code.
