How to Add a New Navigation Node and Page in SAP Commerce (Hybris).
Beside of "My Coupons" Navigation Node I want to create My Test Node ,then link it to new custom My Test Page
Step 1: Identitfy the Parent Node is MyAccountNavNode
Take reference from location:
/customercouponaddon/resources/customercouponaddon/import/contentCatalogs/electronicsContentCatalog/cms-responsive-content.impex
(or)
/customerinterestsaddon/resources/customerinterestsaddon/import/contentCatalogs/electronicsContentCatalog/cms-content.impex
Step 2: Create a CMS Link Component because the CMS Link Component represents a clickable link on the storefront.
Step 3: Create a Navigation Node and Entry because navigation nodes and entries to make the link accessible through menus.
Step 4: Create a Content Page.
Step 5: Create a JSP Include Component because we can add a component to include custom JSP logic.
Step 6: Define Content Slots.
Step 7: Map Slots to the Page i.e Connect the content slots to the my-test page
Step 8: Add Localization ,provide localized titles for the page and linkName
Step 9: Run above in both Staged and Online Version through Hac
Step 10: Create a JSP File i.e Create the accountTest.jsp file under the following directory: /samplestorefront/web/webroot/WEB-INF/views/responsive/pages/account/accountTest.jsp
Here im adding just normal text :
Hello This is Test Page------From Sap Commerce Cloud Simplified--------------
Step 10: Add a method getTestPage method in AccountPageController
Location: /samplestorefront/web/src/com/hybris/simple/storefront/controllers/pages/AccountPageController.java
Take reference from location:
/customercouponaddon/resources/customercouponaddon/import/contentCatalogs/electronicsContentCatalog/cms-responsive-content.impex
(or)
/customerinterestsaddon/resources/customerinterestsaddon/import/contentCatalogs/electronicsContentCatalog/cms-content.impex
Step 2: Create a CMS Link Component because the CMS Link Component represents a clickable link on the storefront.
$contentCatalog=electronicsContentCatalog $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
INSERT_UPDATE CMSLinkComponent ; $contentCV[unique=true] ; uid[unique=true] ; name ; url ; &linkRef ; target(code)[default='sameWindow'] ; ; MyTestLink ; MyTestLink ; /my-account/my-test ; MyTestLink ;
Step 3: Create a Navigation Node and Entry because navigation nodes and entries to make the link accessible through menus.
INSERT_UPDATE CMSNavigationNode ; uid[unique=true] ; $contentCV[unique=true] ; name ; parent(uid, $contentCV) ; links(&linkRef) ; &nodeRef ; MyTestNavNode ; ; MyTestNavNode ; MyAccountNavNode ; ; MyTestNavNode
INSERT_UPDATE CMSNavigationEntry ; uid[unique=true] ; $contentCV[unique=true] ; name ; navigationNode(&nodeRef) ; item(&linkRef) ; ; MyTestNavNodeEntry ; ; MyTestNavNodeEntry ; MyTestNavNode ; MyTestLink ;
Step 4: 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'] ; ; my-test ; My Test Page ; AccountPageTemplate ; my-test
Step 5: Create a JSP Include Component because we can add a component to include custom JSP logic.
INSERT_UPDATE JspIncludeComponent ; $contentCV[unique=true] ; uid[unique=true] ; name ; page ; actions(uid,$contentCV) ; &componentRef ; ; MyTestComponent ; My Test Component ; accountTest.jsp ; ; MyTestComponent
Step 6: Define Content Slots.
INSERT_UPDATE ContentSlot ; $contentCV[unique=true] ; uid[unique=true] ; name ; active ; cmsComponents(&componentRef) ; ; ; ; BodyContent-my-test ; Body Content Slot for My Test ; true ; MyTestComponent ; ; ; ; ; SideContent-my-test ; Side Content Slot for My Test ; true ; ; ; ;
Step 7: Map Slots to the Page i.e Connect the content slots to the my-test page
INSERT_UPDATE ContentSlotForPage ; $contentCV[unique=true] ; uid[unique=true] ; position[unique=true] ; page(uid,$contentCV)[unique=true][default='my-test'] ; contentSlot(uid,$contentCV)[unique=true] ; ; ; ; SideContent-my-test ; SideContent ; ; SideContent-my-test ; ; ; ; ; BodyContent-my-test ; BodyContent ; ; BodyContent-my-test ; ; ;
Step 8: Add Localization ,provide localized titles for the page and linkName
$contentCatalog=electronicsContentCatalog $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged] $lang=en UPDATE CMSLinkComponent ; $contentCV[unique=true] ; uid[unique=true] ; linkName[lang=$lang] ; ; MyTestLink ; "My Test" UPDATE ContentPage ; $contentCV[unique=true] ; uid[unique=true] ; title[lang=$lang] ; ; my-test ; "My Test Page"
Step 9: Run above in both Staged and Online Version through Hac
Step 10: Create a JSP File i.e Create the accountTest.jsp file under the following directory: /samplestorefront/web/webroot/WEB-INF/views/responsive/pages/account/accountTest.jsp
Here im adding just normal text :
Hello This is Test Page------From Sap Commerce Cloud Simplified--------------
Step 10: Add a method getTestPage method in AccountPageController
Location: /samplestorefront/web/src/com/hybris/simple/storefront/controllers/pages/AccountPageController.java
@RequestMapping(value = "/my-test", method = RequestMethod.GET)
public String getOffers(final Model model) throws CMSItemNotFoundException {
final ContentPageModel offersCMSPage = getContentPageForLabelOrId("my-test");
storeCmsPageInModel(model, offersCMSPage);
setUpMetaDataForContentPage(model, offersCMSPage);
return getViewForPage(model);
}
Step 11: Do ant all and Hybris-Server Up
Access electronics link : https://localhost:9002/samplestorefront/?site=electronics&clear=true
Go to Wcms Site Creation Link: How to Create Custom Site using WCMS in SAP Commerce(Hybris) 2211
Comments