How to add page to your custom navigation node

You need to make following changes in Impex file

File Name: cms-responsive-content.impex(core data)

1 . Create a Page template

INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]

;;PhonePageTemplate;Phone Page;phone/phone;ContentPage

2 . Create a content page

INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false'];previewImage(code, $contentCV)[default='ContentPageModel__function_preview']

;;phone;Phone Page;PhonePageTemplate;phone

3. Add content slots to page

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default= PhonePageTemplate];validComponentTypes(code);compTypeGroup(code)

;SiteLogo;;;logo

;HeaderLinks;;;headerlinks

;SearchBox;;;searchbox

;MiniCart;;;minicart

;NavigationBar;;;navigation

;TopContent;;;wide

;SideContent;;;narrow

;Footer;;;footer

;TopHeaderSlot;;;wide

;MiddleContent;;;wide

;BottomHeaderSlot;;;wide

;PlaceholderContentSlot;

4. Bind content slots to page template

INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='PhonePageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite

;;SiteLogo-PhonePage;SiteLogo;;SiteLogoSlot;true

;;HomepageLink-PhonePage;HomepageNavLink;;HomepageNavLinkSlot;true

;;NavigationBar-PhonePage;NavigationBar;;NavigationBarSlot;true

;;MiniCart-PhonePage;MiniCart;;MiniCartSlot;true

;;Footer-PhonePage;Footer;;FooterSlot;true

;;HeaderLinks-PhonePage;HeaderLinks;;HeaderLinksSlot;true

;;SearchBox-PhonePage;SearchBox;;SearchBoxSlot;true

;;TopHeaderSlot-PhonePage;TopHeaderSlot;;TopHeaderSlot;true

;;MiddleContentSlot-PhonePage;MiddleContent;;MiddleContentSlot;true

;;BottomHeaderSlot-PhonePage;BottomHeaderSlot;;BottomHeaderSlot;true

;;PlaceholderContentSlot-PhonePage;PlaceholderContentSlot;;PlaceholderContentSlot;true

5. Create a jsp for page template

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="template" tagdir="/WEB-INF/tags/responsive/template"%>

<%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags"%>

<template:page pageTitle="${pageTitle}">

                <h2>Phone item Page</h2>

             

</template:page>

Location for this jsp will be:

/bolgstorefront/web/webroot/WEB-INF/views/responsive/pages/phone/phone.jsp

After the above changes you will find this page linked to your navigation node

In next blog we will learn how to add custom component to our page. 

How to add Custom Node in Navigation Node

Make the following changes in the impex file, anything that starts with $ in impex are known as macros

File Name: cms-responsive-content.impex(sample data)

1.

INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;&linkRef;&componentRef; target(code)[default='sameWindow'];$category;$product;

;;PhoneLink;Phone Link;/phone;PhoneLink;PhoneLin;;;;

2. Now make a Controller for this in you storefront extension

@Controller

@RequestMapping("/phone")

@Scope("tenant")

public class PhonePageController extends AbstractPageController

{

              public static final String PHONE_CMS_PAGE = "phone";

              @RequestMapping(method = RequestMethod.GET)

              public String getPage(final Model model) throws CMSItemNotFoundException

              {

                  final ContentPageModel contentPageModel =                                                  getContentPageForLabelOrId(PHONE_CMS_PAGE);

                             storeCmsPageInModel(model, contentPageModel);

                             setUpMetaDataForContentPage(model, contentPageModel);

                             return getViewForPage(model);

              }

}

3. Create a navigation node

INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);links(&linkRef);&nodeRef

;PhoneNavNode;; Phone;ElectronicsNavNode;PhoneLink;PhoneNavNode

   4. Update the CMS Naviagtion node make the entry of our node"PhoneNavNode"

INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);&nodeRef;children(uid,$contentCV)

;ElectronicsCategoryNavNode;;Categories;ElectronicsNavNode;ElectronicsCategoryNavNode;BrandsNavNode,DigitalCamerasNavNode,FilmCamerasNavNode,HandheldCamcordersNavNode,WebcamsNavNode,PowerSuppliesNavNode,FlashMemoryNavNode,CameraAccessoriesNavNode, PhoneNavNode

INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;&nodeRef;children(uid,$contentCV);links(&linkRef);

;PhoneNavNode;;;PhoneNavNode

5. Now make an entry in CMS Navigation Entry
INSERT_UPDATE CMSNavigationEntry;uid[unique=true];$contentCV[unique=true];name;navigationNode(&nodeRef);item(CMSLinkComponent.uid,CMSLinkComponent.$contentCV);             

;PhoneNavNodeEntry;;Phone Nav Node;PhoneNavNode;PhoneLink;

Now make the following changes in another file 
File name : cms-responsive-content_en.impex(sample data)

1. Update the CMS link component

UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];linkName[lang=$lang]

;;PhoneLink;"Phone"

 2. Update the CMS Navigation Node

UPDATE CMSNavigationNode;$contentCV[unique=true];uid[unique=true];title[lang=$lang]

;;PhoneNavNode;"Phone"

All Above steps  will add your node in Navigation node, now in next blog we will learn how to add page to this custom nav node.