lunes, 29 de agosto de 2011

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.
  1. 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

  1. 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: