CODEWITHSUNDEEP
spartacus-storefront
Yurii Hierts
Yurii Hierts

Reputation: 1930

CMS Outlet References is not clear how to work

In this doc I found that I can customize our CMS templates, slots and components:

Data-driven outlets are provided by the CMS structure. There are three types, as follows: CMS Page layout name: Each page layout is available as an outlet reference. CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page. CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.

Could you please provide any example how to do that with outlets if I have next custom structure:

<main>
  <cx-page-layout class="AccountDetailsPageTemplate">
    <cx-page-slot class="BottomHeaderSlot"></cx-page-slot>
    <cx-page-slot class="AccountMenuSlot"></cx-page-slot>
    <cx-page-slot class="AccountContentSlot"></cx-page-slot>
  </cx-page-layout>
</main>

As result I would like to have next layout view: enter image description here

I know how to do that using global styles only, but preferably is to use templates (outlets), because it can be the case when we require to add some extra parent div's over the slots and so on.

Upvotes: 0

Views: 312

Answers (1)

Yurii Hierts
Yurii Hierts

Reputation: 1930

To build such structure with provided set of Slots, we can do next:

app.component.html (REQUIRED)

<ng-template cxOutletRef="AccountDetailsPageTemplate">
  <app-account-details-page></app-account-details-page>
</ng-template>

account-details-page.component.html

<h1>
  Hello AccountDetailsContentSlot
</h1>
<div class="d-flex">
  <div class="w-50">
    <cx-page-slot position="AccountMenuSlot"></cx-page-slot>
  </div>
  <div class="w-50">
     <cx-page-slot position="AccountContentSlot"></cx-page-slot>  
  </div>
</div>

I didn't put here BottomHeaderSlot, because it should't be here, it should be implemented in cx-header component.

Upvotes: 1

Related Questions