Creating New Pages and Components

You can create new pages and components to appear in your composable storefront app.

Composable storefront is a single-page application, but it still uses the concept of pages to distinguish the different views within the app. Composable storefront pages come from the CMS, and are constructed with slots and components. A page contains slots, and slots contain components. To organize common slots and components, composable storefront supports page templates. A page template contains a layout, as well as components that can be used globally, such as header and footer sections.

Composable storefront receives each page from the CMS with a list of slots and components, and this list is used to render the appropriate components.

Creating a New Page

To create a new page in composable storefront, first you need to create the relevant page in the CMS. For information on creating pages in the CMS, see Creating Pages.

After you have created a new page in the CMS, composable storefront adds it automatically without any configuration. The URL of the page in composable storefront is the same as the CMS label.

Creating a New Component

To create a new component in composable storefront, first you need to create the relevant component in the CMS. For information on creating components in the CMS, see Creating Components from Component Types.

After you have created a new component in the CMS, it needs to be mapped to a new Angular component.

The following example shows how to map a new wish list component. In this case, the wish list component has the following file structure:

wishlist/
  wishlist.component.html
  wishlist.component.scss
  wishlist.component.ts
  wishlist.module.ts

You can then map the wish list component in wishlist.module.ts, as follows:

/*...*/
imports: [
  ConfigModule.withConfig({
    cmsComponents: {
      YOUR_NEW_COMPONENT_TYPE: {
        component: WishlistComponent // The class of your Angular component
      }
    }
  })
]

This logic injects the WishlistComponent wherever it is placed in the CMS. For more details on working with CMS components, see Customizing CMS Components.

Static Pages

You can also create a custom page with custom components by creating a static page. The following procedure describes how to create a static wish list page with a wish list component.

Procedure

Create a static page and a static route.

The following example creates a wish list page in wishlist-page.module.ts:

import { RouterModule, Routes } from '@angular/router';
import { CmsPageGuard } from '@spartacus/storefront';
/*...*/
const staticRoutes: Routes = [{
  path: 'wishlist',
  component: WishlistPageComponent // Custom page component,
  canActivate: [CmsPageGuard]
}];
/*...*/
imports: [RouterModule.forChild(staticRoutes)];

Add the component to the page, just as you would for any regular Angular component.
In the following example, the component is added in wishlist-page.component.html:
```

<wishlist-component></wishlist-component>
```