Creating new page in Hybris

Hybris provides different Page Types that we can use to create our own page.
Some of the Hybris provided page types are Content Page,Category page,Product Page etc

We need to choose the required page type for our new page based on our requirement.

We can see the available page types in the cms2-items.xml file
hybris\bin\ext-content\cms2\resources\cms2-items.xml


Let’s say our requirement is to display the offers to the users in a separate page.

Now we have to create a new page and link it in the site so that user can click that link and our offer page gets displayed with the fresh offers.

Now wait a moment, have we decided what type of page we are going to use?
No, so let’s decide it.

Our requirement is to just display some of the offers on the Offer page

.
So it just needs some content to be displayed which includes either offers image, offers text etc.

So let’s use Content Page Type for our new page.

We know that, creating a new page requires a page template without which we can’t create a new page.

Now we have 2 options to choose the page template.

1) Use an existing page template: It’s simple, we can use any one of the suitable page template for our offers page
2) create a new page template: Here we need to create a new page template and then we can use it.

Let’s go ahead with 2nd option.

Now we have decided the Page template and Page type for creating our new offer page.


Let’s list out the steps involved in creating the new page


Step 1
Create a new page template
Step 2
Create a new page
Step 3
Create content slot names
Step 4
Create the components required for the page
Step 5
Create content slots
Step 6
Link the content slots for the page template
Step 7
Add a link of offers page to the navigation bar
Step 8
Create a new controller to handle the request on click of navigation Node
Step 9
Create a template jsp
Step 10
Add offer images in the folder with required size
Step 11
Write an impex for creating media and link them to the Banner component
Step 12
Update the components and links with their Names in English locale
Step 13
Check the output

Step 1

Create a new page template

  1. INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
  2. ;;OffersPageTemplate;Offers Page Template;offers/offersLayoutPage;ContentPage
INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;OffersPageTemplate;Offers Page Template;offers/offersLayoutPage;ContentPage

We have created a new page template with the frontendTemplateName as offersLayoutPage


Step 2

Create a new content page
Add following impex in below file
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\coredata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex

  1. INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
  2. ;;offersContentPage;Offers Content Page;OffersPageTemplate;offersCMSPage
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;offersContentPage;Offers Content Page;OffersPageTemplate;offersCMSPage

We have created a new content page which uses the above page template created in Step 1


Step 3


Create content slot names required for the template

  1. INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='OffersPageTemplate'];validComponentTypes(code);compTypeGroup(code)
  2. ;SiteLogo;;;logo
  3. ;HeaderLinks;;;headerlinks
  4. ;SearchBox;;;searchbox
  5. ;MiniCart;;;minicart
  6. ;NavigationBar;;;navigation
  7. ;Footer;;;footer
  8. ;TopHeaderSlot;;;wide
  9. ;offersParagraph;;;wide
  10. ;offersBanner;;;wide
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='OffersPageTemplate'];validComponentTypes(code);compTypeGroup(code)
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox
;MiniCart;;;minicart
;NavigationBar;;;navigation
;Footer;;;footer
;TopHeaderSlot;;;wide
;offersParagraph;;;wide
;offersBanner;;;wide

We have created the content slot names for the OffersPageTemplate


Step 4


Create components

  1. INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
  2. ;;offerHeadingComponent;Offers Heading information;offerHeadingComponent;;;;Special Offers for you;
  3.  
  4. INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;urlLink
  5. ;;offer1BannerComponent;Offer1 Banner Component;offer1BannerComponent;;;;/Categories/Streetwear-men/T-Shirts-men/Eclipse-Tee-SS/p/300737415
  6. ;;offer2BannerComponent;Offer2 Banner Component;offer2BannerComponent;;;;Categories/Accessories-women/Watches-women/Biarritz-Women/p/111114_black
  7. ;;offer3BannerComponent;Offer3 Banner Component;offer3BannerComponent;;;;Categories/Accessories/Caps/Ginga-Cap/p/300604624
INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
;;offerHeadingComponent;Offers Heading information;offerHeadingComponent;;;;Special Offers for you;

INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;urlLink
;;offer1BannerComponent;Offer1 Banner Component;offer1BannerComponent;;;;/Categories/Streetwear-men/T-Shirts-men/Eclipse-Tee-SS/p/300737415
;;offer2BannerComponent;Offer2 Banner Component;offer2BannerComponent;;;;Categories/Accessories-women/Watches-women/Biarritz-Women/p/111114_black
;;offer3BannerComponent;Offer3 Banner Component;offer3BannerComponent;;;;Categories/Accessories/Caps/Ginga-Cap/p/300604624

We have created 1 paragraph component and 3 banner components for the offer page
In banner components, we have given the link of the products where we are redirecting on click of each of those banner images.


Step 5


Create content slots

  1. INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
  2. ;;offersParagraphSlot;Offer Paragraph Slot;true;offerHeadingComponent
  3. ;;offersBannerSlot;Offer Banner Slot;true;offer1BannerComponent,offer2BannerComponent,offer3BannerComponent
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;offersParagraphSlot;Offer Paragraph Slot;true;offerHeadingComponent
;;offersBannerSlot;Offer Banner Slot;true;offer1BannerComponent,offer2BannerComponent,offer3BannerComponent

Now we have created the content slots and linked them to the components that it can hold.


Step 6


Link the content slots for the offer page template

  1. INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='OffersPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
  2. ;;SiteLogo-OffersPage;SiteLogo;;SiteLogoSlot;true
  3. ;;HomepageLink-OffersPage;HomepageNavLink;;HomepageNavLinkSlot;true
  4. ;;NavigationBar-OffersPage;NavigationBar;;NavigationBarSlot;true
  5. ;;MiniCart-OffersPage;MiniCart;;MiniCartSlot;true
  6. ;;Footer-OffersPage;Footer;;FooterSlot;true
  7. ;;HeaderLinks-OffersPage;HeaderLinks;;HeaderLinksSlot;true
  8. ;;SearchBox-OffersPage;SearchBox;;SearchBoxSlot;true
  9. ;;TopHeaderSlot-OffersPage;TopHeaderSlot;;TopHeaderSlot;true
  10. ;;BottomHeaderSlot-OffersPage;BottomHeaderSlot;;BottomHeaderSlot;true
  11. ;;PlaceholderContentSlot-OffersPage;PlaceholderContentSlot;;PlaceholderContentSlot;true
  12. ;;offersParagraphSlot-offersPage;offersParagraph;;offersParagraphSlot;true
  13. ;;offersBannerSlot-offersPage;offersBanner;;offersBannerSlot;true
INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='OffersPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;SiteLogo-OffersPage;SiteLogo;;SiteLogoSlot;true
;;HomepageLink-OffersPage;HomepageNavLink;;HomepageNavLinkSlot;true
;;NavigationBar-OffersPage;NavigationBar;;NavigationBarSlot;true
;;MiniCart-OffersPage;MiniCart;;MiniCartSlot;true
;;Footer-OffersPage;Footer;;FooterSlot;true
;;HeaderLinks-OffersPage;HeaderLinks;;HeaderLinksSlot;true
;;SearchBox-OffersPage;SearchBox;;SearchBoxSlot;true
;;TopHeaderSlot-OffersPage;TopHeaderSlot;;TopHeaderSlot;true
;;BottomHeaderSlot-OffersPage;BottomHeaderSlot;;BottomHeaderSlot;true
;;PlaceholderContentSlot-OffersPage;PlaceholderContentSlot;;PlaceholderContentSlot;true
;;offersParagraphSlot-offersPage;offersParagraph;;offersParagraphSlot;true
;;offersBannerSlot-offersPage;offersBanner;;offersBannerSlot;true

We have linked the content slots and content slot names for the offer page template


Step 7


Add a link of offers page to the navigation bar

Create a new navigation node called Offer
When customer clicks on it, it should take to the offers page.

Add following impex in below file
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex

  1. INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);children(uid,$contentCV)[mode=append];links(uid, $contentCV);&nodeRef
  2. ;OfferNavigationNode;;Offers Navigation Node;ApparelUKNavNode;;OffersLink;OfferNavigationNode
  3.  
  4. INSERT_UPDATE NavigationBarComponent;$contentCV[unique=true];uid[unique=true];name;wrapAfter;link(uid, $contentCV);styleClass;navigationNode(uid,$contentCV);dropDownLayout(code)[default='AUTO']
  5. ;;OffersNavigationBarComponent;Offers Navigation Bar Component;10;OffersLink;;OfferNavigationNode;;
  6.  
  7. INSERT_UPDATE NavigationBarCollectionComponent;$contentCV[unique=true];uid[unique=true];name;components(uid, $contentCV);&componentRef
  8. ;;NavBarComponent;Navigation Bar Collection Component;BrandsBarComponent,StreetwearBarComponent,SnowBarComponent,AccessoriesBarComponent,StreetwearYouthBarComponent,SpecialOffersBarComponent,OffersNavigationBarComponent;NavBarComponent
  9.  
  10. INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;category(code, $productCV);target(code)[default='sameWindow'];;
  11. ;;OffersLink;Offers Link;/offers;;;;
INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);children(uid,$contentCV)[mode=append];links(uid, $contentCV);&nodeRef
;OfferNavigationNode;;Offers Navigation Node;ApparelUKNavNode;;OffersLink;OfferNavigationNode

INSERT_UPDATE NavigationBarComponent;$contentCV[unique=true];uid[unique=true];name;wrapAfter;link(uid, $contentCV);styleClass;navigationNode(uid,$contentCV);dropDownLayout(code)[default='AUTO']
;;OffersNavigationBarComponent;Offers Navigation Bar Component;10;OffersLink;;OfferNavigationNode;;

INSERT_UPDATE NavigationBarCollectionComponent;$contentCV[unique=true];uid[unique=true];name;components(uid, $contentCV);&componentRef
;;NavBarComponent;Navigation Bar Collection Component;BrandsBarComponent,StreetwearBarComponent,SnowBarComponent,AccessoriesBarComponent,StreetwearYouthBarComponent,SpecialOffersBarComponent,OffersNavigationBarComponent;NavBarComponent

INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;category(code, $productCV);target(code)[default='sameWindow'];;
;;OffersLink;Offers Link;/offers;;;;


Step 8


Create a new controller to handle the request on click of navigation Node

  1. package org.training.storefront.controllers.pages;
  2.  
  3. import de.hybris.platform.acceleratorstorefrontcommons.controllers.pages.AbstractPageController;
  4. import de.hybris.platform.cms2.exceptions.CMSItemNotFoundException;
  5. import de.hybris.platform.cms2.model.pages.ContentPageModel;
  6.  
  7. import org.springframework.context.annotation.Scope;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.ui.Model;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RequestMethod;
  12.  
  13. @Controller
  14. @Scope("tenant")
  15. @RequestMapping("/offers")
  16. public class OffersPageController extends AbstractPageController
  17. {
  18.     private static final String OFFERS_CMS_PAGE = "offersCMSPage";
  19.  
  20.     @RequestMapping(method = RequestMethod.GET)
  21.     public String getOffers(final Model model) throws CMSItemNotFoundException
  22.     {
  23.         final ContentPageModel offersCMSPage = getContentPageForLabelOrId(OFFERS_CMS_PAGE);
  24.         storeCmsPageInModel(model, offersCMSPage);
  25.         setUpMetaDataForContentPage(model, offersCMSPage);
  26.         return getViewForPage(model);
  27.     }
  28. }
package org.training.storefront.controllers.pages;

import de.hybris.platform.acceleratorstorefrontcommons.controllers.pages.AbstractPageController;
import de.hybris.platform.cms2.exceptions.CMSItemNotFoundException;
import de.hybris.platform.cms2.model.pages.ContentPageModel;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@Scope("tenant")
@RequestMapping("/offers")
public class OffersPageController extends AbstractPageController
{
	private static final String OFFERS_CMS_PAGE = "offersCMSPage";

	@RequestMapping(method = RequestMethod.GET)
	public String getOffers(final Model model) throws CMSItemNotFoundException
	{
		final ContentPageModel offersCMSPage = getContentPageForLabelOrId(OFFERS_CMS_PAGE);
		storeCmsPageInModel(model, offersCMSPage);
		setUpMetaDataForContentPage(model, offersCMSPage);
		return getViewForPage(model);
	}
}

This controller handles the request coming from the click of Offers navigation node and then redirect to the corresponding template JSP.


Step 9


Create a template jsp
hybris\bin\custom\training\trainingstorefront\web\webroot\WEB-INF\views\desktop\pages\offers\offersLayoutPage.jsp

  1. <%@ page trimDirectiveWhitespaces="true" %>
  2. <%@ taglib prefix="template" tagdir="/WEB-INF/tags/desktop/template" %>
  3. <%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags" %>
  4. <%@ taglib prefix="common" tagdir="/WEB-INF/tags/desktop/common" %>
  5.  
  6. <template:page pageTitle="${pageTitle}">
  7.     <div id="globalMessages">
  8.         <common:globalMessages/>
  9.     </div>
  10.    
  11.    
  12.         <cms:pageSlot position="offersParagraph" var="feature" element="div" class="offersBannerParagraph">
  13.         <cms:component component="${feature}" />
  14.     </cms:pageSlot>
  15.     <div class="offerBannerParentDiv">
  16.     <cms:pageSlot position="offersBanner" var="feature" element="div" class="span-24 section5 offersBannerImg">
  17.     <div class="offerBannerChildDiv">
  18.         <cms:component component="${feature}" />
  19.         </div>
  20.     </cms:pageSlot>
  21.     </div>
  22. </template:page>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="template" tagdir="/WEB-INF/tags/desktop/template" %>
<%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags" %>
<%@ taglib prefix="common" tagdir="/WEB-INF/tags/desktop/common" %>

<template:page pageTitle="${pageTitle}">
	<div id="globalMessages">
		<common:globalMessages/>
	</div>
	
	
		<cms:pageSlot position="offersParagraph" var="feature" element="div" class="offersBannerParagraph">
		<cms:component component="${feature}" />
	</cms:pageSlot>
	<div class="offerBannerParentDiv">
	<cms:pageSlot position="offersBanner" var="feature" element="div" class="span-24 section5 offersBannerImg">
	<div class="offerBannerChildDiv">
		<cms:component component="${feature}" />
		</div>
	</cms:pageSlot>
	</div>
</template:page>

Now we have created the offersLayoutPage.jsp page and added all the content slots to display the offers.

Also update the below css properties in helper.css for UI changes
hybris\bin\custom\training\trainingstorefront\web\webroot\_ui\desktop\common\css\helper.css

  1. .offersBannerImg{
  2.     width:auto;
  3.     height:auto;
  4. }
  5. .offersBannerParagraph{
  6.     font-weight: bold;
  7.     margin-right: 5px;
  8.     color: #0000ff;
  9.     text-align: center;
  10.     font-size: 50px;
  11.     font-family: "Brush Script MT";
  12.     font-family:"Formal436 BT", "Arial Black", sans-serif
  13.    
  14. }
  15.  
  16. .offerBannerParentDiv{
  17.     text-align: center;
  18. }
  19.  
  20. .offerBannerChildDiv{
  21.     display: inline-block;
  22.     top:20px;
  23.     margin-left: 40px;
  24. }
.offersBannerImg{
	width:auto;
	height:auto;
}
.offersBannerParagraph{
	font-weight: bold;
	margin-right: 5px;
	color: #0000ff;
	text-align: center;
	font-size: 50px;
	font-family: "Brush Script MT";
	font-family:"Formal436 BT", "Arial Black", sans-serif
	
}

.offerBannerParentDiv{
	text-align: center;
}

.offerBannerChildDiv{
	display: inline-block;
	top:20px;
	margin-left: 40px;
}


Step 10


Add 3 offer images in the below folder with required size
\hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\images\banners\offers

Step 11


Write an impex for creating media and link them to the Banner component
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content_en.impex

  1. INSERT_UPDATE
  2. Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];folder(qualifier)[default='images'];altText
  3. ;;OffersBanner1.jpg;$siteResource/images/banners/offers/OffersBanner1.jpg;;;"Grab the Offer soon"
  4. ;;OffersBanner2.png;$siteResource/images/banners/offers/OffersBanner2.png;;;"Grab the Offer soon"
  5. ;;OffersBanner3.jpg;$siteResource/images/banners/offers/OffersBanner3.jpg;;;"Grab the Discounted Sale soon"
  6.  
  7. UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];$picture[lang=$lang]
  8. ;;offer1BannerComponent;OffersBanner1.jpg
  9. ;;offer2BannerComponent;OffersBanner2.png
  10. ;;offer3BannerComponent;OffersBanner3.jpg
INSERT_UPDATE
Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];folder(qualifier)[default='images'];altText
;;OffersBanner1.jpg;$siteResource/images/banners/offers/OffersBanner1.jpg;;;"Grab the Offer soon"
;;OffersBanner2.png;$siteResource/images/banners/offers/OffersBanner2.png;;;"Grab the Offer soon"
;;OffersBanner3.jpg;$siteResource/images/banners/offers/OffersBanner3.jpg;;;"Grab the Discounted Sale soon"

UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];$picture[lang=$lang]
;;offer1BannerComponent;OffersBanner1.jpg
;;offer2BannerComponent;OffersBanner2.png
;;offer3BannerComponent;OffersBanner3.jpg


Step 12


Now update the components and links with their Names in English locale
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content_en.impex

  1. UPDATE CMSNavigationNode;$contentCV[unique=true];uid[unique=true];title[lang=en]
  2. ;;OfferNavigationNode;"Offers"
  3. UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];linkName[lang=en]
  4. ;;OffersLink;"Offers"
UPDATE CMSNavigationNode;$contentCV[unique=true];uid[unique=true];title[lang=en]
;;OfferNavigationNode;"Offers"
UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];linkName[lang=en]
;;OffersLink;"Offers"


Step 13


Check the output

Access the below url
localhost:9001/trainingstorefront/?site=apparel-uk
Apparel Home Page with Offers Node

Now we can see that new navigation node called Offers is displayed in the Navigation bar

Now click on that Offers node,we can see the below image

Apparel Offers page

Here we can see that our new offers page is getting displayed with 4 components, 1 being paragraph component and other 3 being banner components.

Now on click of any of the banner component, it will take to the corresponding offered products page that we have linked in impex.


Displaying the new template in CMS Cockpit


We need to modify the VM files to display any newly created component or page in the CMS cockpit

Let’s create a new file called structure_offersPageTemplate.vm as below
\hybris\bin\custom\training\trainingcore\resources\trainingcore\import\cockpits\cmscockpit\structure-view\structure_offersPageTemplate.vm

  1. <div>
  2.     <table width="100%" cellspacing="0" style="margin:0;padding:0;table-layout:auto;border:1px solid #1E4EBF;">
  3.         <tbody>
  4.             <tr>
  5.                 <td colspan="5" class="structureViewSection">
  6.                     <cockpit code="TopHeaderSlot"/>
  7.                 </td>
  8.             </tr>
  9.             <tr>
  10.                 <td colspan="2" height="125px" width="35%" rowspan="2" class="structureViewSection">
  11.                     <cockpit code="SiteLogo" />
  12.                 </td>
  13.                 <td colspan="2" class="structureViewSection">
  14.                     <cockpit code="HeaderLinks" />
  15.                     <cockpit code="SearchBox" />
  16.                 </td>
  17.                 <td width="20%" rowspan="2" class="structureViewSection">
  18.                     <cockpit code="MiniCart" />
  19.                 </td>
  20.             </tr>
  21.             <tr>
  22.                 <td colspan="5" class="structureViewSection">
  23.                     <cockpit code="NavigationBar" />
  24.                 </td>
  25.             </tr>
  26.             <tr>
  27.                 <td colspan="5" class="structureViewSection">
  28.                     <cockpit code="offersParagraph" />
  29.                 </td>
  30.             </tr>
  31.             <tr>
  32.                 <td colspan="5" class="structureViewSection">
  33.                     <cockpit code="offersBanner"/>
  34.                 </td>
  35.             </tr>
  36.            
  37.             <tr>
  38.                 <td height="270px" colspan="5" class="structureViewSection">
  39.                     <cockpit code="Footer" />
  40.                 </td>
  41.             </tr>
  42.         </tbody>
  43.     </table>
  44.     <div style="width:100%; border-top: 2px solid #bbb" class="cmsContentEditor">
  45.         <cockpit code="editor" />
  46.     </div>
  47. </div>
<div>
	<table width="100%" cellspacing="0" style="margin:0;padding:0;table-layout:auto;border:1px solid #1E4EBF;">
		<tbody>
			<tr>
				<td colspan="5" class="structureViewSection">
					<cockpit code="TopHeaderSlot"/>
				</td>
			</tr>
			<tr>
				<td colspan="2" height="125px" width="35%" rowspan="2" class="structureViewSection">
					<cockpit code="SiteLogo" />
				</td>
				<td colspan="2" class="structureViewSection">
					<cockpit code="HeaderLinks" />
					<cockpit code="SearchBox" />
				</td>
				<td width="20%" rowspan="2" class="structureViewSection">
					<cockpit code="MiniCart" />
				</td>
			</tr>
			<tr>
				<td colspan="5" class="structureViewSection">
					<cockpit code="NavigationBar" />
				</td>
			</tr>
			<tr>
				<td colspan="5" class="structureViewSection">
					<cockpit code="offersParagraph" />
				</td>
			</tr>
			<tr>
				<td colspan="5" class="structureViewSection">
					<cockpit code="offersBanner"/>
				</td>
			</tr>
			
			<tr>
				<td height="270px" colspan="5" class="structureViewSection">
					<cockpit code="Footer" />
				</td>
			</tr>
		</tbody>
	</table>
	<div style="width:100%; border-top: 2px solid #bbb" class="cmsContentEditor">
		<cockpit code="editor" />
	</div>
</div>

We also need to give the VM file link to the template through impex as below
hybris\bin\ext-data\apparelstore\resources\apparelstore\import\coredata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex

  1. UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];velocityTemplate[translator=de.hybris.platform.commerceservices.impex.impl.FileLoaderValueTranslator]
  2. ;;OffersPageTemplate;$jarResourceCms/structure-view/structure_offersPageTemplate.vm
UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];velocityTemplate[translator=de.hybris.platform.commerceservices.impex.impl.FileLoaderValueTranslator]
;;OffersPageTemplate;$jarResourceCms/structure-view/structure_offersPageTemplate.vm

Now access the CMS cockpit using the url http://localhost:9001/cmscockpit/index.zul

We can see that Offers Content Page is getting listed under Apparel-UK content catalog

Open the same and we can see our newly added components as well
Apparel Offers Page

Open those components by double clicking on it, we can change some of the properties of those components dynamically.


Please find below the impex for 6.2 version (contributed by Ravi S)
Impex in the steps 9,10 and 11 have to be added in cms-responsive-content.impex.

  1. $contentCatalog=apparel-ukContentCatalog
  2. $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
  3. $siteResource=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/contentCatalogs/$contentCatalog
  4. $jarResourceCms=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/cockpits/cmscockpit
  5. $productCatalog=apparelProductCatalog
  6. $productCatalogName=Apparel Product Catalog
  7. $productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Staged'])[unique=true,default=$productCatalog:Staged]
  8. $picture=media(code, $contentCV)
  9. $lang=en
  10.  
  11.  
  12. # 1.Offer page template.
  13. INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
  14. ;;OffersPageTemplate;Offers Page Template;offers/offersLayoutPage;ContentPage
  15.  
  16. # 2.Add velocity template
  17. UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];velocityTemplate[translator=de.hybris.platform.commerceservices.impex.impl.FileLoaderValueTranslator]
  18. ;;OffersPageTemplate;$jarResourceCms/structure-view/structure_offersPageTemplate.vm
  19.  
  20. # 3.Create contnet solt names
  21. INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='OffersPageTemplate'];validComponentTypes(code);compTypeGroup(code)
  22. ;TopHeaderSlot;;;wide
  23. ;SiteLogo;;;logo
  24. ;HeaderLinks;;;headerlinks
  25. ;SearchBox;;;searchbox
  26. ;MiniCart;;;minicart
  27. ;NavigationBar;;;navigation
  28. ;offersParagraph;;;wide
  29. ;offersBanner;;;wide
  30. ;Footer;;;footer
  31.  
  32. # 4. Create content page
  33. INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
  34. ;;offersContentPage;Offers Content Page;OffersPageTemplate;offersCMSPage
  35.  
  36. # 5. Link content soltnames with page template.
  37. INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='OffersPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
  38. ;;SiteLogo-OffersPage;SiteLogo;;SiteLogoSlot;true
  39. ;;HomepageLink-OffersPage;HomepageNavLink;;HomepageNavLinkSlot;true
  40. ;;NavigationBar-OffersPage;NavigationBar;;NavigationBarSlot;true
  41. ;;MiniCart-OffersPage;MiniCart;;MiniCartSlot;true
  42. ;;Footer-OffersPage;Footer;;FooterSlot;true
  43. ;;HeaderLinks-OffersPage;HeaderLinks;;HeaderLinksSlot;true
  44. ;;SearchBox-OffersPage;SearchBox;;SearchBoxSlot;true
  45. ;;TopHeaderSlot-OffersPage;TopHeaderSlot;;TopHeaderSlot;true
  46. ;;BottomHeaderSlot-OffersPage;BottomHeaderSlot;;BottomHeaderSlot;true
  47. ;;offersParagraphSlot-offersPage;offersParagraph;;offersParagraphSlot;true
  48. ;;offersBannerSlot-offersPage;offersBanner;;offersBannerSlot;true
  49.  
  50. # 6.create components and link them with content slots
  51.  
  52. INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
  53. ;;offerHeadingComponent;Offers Heading information;offerHeadingComponent;;;;Special Offers for you;
  54.  
  55. INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;urlLink
  56. ;;offer1BannerComponent;Offer1 Banner Component;offer1BannerComponent;;;;/Categories/Streetwear-men/T-Shirts-men/Eclipse-Tee-SS/p/300737415
  57. ;;offer2BannerComponent;Offer2 Banner Component;offer2BannerComponent;;;;/Categories/Accessories-women/Watches-women/Biarritz-Women/p/111114_black
  58. ;;offer3BannerComponent;Offer3 Banner Component;offer3BannerComponent;;;;/Categories/Accessories/Caps/Ginga-Cap/p/300604624
  59.  
  60. # 7.Create the link component.
  61. INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;category(code, $productCV);target(code)[default='sameWindow'];;
  62. ;;OffersLink;Offers Link;/offers;;;;
  63.  
  64. # 8.create content slots and add the components to the content solts
  65. INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
  66. ;;offersParagraphSlot;Offer Paragraph Slot;true;offerHeadingComponent
  67. ;;offersBannerSlot;Offer Banner Slot;true;offer1BannerComponent,offer2BannerComponent,offer3BannerComponent
  68.  
  69. # 9. Create navigation node and add the cms link component.
  70. INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;&nodeRef;
  71. ;OfferNavigationNavNode;;Offers Navigation Node;OfferNavigationNavNode
  72.  
  73. # 10. Create navigation node
  74. INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);&nodeRef;children(uid,$contentCV)
  75. ;ApparelUKCategoryNavNode;;Categories;ApparelUKNavNode;ApparelUKCategoryNavNode;BrandsNavNode,StreetwearNavigationNode,SnowNavigationNode,AccessoriesNavigationNode,StreetwearYouthNavNode,OfferNavigationNavNode
  76.  
  77. # 11. Entries of the above navigation nodes ##
  78. INSERT_UPDATE CMSNavigationEntry;uid[unique=true];$contentCV[unique=true];name;navigationNode(&nodeRef);item(CMSLinkComponent.uid,CMSLinkComponent.$contentCV);
  79. ;OfferNavNodeEntry;;Offer Navigation Node Entry;OfferNavigationNavNode;OffersLink;
  80.  
  81. # 12.Create Media objects for the images.
  82. INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];folder(qualifier)[default='images'];altText
  83. ;;OffersBanner1.jpg;$siteResource/images/banners/offers/OffersBanner1.jpg;;;"Grab the Offer soon"
  84. ;;OffersBanner2.png;$siteResource/images/banners/offers/OffersBanner2.png;;;"Grab the Offer soon"
  85. ;;OffersBanner3.jpg;$siteResource/images/banners/offers/OffersBanner3.jpg;;;"Grab the Discounted Sale soon"
  86.  
  87. # 13. Add the media objects to the banner component, to display the images.
  88. UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];$picture[lang=$lang]
  89. ;;offer1BannerComponent;OffersBanner1.jpg
  90. ;;offer2BannerComponent;OffersBanner2.png
  91. ;;offer3BannerComponent;OffersBanner3.jpg
  92.  
  93. # 14.Add the language for the newly created navigation node and cms link component.
  94. UPDATE CMSNavigationNode;$contentCV[unique=true];uid[unique=true];title[lang=en]
  95. ;;OfferNavigationNavNode;"Offers"
  96. UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];linkName[lang=en]
  97. ;;OffersLink;"Offers"
$contentCatalog=apparel-ukContentCatalog 
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged] 
$siteResource=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/contentCatalogs/$contentCatalog
$jarResourceCms=jar:de.hybris.platform.apparelstore.constants.ApparelstoreConstants&/apparelstore/import/sampledata/cockpits/cmscockpit
$productCatalog=apparelProductCatalog 
$productCatalogName=Apparel Product Catalog 
$productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Staged'])[unique=true,default=$productCatalog:Staged] 
$picture=media(code, $contentCV)
$lang=en


# 1.Offer page template.
INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;OffersPageTemplate;Offers Page Template;offers/offersLayoutPage;ContentPage

# 2.Add velocity template
UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];velocityTemplate[translator=de.hybris.platform.commerceservices.impex.impl.FileLoaderValueTranslator]
;;OffersPageTemplate;$jarResourceCms/structure-view/structure_offersPageTemplate.vm

# 3.Create contnet solt names
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='OffersPageTemplate'];validComponentTypes(code);compTypeGroup(code)
;TopHeaderSlot;;;wide
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox
;MiniCart;;;minicart
;NavigationBar;;;navigation
;offersParagraph;;;wide
;offersBanner;;;wide
;Footer;;;footer

# 4. Create 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']
;;offersContentPage;Offers Content Page;OffersPageTemplate;offersCMSPage

# 5. Link content soltnames with page template.
INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='OffersPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;SiteLogo-OffersPage;SiteLogo;;SiteLogoSlot;true
;;HomepageLink-OffersPage;HomepageNavLink;;HomepageNavLinkSlot;true
;;NavigationBar-OffersPage;NavigationBar;;NavigationBarSlot;true
;;MiniCart-OffersPage;MiniCart;;MiniCartSlot;true
;;Footer-OffersPage;Footer;;FooterSlot;true
;;HeaderLinks-OffersPage;HeaderLinks;;HeaderLinksSlot;true
;;SearchBox-OffersPage;SearchBox;;SearchBoxSlot;true
;;TopHeaderSlot-OffersPage;TopHeaderSlot;;TopHeaderSlot;true
;;BottomHeaderSlot-OffersPage;BottomHeaderSlot;;BottomHeaderSlot;true
;;offersParagraphSlot-offersPage;offersParagraph;;offersParagraphSlot;true
;;offersBannerSlot-offersPage;offersBanner;;offersBannerSlot;true

# 6.create components and link them with content slots

INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
;;offerHeadingComponent;Offers Heading information;offerHeadingComponent;;;;Special Offers for you;

INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;urlLink
;;offer1BannerComponent;Offer1 Banner Component;offer1BannerComponent;;;;/Categories/Streetwear-men/T-Shirts-men/Eclipse-Tee-SS/p/300737415
;;offer2BannerComponent;Offer2 Banner Component;offer2BannerComponent;;;;/Categories/Accessories-women/Watches-women/Biarritz-Women/p/111114_black
;;offer3BannerComponent;Offer3 Banner Component;offer3BannerComponent;;;;/Categories/Accessories/Caps/Ginga-Cap/p/300604624

# 7.Create the link component.
INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;category(code, $productCV);target(code)[default='sameWindow'];;
;;OffersLink;Offers Link;/offers;;;;

# 8.create content slots and add the components to the content solts
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;offersParagraphSlot;Offer Paragraph Slot;true;offerHeadingComponent
;;offersBannerSlot;Offer Banner Slot;true;offer1BannerComponent,offer2BannerComponent,offer3BannerComponent

# 9. Create navigation node and add the cms link component.
INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;&nodeRef;
;OfferNavigationNavNode;;Offers Navigation Node;OfferNavigationNavNode

# 10. Create navigation node
INSERT_UPDATE CMSNavigationNode;uid[unique=true];$contentCV[unique=true];name;parent(uid, $contentCV);&nodeRef;children(uid,$contentCV)
;ApparelUKCategoryNavNode;;Categories;ApparelUKNavNode;ApparelUKCategoryNavNode;BrandsNavNode,StreetwearNavigationNode,SnowNavigationNode,AccessoriesNavigationNode,StreetwearYouthNavNode,OfferNavigationNavNode

# 11. Entries of the above navigation nodes ##
INSERT_UPDATE CMSNavigationEntry;uid[unique=true];$contentCV[unique=true];name;navigationNode(&nodeRef);item(CMSLinkComponent.uid,CMSLinkComponent.$contentCV);
;OfferNavNodeEntry;;Offer Navigation Node Entry;OfferNavigationNavNode;OffersLink;

# 12.Create Media objects for the images.
INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];folder(qualifier)[default='images'];altText
;;OffersBanner1.jpg;$siteResource/images/banners/offers/OffersBanner1.jpg;;;"Grab the Offer soon"
;;OffersBanner2.png;$siteResource/images/banners/offers/OffersBanner2.png;;;"Grab the Offer soon"
;;OffersBanner3.jpg;$siteResource/images/banners/offers/OffersBanner3.jpg;;;"Grab the Discounted Sale soon"
 
# 13. Add the media objects to the banner component, to display the images.
UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];$picture[lang=$lang]
;;offer1BannerComponent;OffersBanner1.jpg
;;offer2BannerComponent;OffersBanner2.png
;;offer3BannerComponent;OffersBanner3.jpg

# 14.Add the language for the newly created navigation node and cms link component.
UPDATE CMSNavigationNode;$contentCV[unique=true];uid[unique=true];title[lang=en]
;;OfferNavigationNavNode;"Offers"
UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];linkName[lang=en]
;;OffersLink;"Offers"

About the Author

Founder of javainsimpleway.com
I love Java and open source technologies and very much passionate about software development.
I like to share my knowledge with others especially on technology 🙂
I have given all the examples as simple as possible to understand for the beginners.
All the code posted on my blog is developed,compiled and tested in my development environment.
If you find any mistakes or bugs, Please drop an email to kb.knowledge.sharing@gmail.com

Connect with me on Facebook for more updates

Share this article on