Page Component in a Static Template

[nsvsrk]

Hi all,

What is a Page Component in a Static Template?

I am reading that it is the main component on main page and all other components are separate from it.

With respect to the way we create in a specific folder for housing the component or in any other way, how does a Page Component in a Static Template differ from all other components?

Appreciate all your replies.

Thanks,

RK.

[giuseppebag · Accepted solution]

A Page Component in a Static Template is a fundamental building block that defines the structure of a page.

Here are some key points:

1. Main Component:

   • The Page Component is indeed the main component on a page. It serves as the container for all other components that make up the page.
   • It typically includes the basic structure of the page, such as the header, footer, and main content area.

2. Static Template:

   • In a Static Template, the structure of the page is predefined and does not change. This means that the layout and the components that can be used are fixed.
   • The Page Component in a Static Template is responsible for rendering this predefined structure.

3. Component Hierarchy:

   • The Page Component is usually the root component of the page. All other components are nested within it.
   • This hierarchy ensures that the page has a consistent structure and that components are rendered in the correct order.

Differences from Other Components

1. Purpose and Scope:

   • Page Component: Defines the overall structure and layout of the page. It is responsible for rendering the main sections of the page.
   • Other Components: These are typically used to render specific pieces of content or functionality within the page. Examples include text components, image components, navigation components, etc.

2. Location and Organization:

   • Page Component: Usually stored in a specific folder within the AEM project, often under /apps/<project-name>/components/page.
   • Other Components: These can be stored in various folders depending on their purpose and organization. For example, content components might be stored under /apps/<project-name>/components/content.

3. Rendering and Logic:

   • Page Component: Contains the logic for rendering the main structure of the page, including the header, footer, and main content area. It often includes scripts and styles that are essential for the page.
   • Other Components: Focus on rendering specific content or functionality. They are usually more modular and can be reused across different pages.

4. Template Association:

   • Page Component: Directly associated with a Static Template. The template defines which Page Component to use and how the page should be structured.
   • Other Components: Can be used within the Page Component and are not directly associated with the template. They are added to the page through the Page Component or other container components.

Here is a simplified example of how a Page Component might be structured in AEM:

<!-- Page Component (e.g., /apps/my-project/components/page/base.html) -->
<div class="page">
    <header class="header">
        <!-- Header content -->
    </header>
    <main class="main-content">
        <!-- Main content area where other components are rendered -->
        <cq:include path="par" resourceType="foundation/components/parsys" />
    </main>
    <footer class="footer">
        <!-- Footer content -->
    </footer>
</div>

In this example, the Page Component includes the header, main content area, and footer. The main content area uses a parsys (paragraph system) to allow other components to be added dynamically.

[nsvsrk]

Thanks @giuseppebag .

Excellent description.

Please confirm that the folder location does not matter for Page components and other components, as long as template makes the right reference to the page component and page component to other components.

Thanks,

RK.

[giuseppebag]

The components' paths are up to you; what's important is that the references inside the template definition point to the correct component path.

[AmitVishwakarma]

Hi @nsvsrk ,

The physical folder location of the Page Component or any other component in your /apps/ structure does not technically matter, as long as the paths are correctly referenced in your template and component definitions.

Here’s how it works in practice:

Page Component Reference in Static Template

In a static template, the jcr:content node under the template defines the page component like this:

sling:resourceType = "my-project/components/page/base"

This path (my-project/components/page/base) must match the path to your actual page component under /apps/, for example:

/apps/my-project/components/page/base

So even if your folder structure is non-standard (like putting your page components under /apps/my-project/templates/components/), it will still work as long as the template points to the correct sling:resourceType.

Same Goes for Other Components

Other components (like text, image, etc.) can live anywhere in your project usually under something like:

/apps/my-project/components/content/

When they’re used in a page (via parsys or container), they’re referenced by their full sling:resourceType, like:

<cq:include path="par" resourceType="my-project/components/content/text"/>

So again, location doesn’t affect functionality only the resource type reference does.

Regards,
Amit