@ngx-y/ycms NPM

AngularAccelerator

A sap-commerce storefront using angular

Provides support working with CMS

Includes a collection of default cms components like:

cms-banner (SimpleResponsiveBannerComponent)
cms-flex (CMSFlexComponent)
cms-image (SimpleBannerComponent)
cms-include (JspIncludeComponent)
cms-link (CMSLinkComponent)
cms-navigation (NavigationComponent)
cms-paragraph (CMSParagraphComponent, CMSTabParagraphComponent)
cms-product-carousel (ProductCarouselComponent)
cms-tab-container (CMSTabParagraphContainer)

How to

<cms-page class="home-page" [query]="cmsPageQuery"></cms-page>

where

cmsPageQuery: CmsPageQuery = {
    pageType: PageType.CONTENT,
    id: 'homepage'
  };

a template component must be provided which matches the template name in the response, in this case LandingPage2Template

@CmsTemplate('LandingPage2Template')
@Component({
  selector: 'landing-page-2-template',
  templateUrl: 'landing-page-2.template.html'
})
export class LandingPage2TemplateComponent extends AbstractCmsTemplate {
}

with

<cms-slot [position]="'Section1'" [cms]="page"></cms-slot>
<div class="row g-0">
  <div class="col-12 col-md-6">
    <cms-slot class="row g-0" [position]="'Section2A'" [cms]="page">
      <ng-template #componentTemplate let-cms="cms">
        <div class="col-12 col-md-6">
          <cms-component [cms]="cms"></cms-component>
        </div>
      </ng-template>
    </cms-slot>
  </div>
  <div class="col-12 col-md-6">
    <cms-slot class="row g-0" [position]="'Section2B'" [cms]="page">
      <ng-template #componentTemplate let-cms="cms">
        <div class="col-12 col-md-6">
          <cms-component [cms]="cms"></cms-component>
        </div>
      </ng-template>
    </cms-slot>
  </div>
  <div class="col-12">
    <cms-slot [position]="'Section2C'" [cms]="page"></cms-slot>
  </div>
</div>
<cms-slot [position]="'Section3'" [cms]="page"></cms-slot>
<cms-slot class="row g-0" [position]="'Section4'" [cms]="page">
  <ng-template #componentTemplate let-cms="cms">
    <div class="col-6 col-md-3">
      <cms-component [cms]="cms"></cms-component>
    </div>
  </ng-template>
</cms-slot>
<cms-slot [position]="'Section5'" [cms]="page"></cms-slot>