Identifying the components in the JSP Page:

1.Creating a customized JSP:

1.1 Using Existing Impex data’s
1.2 Creating Page Template
1.3 Creating Sections:
1.4 Creating Content Slots:
1.5 Use of existing Cms-content in the Sample Date Path :
1.6 Creating components for inserting them into the content slots:
1.7 Inserting the components into Content Slots:
1.8 Importing or adding the impex into the system
1.9 Verifying the Imported Data’s in the system:
1.10 Creating the Actual JSP Page:
Identifying the components in the JSP Page:

Basically w.r.t yhbirs framework each and every jsp page is split into different sections.

Each section will have content slots and each content slot will have compenents inside them.

A sample jsp page is shown below :

Here <cms:pageSlot position="Section1"  is a section where it will contain lot of content slots, where there will
be lot of components inside each content slot. Similarly each sections such as section2A,2B,etc.. describes their own
content slots and their components.
At last all these sections together forms a single JSP page which is shown in the view.

To find each components inside the each content slot we need to go through the following steps.
First,for any jsp page we need to find the pagetemplate for that.

How can we identify the pagetemplates for each jsp page ?

First we need to identify the home page Jsp .With the help of Jsp find the template which is used for composing the
Jsp page.Search for the Jsp page name in the cms-content.impex

For example :
If the home page of a website is landingLayout2Page.jsp search for the same jsp name in the impex file to find
the actual template which is used to map that jsp page.

For example it will be mapped like this

INSERT_UPDATE PageTemplate;
$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default
=true]
;;LandingPage2Template;Landing Page 2 Template;layout/landingLayout2Page;CategoryPage,ContentPage

Use of PageTemplate file :

It is just a name which will be mapped to the mapped to a specific .vm file, ContentSlotName &
ContentSlotForTemplate,where all these three sections will be related to each with the help of the name which is
template.
This template act as an interlinking medium which glues the .vm file contect slot and contetnslotfortemplate.

A template contains different sections

For example a typical Template file example LandingPage2Template contains the following sections
SiteLogo
HeaderLinks
SearchBox
MiniCart
NavigationBar
TopContent
SideContent
BodyContent
BottomContent
Footer
TopHeaderSlot
BottomHeaderSlot
How these sections can be indetified ?Where can I find these sections ?
Well, if you are creating a page for the first time you need to create all these sections by your own.
But for now, we will be showing you how to find the different types of sections inside a template.
Goto HMC >websites >serach for “homepage”>selec the preferred site that you want to debug [for example its
shown below ]
Now select electronicscontentcatalog You will get this page
Scroll down the same page to find the start page which is the home page in this case. Edit the same page as shown
below
The edited page will be shown as below

You can find the Label named “PageTemplate” .

In the above scenario it will be Landing Page2 Template and edit the same page as shown above.

Now the edited screen will be like the one shown below
** You can see all Available contents slots which is shown above.
In the same page if you scroll down you can find

Which by reading you can understand yourself.

So if you want to find, what is the actual component which is inside the content slot for example
Which is given above you, edit the site logo content slot to find the component which is inside that.
Edit in new window will show the below one

Edit the content slot as shown below

Edited window will be like the one shown below

Now edit the component Site logo component

A new window will open and click the administration tab to see the actual logo which is mapped to this component.

In here the image named “commerce accelerator” is the one shown which will be shown in the actual website. You
can find all the details such as given below
Real filename: logo-hybris.png
Mime Type: image/png
Identifier: /images/theme/logo-hybris.png

Now if you want to modify the image or any details related to the image you can edit like the one shown below
Once you edit the it will be like

** You can upload your own image and I believe you need to synchronise which is given at the top and I believe by
doing so, the new image will be reflected in the website after necessary restarts or procedures.

**In the same way you can able to find all the components inside each content slot
which is located inside a section.

Lets get an idea about the .vm file.Well, what is an .vm file ?

It’s kind of an Jsp page where it will be used in the cmscockpit.Use of cmscockpit will be explained later.
But in a nutshell .vm file acts as renderer for bringing the sections of the Jsp page[for example is
landingLayout2Page.jsp ] into the cmscockpit.

Generally,how can we find .vm file related to a Jsp ?

Now, take the LandingPage2Template and search the same impex file for the .vm file .
For example the LandingPage2Template will be mapped to a .vm file like this.
;;LandingPage2Template;$jarResourceCms/structure-view/structure_landingPage2Template.vm
Here structure_landingPage2Template.vm is the actual vm file which is mapped.
A sample VM file is shown below.

1.Creating a customized JSP:

To create a customized JSP page we need to follow certain steps such as creating sections, content slots,
components.

This is basically done with the help of importing the impex file into the system.

First we need understand what are the existing datas out box which we can make us of.

For an ecommerce application there are two impex files which we can makes use of their data’s.The file name is
cmc-content.impex

The cms-content.impex in the coredata file contains the following details.

$contentCatalog=electronicsContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersi
on.version[default=Online])[default=$contentCatalog:Online]

1.1 Using Existing Impex data’s:

$contentCatalog  It’s a reference variable which refers to “electronicsContentCatalog” in the above case.
$contentCV is an macro which is referring the catalogue version and the application should be always marked as
Online like the one give above default=$contentCatalog:Online

UPDATE
GenericItem[processor=de.hybris.platform.commerceservices.impex.impl.ConfigPropertyImportProcessor];pk[unique
=true]
$jarResourceCms=$config-jarResourceCmsValue

So the next step is to create a Page Template with the help of Impex.
Sample Impex snippet for adding a new Page Template in to the system.

1.2 Creating Page Template :

INSERT_UPDATE PageTemplate;
$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default
=true]
;;SampleHomePageTemplate;SampleHomePage Template;layout/SampleHomePage;ContentPage

Here, the Page template that we are creating is “SampleHomePage Template” and the JSP page that you are
mapping is “SampleHomePage”

1.3 Creating Sections:

Now we have created the page template, next steps is to create Sections. Sample Impex snippet to create a section is

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true]
[default='SampleHomePageTemplate'];validComponentTypes(code);compTypeGroup(code)
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox

As you can see, we are creating three sections [site logo, header links, and search box] inside the page template.
We are mapping the Sections with the Page template in the first line [default='SampleHomePageTemplate'];

1.4 Creating Content Slots:

Next: Creating the content slots

# Create Content Slots

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active
;;contentslot1;contentslot1;true
;;contentslot2;contentslot2;true
;;contentslot3;contentslot3;true

The above snippet creates three content slots.

1.5 Use of existing Cms-content in the Sample Date Path :

$contentCatalog=electronicsContentCatalog
$contentCatalogName=Electronics Content Catalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersi
on.version[default=Online])[default=$contentCatalog:Online]
$productCatalog=electronicsProductCatalog
$productCatalogName=Electronics Product Catalog
$productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Online'])
[unique=true,default=$productCatalog:Online]
$picture=media(code, $contentCV);
$image=image(code, $contentCV);
$media=media(code, $contentCV);
$page=page(uid, $contentCV);
$contentPage=contentPage(uid, $contentCV);
$product=product(code, $productCV)
$category=category(code, $productCV)
$siteResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electronic
sstore/import/sampledata/contentCatalogs/$contentCatalog
$productResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electr
onicsstore/import/sampledata/productCatalogs/$productCatalog
$jarResourceCms=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electro
nicsstore/import/sampledata/cockpits/cmscockpit

The above impex code are the generic details, which we can make use of them in our impex.
The macro’s whichever is mentioned above will be referring to the existing data’s in the system.

All we are going to do is to make use of these macros which will be referred in some part of the impex say while we are creating a
components or anything we can make us of them.

1.6 Creating components for inserting them into the content slots:

Next step is to create components to insert them into the contents lot.

For example I am going to create a component in each content slot which means each content slot will have one component inside
each section.

I am going to create a SimpleBannerComponent where, I will be mapping the banner component to the specific content slot.

# Site Logo Component

INSERT_UPDATE SimpleBannerComponent;
$contentCV[unique=true];uid[unique=true];name;&componentRef;urlLink;$media
;;SiteLogoComponent1;Site Logo Component1;SiteLogoComponent1;"/";/images/theme/logo-hybris.png
;;SiteLogoComponent2;Site Logo Component2;SiteLogoComponent2;"/";/images/theme/logo-hybris.png
;;SiteLogoComponent3;Site Logo Component3;SiteLogoComponent3;"/";/images/theme/logo-hybris.png

The above snippet is for creating the component we need to add

1.7 Inserting the components into Content Slots:

The below snippet is to insert the component into the content slot

# Content Slots
INSERT_UPDATE ContentSlot;
$contentCV[unique=true];uid[unique=true];cmsComponents(&componentRef)
;;contentslot1;SiteLogoComponent1
;;contentslot2;SiteLogoComponent2
;;contentslot3;SiteLogoComponent3

As you can see we are mapping the each SiteLogoComponent1 with the each contents lot like
;;contentslot1;SiteLogoComponent1

** You have to place all these impex files in a notepad so you can import or copy paste into the system
which is given in the next step.

Here is the complete Impex file which I explained above.

############# core impex starts##############

#
# Import the CMS content for the Electronics site
#
$contentCatalog=electronicsContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersi
on.version[default=Online])[default=$contentCatalog:Online]

# Import modulegen config properties into impex macros

UPDATE
GenericItem[processor=de.hybris.platform.commerceservices.impex.impl.ConfigPropertyImportProcess
or];pk[unique=true]
$jarResourceCms=$config-jarResourceCmsValue

INSERT_UPDATE PageTemplate;
$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);a
ctive[default=true]
;;SampleHomePageTemplate;SampleHomePage Template;layout/SampleHomePage;ContentPage

# Landing Page Templates

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true]
[default='SampleHomePageTemplate'];validComponentTypes(code);compTypeGroup(code)
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox

# Create Content Slots

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active
;;contentslot1;contentslot1;true
;;contentslot2;contentslot2;true
;;contentslot3;contentslot3;true

INSERT_UPDATE ContentSlotForTemplate;
$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)
[unique=true][default='SampleHomePageTemplate'];contentSlot(uid,$contentCV)
[unique=true];allowOverwrite
;;Section1-LandingPage1;SiteLogo;;contentslot1;true
;;Section2-LandingPage1;HeaderLinks;;contentslot2;true
;;Section3-LandingPage1;SearchBox;;contentslot3;true

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

############# core impex ends##############

############# sampledata/initialdata impex starts##############

$contentCatalog=electronicsContentCatalog
$contentCatalogName=Electronics Content Catalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersi
on.version[default=Online])[default=$contentCatalog:Online]
$productCatalog=electronicsProductCatalog
$productCatalogName=Electronics Product Catalog
$productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Online'])
[unique=true,default=$productCatalog:Online]
$picture=media(code, $contentCV);
$image=image(code, $contentCV);
$media=media(code, $contentCV);
$page=page(uid, $contentCV);
$contentPage=contentPage(uid, $contentCV);
$product=product(code, $productCV)
$category=category(code, $productCV)
$siteResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electronic
sstore/import/sampledata/contentCatalogs/$contentCatalog
$productResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electr
onicsstore/import/sampledata/productCatalogs/$productCatalog
$jarResourceCms=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electro
nicsstore/import/sampledata/cockpits/cmscockpit

# Site Logo Component

INSERT_UPDATE SimpleBannerComponent;
$contentCV[unique=true];uid[unique=true];name;&componentRef;urlLink;$media
;;SiteLogoComponent1;Site Logo Component1;SiteLogoComponent1;"/";/images/theme/logo-hybris.png
;;SiteLogoComponent2;Site Logo Component2;SiteLogoComponent2;"/";/images/theme/logo-hybris.png
;;SiteLogoComponent3;Site Logo Component3;SiteLogoComponent3;"/";/images/theme/logo-hybris.png

# Content Slots
INSERT_UPDATE ContentSlot;
$contentCV[unique=true];uid[unique=true];cmsComponents(&componentRef)
;;contentslot1;SiteLogoComponent1
;;contentslot2;SiteLogoComponent2
;;contentslot3;SiteLogoComponent3

############# sampledata/initialdata impex ends##############

1.8 Importing or adding the impex into the system:

There are two ways you can import the impex into the system :

1.Copy pasted the impex file in the import section.

2.Add all your impex related details in to the CMS-Content.impex file which is inside the path
resources\electronicsstore\import\coredata\contentCatalogs\electronicsContentCatalog\cms-content.impex

Important points to be noted while your importing into the system.

Make sure you the order of the impex code that you created in hierarchy level.

Creating Page  Creating Page Template  Creating Sections  Creating contenctslots  creating components  inserting the
components into content slot  Creating content slot templates

The reason being you may face an error while importing the impex into the system if the impex code is not in hierarchy level since
there will references to the super objects.

Goto  http://localhost:9001/console/impex/import

Copy your connects and paste into the area as shown below.
Click the button Import Content.The system will automatically imports the data’s into its DB.

**NOTE :

If you adding the impex to cms file you need to put ant all and restart the server and updated the actual project where the CMS-
Content file is located in the HMC.In this case it will be electronics store.

Goto  HMC http://localhost:9001/hmc/hybris  platform  update  select electronic store in this case and update it.

1.9 Verifying the Imported Data’s in the system:

As you know we have created May item here.Just to make sure whether all detail are imported into the system.

Goto  HMC http://localhost:9001/hmc/hybris

I have created a Page template named SampleHomePageTemplate.

In HMC goto  Page Templates and search for the same template given below.You can find the template that has been created
under the catalogue.
**In the same way you can verify the sections, content slots, pages and components.

1.10 Creating the Actual JSP Page:

Just create an JSP page that includes the sections that you just imported.
For the above impex, the JSP that we created will be like this

If you see the sections that I added in the impex is given here, so that all the components and the content slots will be rendering
during runtime.

Once the JSP page is created stop the server and do an ant all and restart the server and do necessary updates.
Once these steps are done

Goot http://localhost:9001/cmscockpit/index.zul Select the site name  Search for samplehomepage that we created
The things that you need to note is highlighted in yellow in the above screen shot.

Now search
Double click the Sample home page.You can see the three content slots that we added.Click the lock symbol in each of the content
slot to see the components inside it.

Unlocking them will look like below.

You can find the components which we inserted is shown.

There is an eye icon which I highlighted above if you click that you can see the preview of the JSP page that you just created!!

If you want your page to be the homepage for the website

Goto  HMC  WCMS  Search for the page that you created

** You have to enable the homepage option as shown below.Make sure to disable this option for the existing
homepage