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

Anonymous said…
Very informative, thanks for sharing bro
Anonymous said…
Nice Steps to described
Sandhya said…
Simple & understandable, thanks for sharing
Anonymous said…
Very informative bro,very helpful to me,thank you.

Popular posts from this blog

Latest SAP Commerce (Hybris) Interview Questions

Steps to Install SAP Commerce Cloud 2211/Install SAP Hybris 2105 to 2211

OCC Webservices in SAP Commerce(hybris) 2211 using YOCC template – Part 1