Creating site navigation from data nodes

This solution has been implemented for Magnolia Shop Module (contributed by fastforward).

The aim is to create menu navigation based on nodes in the data repository. The navigation should be displayed on an existing site as section navigation. This way, when you navigate to the section, product categories defined in data repository will be used as items in the vertical menu.

Note that the breadcrumb is also updated with the product categories.

Assuming we know how the default navigation works in STK, we do the following:

1. Create customized navigation classes. One class will provide the navigation model and the second will define the navigation item that provides us with the item title and URL.
   
   
   See ProductCategoryNavigationModel and ProductCategoryNavigationItem as examples. The getItems method returns the relevant nodes from the data repository. Constructor parameters for both classes depend on what you need for your implementation. In this particular case the parameter is specific to the shop, the shop name, so that we can create a correct link from the data repository.

2. Create a template model class that instantiates the customized navigation and assigns the model class to our template. Doing it this way, you keep the default navigation for all site content that is not part of the shop.
   
   
   See ShopSingletonParagraphTemplateModel where the navigation is instantiated.
   
   

   public ProductCategoryNavigationModel getProductCategoryNavigation() {return new ProductCategoryNavigationModel(getCurrentShop());}

   As we are also customizing the breadcrumb, look at the getBreadcrumb method as well where items from the data repository are appended.
   
   
   Once we have the model class ready, we add it to our template configuration
   
   
   

3. Freemarker templates.
   
   
   We optionally need a new verticalNavigation.ftl.
   The only change in vertical navigation is to call our custom navigation that we created with a new name:

   [@renderNavigation navigation=model.productCategoryNavigation /]

   And we set the template file in the site configuration of our custom template definition:
   
   

From HTML to XML and beyond!

What happens if you need to deliver same content but in different format? Sure you don't want to duplicate content. Well Magnolia CMS provides a feature that with little work lets you deliver same content in any format you need, it could be xml, or even html but optimized for newsletters.

How to do this? You need to select a template definition and add sub templates like in the image below.



This sample is using Magnolia CMS version 3.6 (feature also available for 4.x) with just one sub template defined that will render as xml when I request the page as url.xml and rendered as html when requested as url.html.

Because at the moment, sub templates do not work for paragraphs, in the template file that generates the xml content we will have to iterate through the paragraphs.

In my sample I used jsp, so I iterated main collection within a scriplet, by first getting the active page and then its children:

Content actPage = Resource.getActivePage(request);
if(actPage.hasContent("mainColumnParagraphs")) {
//some code
}

When using freemarker there is no need to use java:

[#list content.main?children as para]
[#assign paragraphContent=para]
[#if para.metaData.template='mgnlTextBox']
[#include "textBox.ftl" ]
[/#if]
[/#list]

One of my use cases was to generate a newsletter template for the web and a simpler one that would be supported by the mail clients.