如何显示带有轮播的产品列表上的区域?

问题描述

我在产品上有一个名为“ highlightAttributesDCatalog”的字段。我必须在转盘和斯巴达克斯上展示这个区域。

highlightAttributesDCatalog类型:

type = "java.util.List & lt; .... product.data.DCatalogProductsAttributesData>"

DCatalogProductsAttributes数据结构:

<bean class = "..... product.data.DCatalogProductsAttributesData">
<property name = "featureData" type = "de.hybris.platform.commercefacades.product.data.FeatureData" />
<property name = "iconPath" type = "java.lang.String" />
</bean>

enter image description here 根据图片中的结构,我在轮播中应该有6个区域。

我可以将认结构中的轮播结构用于ProductReferences字段。我无法为此区域自定义相同的结构。

用于ProductReferences轮播的结构的打字稿代码

title$ = this.component.data$.pipe(map((d) => d?.title));

  private currentProductCode$: Observable<string> = this.current.getProduct().pipe(
    filter(Boolean),map((p: Product) => p.code),distinctUntilChanged(),tap(() => this.referenceService.cleanReferences())
  );

  /**
   * Obervable with an Array of Observables. This is done,so that
   * the component UI Could consider to lazy load the UI components when they're
   * in the viewpoint.
   */
  items$: Observable<Observable<Product>[]> = combineLatest([this.currentProductCode$,this.component.data$]).pipe(
    switchMap(([code,data]) => this.getProductReferences(code,data?.productReferenceTypes))
  );

  
  constructor(
    protected component: CmsComponentData<CmsProductReferencesComponent>,protected current: CurrentProductService,protected referenceService: ProductReferenceService,private config: OccConfig
      ) {}

  private getProductReferences(code: string,referenceType: string): Observable<Observable<Product>[]> {
    console.log(this.current.getProduct());

    return this.referenceService.get(code,referenceType).pipe(
      filter(Boolean),map((refs: ProductReference[]) => refs.map((ref) => of(ref.target)))
    );
  }

此处,在“构造函数”中定义的“组件”变量中使用了productReferences。 “ highlightAttributesDCatalog”该字段的定义应该是什么。如何为该区域自定义这些代码

非常感谢您。 enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)