Tutorial 9 - Page Components

 A full reference for Page Components is available in the Components Templates Documentation.

Page Components

Detailed documentation for Content Component creation, config settings, render templates, and examples is available in the Component Templates Reference.

Page Components are Components that are part of the Page Template, as opposed to inside of editable areas.

Some examples of Page Components are Menus, Sidebars, and Breadcrumb components.

We'll make a Page Component for the slideout menu.

Since we already have the element designed in the page template, we'll start by turning the menu into a component by adding the "cms-component-template" script wrapper:

<script type="text/cms-component-template">

Next, we'll add the component config - we'll give it an ID and we'll need to set the "target" to "page"

<cms-component-config>
{
  "id": "sidebar_menu",
  "target": "page",
}
</cms-component-config>

Now that the menu was moved to the component, it won't show up in the page.

To get it to render in the page, we'll need to add a component instance to the page:

<nav id="menu" cms-component="sidebar_menu"></nav>

We'll also need to remove the "nav" container from the component template itself, since the component template will be used to just render the nav body.

The next step, we'll need to connect this component to the menu items.

We'll need to define the menu in the menu tab.

The tag defines the unique ID of the menu.  Let's set the tag to "sidebar".

And let's add a few menu items.

Home
About

Now, we can go back and link that menu with the component instance, by adding the "cms-menu-tag" attribute to the component instance:

cms-menu-tag="sidebar"

Since we connected the menu to the component, the component now has the "menu" variable, we can use to render the items:

<ul class="links">
  <li jsh-foreach-item="menu.topItems"><a href="<%~item.href%>" onclick="<%~item.onclick%>" target="<%~item.target%>"><%-item.html%></a></li>
</ul>

We'll use a "jsh-foreach-item" attribute to loop over the menu items, and we'll use the EJS container slurp tags to remove the attributes entirely if they are blank.

Next, let's move the component into a separate file "sidebar_menu.html".  We can remove the ID, since the ID can be auto-populated based on the name.  The script wrapper should also be removed when moving the component into the separate file.

Let's add the menu to the other template as well.

Site Config

Finally, if you are packaging this template for others to use, you want to make that sidebar menu a requirement.

To do that, we can add the file "templates/site_config.json"

And define the menu there:

{
  "menus": [
    { "name": "Sidebar", "tag": "sidebar" }
  ]
}

Now, let's see what happens if we delete the menu.

If we go back to the Menus tab, it will ask us if we want to auto-create the menu.

If we click "Yes", the menu will be added back.  We'll still need to add back the items because we deleted them.