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>
Installing
npm install @ngx-y/ngx-ycms
Build
ng build ngx-ycms --prod
App Requirements
@ngx-y/ngx-ycore