WCMS Overview

In Hybris, the entire UI of the storefront is managed through WCMS concept.

We see in many web applications where view is one JSP file and it will have some tag files or JSPs included inside the main JSP file to fulfill the UI requirement(of course CSS and java script will be there).

In hybris, we have all the above things but it is defined with some extra configuration which is controlled by WCMS module.

When we look at the hybris storefront, all the UI which we see is defined using WCMS concept.

Let’s see different terms used in WCMS which are used for defining the UI structure of the site.

WCMS jargons

1)Page Template
2)content slot name
3)content slot
4)page
5)component

Page Template:
Page template defines the blueprint or the layout of the pages.
It defines the number of content slots and their names required for that template.
Any page which uses this template will get all those content slots and the layout as defined in the template.

see below diagram for sample page template
Sample Page Template

This page template has 4 content slots named as header,footer,sidebar and main content.
Now any page which uses this page template will also have the same number of content slots.

Content slot name:
It’s the name of the content slot which basically defines the position within a page template.
One page template will have many content slot names.
Name of the content slot is used with CMS tags in JSP.
Each content slot we define will be linked to the content slot names.

Content slot:
It contains the list of CMS components, hence it’s called as a container of the components
It can be assigned to a page template using ContentSlotForPageTemplate
It can also be assigned to a page using ContentSlotForPage

Page:
It’s the actual web page which displays the information on the site.
There are different pages available based on what type of information they display on the site.
Types of pages include Content page ,product page,category page etc.

Remember all the page types extend AbstractPage existing type.

We can also create our own page types based on the requirement.

See below diagram for sample page

Sample pages

Component:
Component often called as CMS component which holds the small chunk of information in WCMS.

Most of the components extend the SimpleCMSComponent which extends AbstractCMSComponent
There are lot of components which hybris has already provided which includes
CMSLinkComponent,CMSImageComponent,CMSParagraphComponent etc.

We can also create custom CMS component.

see below diagram for some of the CMS components

Sample components


Now Lets See the below diagram on how all these things are linked to each other

Sample Pages with components

In the above diagram , We have 1 page template and 2 pages which are using the same page template

Each page define their own content slots for the content slot names provided by page template and respective components are added to each of the content slot.

So we can see that, structure of the 2 pages remains same but components inside the slot will be different for each page.

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