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
2
INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;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
2
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
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
2
3
4
5
6
7
8
9
10
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
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
2
3
4
5
6
7
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
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
2
3
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
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
2
3
4
5
6
7
8
9
10
11
12
13
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
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
2
3
4
5
6
7
8
9
10
11
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;;;;
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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);
    }
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ 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>
<%@ 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
}
.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
2
3
4
5
6
7
8
9
10
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
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
2
3
4
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"
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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>
<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
2
UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];velocityTemplate[translator=de.hybris.platform.commerceservices.impex.impl.FileLoaderValueTranslator]
;;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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$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"
$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

Karibasappa G C (KB)
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