User Docs
Start typing to search…

Page Templates

1. Introduction

Kajoo now has powerful upgrades for deploying and managing Sitecore page templates. Previously, Kajoo only supported deployment of individual components. With this update, developers can now create and deploy full page templates into Sitecore, offering greater control over page structure and metadata.

2. Why This Feature?

2.1 Limitations in Earlier Versions

Earlier versions of Kajoo only supported the deployment of individual components. While components could be created and styled, developers couldn’t define full page templates or control their structure within Sitecore.

2.2 What’s New?

With the new functionality, you can:

  • Create and deploy page templates to Sitecore.
  • Define dynamic metadata fields for SEO and page-level configuration.
  • Drop components into placeholders that map to Sitecore presentation details via standard values.
  • (Coming soon): Full support for leveraging Sitecore branch templates during deployment.

3. Creating Page Templates

To create a new page template in Kajoo:

  1. Open your project in the Kajoo app.

  2. In the Explorer section, click the “+” button in the header.

  3. Select “New Page Template”.

A new template will be added to the list with a unique name. You can rename it by:

  • Clicking the template name.

  • Using the right-click menu.

  • Using the right sidebar.

To delete a template, press Backspace/Delete or use the right-click menu.

4. Setting SEO Metadata

Kajoo allows you to define SEO fields for each page template:

  • These fields are located in the right sidebar when a template is selected.

  • On deployment, Kajoo creates matching fields in Sitecore with the same names and values as standard values.

  • This ensures that pages created from these templates include consistent and optimized metadata by default.

5. Understanding Placeholders

5.1 Placeholders in general

Placeholders serve as dynamic containers for inserting various components. The content shown within a placeholder is defined by how content authors organize the page structure.

In essence, a placeholder functions similarly to an element that holds child components.

Placeholders can also be nested—components themselves can include placeholders. A typical example of this hierarchy would be: kajoo-main (placeholder) > HeroBanner (component) > cta (placeholder) > LearnMore (component).

In Kajoo, placeholders:

  • Cannot be dropped into standard components.
  • Can have content only in page templates.
  • Cannot be deleted in page templates.
  • Do not support styling yet.

5.2 kajoo-main Placeholder

Each page template includes a built-in, non-editable placeholder called kajoo-main:

  • It is created automatically when a new template is created.
  • It cannot be edited or deleted.
  • It serves as the only placeholder in the layout file (see Generated Code and deployment section).

You can begin adding content by:

  • Clicking the purple “+” icon in the center of the canvas.

  • Using the element menu.

  • Dragging and dropping dynamic components directly into the placeholder.

Note: Page templates can only have dynamic components (no elements, no standard components) and they can only be dropped inside placeholders.

6. Dropping Content

With kajoo-main in place, you can now drop dynamic components into your layout:

  • This allows you to design your layout in a separate component and insert it into the template.

  • You can drop multiple instances of the same component with different content.

  • To edit the content of a component instance, select it and click “Edit Content” button in the right sidebar.

7. Generated Code and Deployment

Once you’ve built your templates and added components, you can generate theReact/Next.js code:

  • In preview environments like CodeSandbox or StackBlitz, Kajoo generates a sample page using the standard values of each template.

  • For the actual deployment to Sitecore, the following steps should be followed:

    1. [One-time setup] Create the Kajoo Layout in Sitecore:

      1. Go to /sitecore/layout/Layouts/Project/APP-Name

      2. Create a layout item named Kajoo Layout (use the JSS Layout Template)

      3. Create a placeholder setting called kajoo-main, if it doesn't exist

      4. Add kajoo-main placeholder setting in the Layout Service Placeholders of Kajoo Layout.

      5. Copy the layout id to use it in the Step ii

    2. [One-time setup] Add a Layout Factory to your project:

      1. Create a new file in src/ named LayoutFactory.tsx.
      2. Import your other layouts and KajooLayout (Note: use the path defined in site configurations in Kajoo)
      3. Sample code: 
        import * as layouts from './Layout';
import KajooLayout from './layouts/KajooLayout';

type RouteData = {
  layoutId: string;
};

class LayoutFactory {
  private layoutMap: Map<string, unknown>;

  constructor() {
    this.layoutMap = new Map();

    // Add layouts here using their Sitecore layout ID:
    this.layoutMap.set('{62CA359D-B329-4641-BF2B-8762A86372A9}', KajooLayout);
    this.layoutMap.set('default', layouts.DefaultLayout);
  }

  resolveLayout(routeData: RouteData): unknown {
    const layoutId = `{${routeData.layoutId.toUpperCase()}}`;
    return this.layoutMap.get(layoutId) || this.layoutMap.get('default');
  }
}

const layoutFactory = new LayoutFactory();
Object.freeze(layoutFactory);

export default layoutFactory;

    3. A shared KajooLayout file is auto-generated at a user-defined path during the deployment. Note: The path for this file is defined in site configurations (Kajoo > Configurations > Click Edit for any site > Advanced > Kajoo Layout Directory Path).


    4. [One-time setup] Update the Main Catch-All Route File (src/pages/[[...path]].tsx) for Nextjs apps (check below for React apps):

      1. Sample code : 
        import LayoutFactory from '../LayoutFactory';
// other imports...

const SitecorePage = ({
  notFound,
  sitecoreContext,
  componentProps,
}: SitecorePageProps): JSX.Element => {
  useEffect(() => {
    handleEditorFastRefresh();
  }, []);

  if (notFound || !sitecoreContext?.route) return <NotFound />;

  const layoutId = sitecoreContext.route.layoutId || 'default';
  const Layout = LayoutFactory.resolveLayout({ layoutId }) as React.ComponentType;

  return (
    <ComponentPropsContext value={componentProps}>
      <SitecoreContext componentFactory={componentFactory} context={sitecoreContext}>
        <Layout />
      </SitecoreContext>
    </ComponentPropsContext>
  );
};

// getStaticPaths and getStaticProps (as you already have)

    5. Once you configure all these, trigger the deployment from within the Kajoo.

    6. Page templates are created in Sitecore, including associated metadata fields populated with their standard values.

    7. To use Kajoo Layout with a page template, set its layout to Kajoo Layout in the Presentation Details.

    8. (Coming soon): Renderings are added to the presentation details of the template’s standard values via branch templates.

Notes:

  • This approach enables rendering pages with dynamic layouts based on the Sitecore layout ID.
  • Make sure the layout IDs in LayoutFactory exactly match the GUIDs from Sitecore layout definitions.

For React.js Apps :
If you are working on a React-only JSS app, steps by step guide to support multiple layouts : How to use dynamic layouts in Headless Sitecore applications

Updated 8 days ago