Concept of page slots/ Components and content slots

In Hybris, we generally have a hierarchy of components which builds each page.

Components are basically Areas on JSP for adding the dynamic contents. At top level we have page templates.  Page template contains multiple page slots. Page slots contains multiple components and then each component can contain multiple content slots.

The concept is something similar to IBM - WCS e-spots. Where we use to have multiple content slots in an e-spot. Below are the snapshots which will help you understand the concept.

All the associated mapping like which template is associated with which page, which all components/content slots are linked with a page is defined in "cms-content.impex" located at below location for my case

/kuldeepinitialdata/resources/kuldeepinitialdata/import/coredata/contentCatalogs/catalogName/cms-content.impex

Let's start with home page. If we check the above impex file, we can see that the template used for home page is "LandingPage2Template" as shown below.

Now lets login to cmscockpit to see that template.
Url - http://localhost:9001/cmscockpit/hybris
Username/Pwd - admin/nimda

The below screen will appear. Choose the site(electronics in our case) from left hand side and you can see all the templates at right hand side of the panel.

Double click on the page template to edit or see what all page slots/ components are there. Below screen would be displayed on double click.The red page slots shows that these slots are shared by multiple pages. To edit any section, click on the lock to unlock and then edit it.

Lets focus on page slot "SiteLogoSlot". This contains "SiteLogoComponent" to display the logo across the site. By editing this component we can change the logo of site anytime.

There is one more alternate way of editing the components through HMC tool. Open tool with below information.

URL - http://localhost:9001/hmc/hybris
Username/Pwd - admin/nimda

1.) Go to WCMS > Components > Search for SiteLogoComponent
2.) In search we can see that 2 SiteLogoComponents are displaed. One for stage and one for online.
3.) Generally we change in stage and then changed are propagated to online via Sync.
4.) On local we can directly do the changes in online to reflect directly on site

5.) Double click on the component and you can see the below window where you can edit it. 

• Property section includes things like name, id should be visible or not
• Content slot section contains the information of the content slot
• Restrictions sections has information about any restriction applied on the content or not
• Administration section contains information like type of components, information of any changes made 

Enjoy playing with site components now..