Adding CMS component in Hybris

When we say we need to add new CMS component to a page, it could be any one of these 2

1) Adding CMS component of existing component type like CMSParagraphComponent,CMSImageComponent , MiniCartComponent etc.

2) Adding CMS component of completely new component type apart from what is provided in Hybris.

Let’s see the first option for now

Let’s say our requirement is to add a new component in Homepage which displays Welcome to the user.
I am using Apparel site for achieving it.

This is our home page before implementing this requirement
Home Page before adding component

What are the steps to achieve this?

1)Decide what type of existing component we need to use for this requirement.
I am going to use CMSParagraphComponent existing type

2)Write an impex statement for adding this new component item type instance.
Note: Since it’s an existing component type, we don’t need to create the controller and jsp for this component

3)Write an impex to link it to the appropriate content slot

4)Run the impexes and make sure to synchronize from Staged to Online(or else run impex with directly online version, only for testing purpose)

5)Modify home page related jsp to have cms tags for new content slot

6)Open the Home page and Verify the page to check new component

Step 1
We have already decided to use new component as of type CMSParagraphComponent as we need to display just a Welcome text.

Step 2
In this step, we need to define the component type instance using the impex as below

  1. INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
  2. ;;welcomeInfoComponent;Welcome information;welcomeInfoComponent;;;;welcome to home page;
INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
;;welcomeInfoComponent;Welcome information;welcomeInfoComponent;;;;welcome to home page;

Add the above impex to cms-content.impex file
(hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex)

In this Impex,we have defined uid of our new Paragraph component as welcomeInfoComponent which is used to link it to the content slot

Step 3
Now let’s add this component to the appropriate content slot

Since we have decided to add this component to the Home Page, let’s check the slots available in Home page.
Then we can either add this component to the existing content slot or we can define the new slot and add it to the new slot.

Let’s define the new content slot for the Home page template

So for templates as we discussed above, we need to add content slot names

Add the below impexes to the cms-content.impex

  1. INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='LandingPage2Template'];validComponentTypes(code);compTypeGroup(code)
  2. ;welcomeInfo;;;wide
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='LandingPage2Template'];validComponentTypes(code);compTypeGroup(code)
;welcomeInfo;;;wide

Here we have defined the position/content slot name for Home page template

Now define the content slot

  1. INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active
  2. ;;welcomeInfoSlot;welcome info slot;true
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active
;;welcomeInfoSlot;welcome info slot;true

Now define the content slot for template as below to link content slot name and content slot

  1. INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='LandingPage2Template'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
  2. ;;WelcomeInfo-LandingPage2;welcomeInfo;;welcomeInfoSlot;true
INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='LandingPage2Template'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;WelcomeInfo-LandingPage2;welcomeInfo;;welcomeInfoSlot;true

Now define the component to the content slot
Add the below impex to the cms-content.impex file(hybris\bin\ext-data\apparelstore\resources\apparelstore\import\sampledata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex)

  1. INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid,$contentCV)
  2. ;;welcomeInfoSlot;welcomeInfoComponent
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid,$contentCV)
;;welcomeInfoSlot;welcomeInfoComponent

Step 4
Run both the cms-content.impex files and make sure its imported successfully
Synchronize the content catalog after importing the impexes.

Step 5
Add this new slot in the landingLayout2Page.jsp page using CMS tags as below

(\trainingstorefront\web\webroot\WEB-INF\views\desktop\pages\layout\landingLayout2Page.jsp)

  1. <div class="welcomeInfo">
  2.     <cms:pageSlot position="welcomeInfo" var="feature">
  3.                 <cms:component component="${feature}" />
  4.     </cms:pageSlot>
  5.     </div>
<div class="welcomeInfo">
	<cms:pageSlot position="welcomeInfo" var="feature">
				<cms:component component="${feature}" />
	</cms:pageSlot>
	</div>

Note: In JSP we always use ContentSlotName as position

We have defined welcomeInfo as the ContentSlotName, so we are using as it is in JSP for position.

Note: The above CMS tag will call the appropriate default controller and load the appropriate component along with the required model attributes.

Also add the below lines in the helper.css for css changes

(trainingstorefront/web/webroot/_ui/desktop/common/css/helper.css)

  1. .welcomeInfo{
  2.     font-weight: bold;
  3.     margin-right: 5px;
  4.     color: #0000ff;
  5. }
.welcomeInfo{
	font-weight: bold;
	margin-right: 5px;
	color: #0000ff;
}

Now Home page has got the new component welcomeInfoComponent under the slot welcomeInfoSlot

Step 6

Open the storefront and check the home page to appear as below
Homepage_after_adding_component

We can see that new component welcome to home page is displayed in the Home Page.


Now how to get this new component in CMS cockpit?

We need to modify the VM files to change the structure of templates in CMS Cockpit.

CMS cockpit before modifying the VM file is as below

Homepage cockpit before adding the content slot

First we need to open the .vm file for the home page template which is structure_landingPage2Template.vm
(hybris\bin\custom\training\trainingcore\resources\trainingcore\import\cockpits\cmscockpit\structure-view\structure_landingPage2Template.vm)

Add the new content slot in the .vm file as below to display it in the cockpit.

  1. <tr>
  2. <td colspan="5" class="structureViewSection">
  3. <cockpit code="welcomeInfo" />
  4. </td>
  5. </tr>
<tr>
<td colspan="5" class="structureViewSection">
<cockpit code="welcomeInfo" />
</td>
</tr>

Add the above code just below the NavigationBar code.

Note: Cockpit code should be same as ContentSlotName

Now run the cms-content.impex(hybris\bin\ext-data\apparelstore\resources\apparelstore\import\coredata\contentCatalogs\apparel-ukContentCatalog\cms-content.impex)

This will load the latest VM file with our modification.

Make sure you synchronize the content catalog after running the impex.

Now access the CMS cockpit and check the Home page

Homepage cockpit after adding the content slot

It shows the new content slot added for the page template with the paragraph component added to it.

We can unlock this component and edit it just like any other Paragraph Component

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