As mentioned in the Overview Learning Journey, Laura wants to create pages and populate their content slots with components, as shown in the next image:
However, this simplified approach has some major drawbacks, because Laura would be responsible for defining the page structure and slot locations for every page individually–resulting in tedious and error-prone extra work.
Instead, we use the concept of templates:
Each template defines a dedicated page structure and the number of content slots. Out-of-the-box, SAP Commerce Cloud already provides a useful selection of templates. In addition to out-of-the-box templates, custom templates can be created.
Every page in WCMS has a page template assigned to it that defines its layout and visual structure. While complex layout options are possible, most out-of-the-box templates have two-column or three-column layouts. Page templates define the number and names of the Content Slots that may be populated by editorial content.
That way, each template can be referenced by many pages.
This concept is shown in the following diagrams:
When Laura creates a page, she picks a template to receive a certain page structure. Every page in WCMS is mapped to exactly one page template, but a template can be used as the basis of any number of pages.
In our example, Laura creates the Home and Company Profile pages by referencing the two-column template, while the Product Details page references the three-column template, as you can see in the following diagram:
As mentioned, Content Slots can be populated with Components. A CMS Component is the smallest piece of information that can be managed in WCMS.
Laura can choose from two types of Components:
- Simple components
(for example, image, paragraph)
- Complex components
(for example, banner, link, carousel)
You might wonder whether you can add only one single component to a content slot. Of course not, this would be too limiting! We can add any number of components to a content slot, and they are aligned automatically in proper order with a layout according to their preferred size. Of course, there are different-sized slots, as you have seen in the previous diagram, and it makes sense to choose a roughly matching slot for a component to look good.
In the previous diagram, the Home Page and Company Profile pages share the same two-column template. What makes these pages different is the list of components that will be placed on each page.
Note
It's important to understand that page templates and pages don't define the content displayed on the Web site. They merely define the structure of the page via a page template with the respective content slots of that template. The components placed in those content slots are responsible for providing content, either by creating it directly or by identifying the data source that will provide it.
Content Slots may also be defined as Shared:
- A Shared slot lives on template level and displays the same components on every page based on that template.
- A Page slot is also derived from a template but lives on page level. Each page slot might individually contain different components per page based on that template.
Let's take a typical use-case: Laura can save a lot of time by using a shared content slot to add the company logo. Instead of adding it to each individual page, she can use a shared slot. Content slots are defined on template level, so each page derived from this template will display the logo.
In the updated preceding diagram, let’s summarize what we have learned so far:
The banner component was added to a shared slot defined by the two-column template. Thus, it becomes visible on the Home and Company Profile pages, which reference this template. Exchanging the banner with a different component will instantly affect all pages referencing the modified shared slot.
The paragraph and image components on the other hand were added to page slots and are displayed on different local pages. Exchanging one of these components with a different one would affect only the modified page itself.