Managing Nodes in a Page Hierarchy

The following example shows how to create a node with simple navigation to content pages. Although the node does not have a content page associated with it, it does have a URL Key which can be referenced elsewhere in your site.

For example, you can create a node called “Press Releases” with navigation to individual press releases. Then, include the link on your “About Us” page. Or how about a node with links to articles from back issues of your newsletter?

image
Content Page with Navigation

Step 1: Create a Node

  1. From the Admin Menu, select CMS > Pages > Manage Hierarchy.
  2. Click the Add Node button.
  3. In the Page Properties section, type a Title for the onde. Then create a suitable URL Key using all lowercase characters, with hyphens instead of spaces.
  4. Click the Save Pages Hierarchy button to save the node. The node appears as a folder in the tree.

Step 2: Add Pages to the Node

  1. In the hierarchy tree, click to open the node.
  2. Scroll down to the CMS Pages section, and select the checkbox of each page you want to include.
  3. image
    Select CMS Pages
  4. Click the Add Selected Pages to Tree button. Each selected page appears in the tree below the node folder.
image
Add Selected Pages to Tree

Step 3: Add Navigation

  1. In the tree, click to open the node.
  2. In the Pagination Options for Nested Pages section, set Enable Pagination to "Yes."
  3. In the Navigation Menu Options section, set Enable Navigation Menu to "Yes."
  4. Scroll back up to the Node Properties section, and click the Preview link.
  5. Click the Save Pages Hierarchy button to save the settings.

Linking to a Node

The CMS Hierarchy Node Link app type gives you the ability to place a link to a content node, almost anywhere in your store.

Step 1: Set Up the Page Hierarchy

Create the initial page hierarchy tree.

Step 2: Create a Frontend App

To begin, complete the first three steps of creating a frontend app.

  • Select the CMS Hierarchy Node Link app type.
  • Specify the page and location where it belongs.
  • Choose the template.

Step 3: Configure the Link

  1. Open the frontend app you created in the previous step.
  2. In the panel on the left, select Frontend App Options. Then, do the following:
  3. image
    Frontend App Options
    1. In the Anchor Custom Text field, enter a descriptive link name for the app. If left blank, the Node or Page name is used.
    2. In the Anchor Custom Title field, enter the text that appears when someone hovers over the link.
    3. Click the Select Page or Node button. Then, select the page or node that you want to appear when someone clicks the link.
    image
    Select Node
  4. Click the Save button to save your settings.

Discussion:

RSS: New Article posts

Explore the Knowledge Base