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
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
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
Now Lets See the below diagram on how all these things are linked to each other
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.
Hey!
How can I catch a “create” event in the wcms cockpit? Just need to do some customization
Hi GC thanks a lot for Sharing your knowledges. thanks again ๐
Hi KB, whatever you provided documents on your site got very good knowledge on hybris and i suggested yours site to so many friends, i am very thankful.
Kindly provide basics document on back office customization.
Thank you Vinay !!
Sure, I will try to update it whenever i get time.
Happy learning ๐
Whatever Knowledge you have shared related to Hybris..its gr8 and very helpful..Can you plz throw some light on Promotions & Vouchers ,and their customization..Thanks in advance..!!
Hi KB Sir
Please can you post on addons installation?
Ya, will do it.
How to create custom promotion In hybris 6.0 .please Post document
i created content page in cmscockpit
bodycontents got html and img source
i want give link to new content page
like when i clicked button (with a href=/123/) link then move to new content page
but i dont know how allocate link to new content page
is that need to import content in hac? if need show sample or something plz
give advice plz
thx
I would advice to create any CMS related things through impex and import it.
when i clicked button (with a href=/123/) link then move to new content page
For this , you create a controller with request mapping for /123 and add the corresponding content page in controller and return template view.
Just check http://javainsimpleway.com/creating-new-page-in-hybris/ article for the same and focus on Step 7 to Step 9 in this article.
Awesome KB,,,please post on IMPEXES also..
Thanks Himanshu!!
Sure will do it in some time ๐