Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

简介: Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

如下图所示,selector:cx-searchbox

Component 名称:Search-box.component.ts

点击 search bar 之后:

添加 css 类:

断点停下来的地方,查看搜索结果列表:

抛出 ProductSearch 的 action:


最后调用 ProductSearchConnector 进行搜索:

dispatch 到 adapter:


ProductList Component 里这段代码:

    this.subscription.add(
      combineLatest([this.model$, this.viewMode$])
        .pipe(
          skip(1),
          filter(([model, mode]) => !!model && !!mode)
        )
        .subscribe((model) =>{
          this.globalMessageService.add(
            { key: 'sorting.pageViewUpdated' },
            GlobalMessageType.MSG_TYPE_ASSISTIVE,
            500
          );
          console.log('Jerry:', model);
        }
        )
    );
  }

首先,private subscription = new Subscription(); 这行代码声明了一个新的 Subscription 对象。在 RxJS 中,Subscription 对象用于表示可观察对象(Observable)的执行,主要用于取消订阅。


接下来的代码块是 this.subscription.add(),表示将一个新的订阅添加到 subscription 对象中。被添加的订阅是 combineLatest([this.model$, this.viewMode$]) 返回的 Observable 对象的订阅。


combineLatest([this.model$, this.viewMode$]) 是 RxJS 的一个函数,用于将多个 Observable 合并成一个 Observable。当任何一个输入的 Observable 发出值,它就会发出每个输入 Observable 的最新值的数组。在这里,它合并了 this.model$this.viewMode$ 这两个 Observable 对象。


.pipe() 是用于组合多个函数的操作符,它将一个 Observable 转换为另一个 Observable。在这里,它包含了两个操作符:skip(1)filter(([model, mode]) => !!model && !!mode)


skip(1) 会忽略源 Observable 发出的前 1 个值,只对其后发出的值感兴趣。


filter(([model, mode]) => !!model && !!mode) 会过滤掉不满足条件的值。在这里,条件是 modelmode 两个值都存在。如果 modelmode 中有一个不存在(nullundefinedfalse0NaN 或空字符串),过滤器就会忽略这个值。


.subscribe((model) => { ... }) 表示对 Observable 的订阅。订阅就是 Observable 的执行,即开始接收值。在这里,当 modelmode 都存在时,回调函数就会被调用。


回调函数里,this.globalMessageService.add() 是调用 globalMessageServiceadd 方法,添加一个全局消息。console.log('Jerry:', model); 是输出日志,显示 model 的值。


总的来说,这段代码的主要功能是:当 this.model$this.viewMode$ 的值发生变化并且都存在时,添加一个全局消息,并在控制台打印 model 的值。


相关文章
|
7月前
SAP Spartacus 产品搜索页面结果里的 filter 设计明细
SAP Spartacus 产品搜索页面结果里的 filter 设计明细
44 0
|
6月前
|
编解码 前端开发 API
Spartacus 产品明细页面的 API 设计
Spartacus 产品明细页面的 API 设计
48 0
|
6月前
|
JavaScript
Spartacus product 明细页面的产品图片显示
Spartacus product 明细页面的产品图片显示
40 0
|
6月前
|
JSON 数据格式
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题
51 0
|
6月前
|
UED
如何在 Spartacus 使用 UserAccountFacade 在语言设置更改后重新读取用户数据
如何在 Spartacus 使用 UserAccountFacade 在语言设置更改后重新读取用户数据
45 1
|
7月前
|
Web App开发 开发者
SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计
SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计
50 0
|
7月前
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
42 0
|
6月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
39 0
|
6月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
51 0
|
6月前
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
65 0