使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子

需求：在SAP Spartacus的home page如下区域，显示硬编码的Hot sale标题：

创建一个新的Component，其中hotProduct$的值填充成硬编码的id为816780的产品：

import { Component, OnInit } from '@angular/core';
import { Product, ProductService } from '@spartacus/core';
import { CurrentProductService } from '@spartacus/storefront';
import { Observable } from 'rxjs';@Component({selector: 'app-outlets',templateUrl: './outlets.component.html',
})
export class OutletsComponent implements OnInit {hotProduct$: Observable<Product> = this.productService.get('816780');currentProduct$: Observable<Product> = this.currentProductService.getProduct();constructor(private productService: ProductService, private currentProductService: CurrentProductService) { }ngOnInit() {}}

将hotProduct$的内容填充到标准的Spartacus Product list控件里，选择器为cx-product-list-item:

<ng-template cxOutletRef="Section1" cxOutletPos="before"><h1>Hot sale</h1><cx-product-list-item*ngIf="hotProduct$ | async as product"[product]="product"></cx-product-list-item>
</ng-template>

这个product list控件的外观如下图所示：

更多Jerry的原创文章，尽在：“汪子熙”:

使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子相关推荐

SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
使用outlet在SAP Spartacus中添加自定义UI
outlet 或者在SAP Spartacus中硬编码,或者通过CMS driven. Angular里添加自定义UI的原理是基于TemplateRef, 通过ng-template Componen ...
SAP Spartacus 的页面布局
官方文档 Spartacus 基于单页面应用程序设计模式,但仍有页面呈现在店面中. "页面"的概念是网络的关键并且无法避免:页面由 URL 标识.由搜索引擎索引.通过社交媒体共享. ...
SAP Spartacus login 页面看不到 UI 控件的问题解决
问题截图:Login 页面下面是空的我直接修改 Spartacus-core.js 不现实: 因为我没有能力去修改对应的 source code map 文件: 这个 getDetails 只是一个 ...
通过 Feature Level 动态控制 SAP Spartacus 的页面显示
ng-container 标签只在 design time 可见,运行时会完全从渲染出的 HTML 源代码里被移除.通过 ng-container 加上 SAP Spartacus 自定义实现的 cx ...
SAP Spartacus CMS 页面加载逻辑和性能的优化
https://github.com/SAP/spartacus/issues/3649 SAP Commerce Cloud CMS 页面加载的一些优化点: Payload of the CMS p ...
如何在SAP Spartacus category 页面里拿到当前的category信息
需求 https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category ...
SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...

使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子

使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子相关推荐

最新文章

热门文章