文档AEM as a Cloud Service用户指南

CIF 产品轮播的自定义属性 product-carousel

Last update: Tue Aug 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 适用对象：
  • Experience Manager as a Cloud Service

创建对象：

  • 管理员
  • 开发人员

了解如何通过更新Sling模型和自定义标记来扩展AEM CIF产品轮播组件。

简介 intro

在本教程中对产品轮盘组件进行了扩展。 第一步，将产品轮播的实例添加到主页以了解基线功能：

  1. 导航到网站的主页，例如http://localhost:4502/editor.html/content/acme/us/en.html

  2. 将新的产品轮盘组件插入页面上的主布局容器。

    产品轮盘组件

  3. 展开侧面板（如果尚未切换）并将资产查找器下拉列表切换为​ 产品。

    轮播产品

  4. 此时应会显示已连接的Adobe Commerce实例中可用产品的列表。

    连接的实例

  5. 产品将显示如下，默认属性为：

    显示的 产品具有属性

更新Sling模型 update-sling-model

您可以通过实施Sling模型来扩展产品轮播的业务逻辑：

  1. 在IDE的核心模块下导航到core/src/main/java/com/venia/core/models/commerce，并创建扩展CIF ProductCarousel界面的自定义轮播界面：

    code language-text 
    package com.venia.core.models.commerce;
import com.adobe.cq.commerce.core.components.models.productcarousel.ProductCarousel;
public interface CustomCarousel extends ProductCarousel {
}

  2. 接下来，在CustomCarouselImpl.java处创建实现类core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java。

    Sling模型的委托模式允许CustomCarouselImpl通过ProductCarousel属性引用sling:resourceSuperType模型：

    code language-text 
    @Self
@Via(type = ResourceSuperType.class)
private ProductCarousel productCarousel;

  3. @PostConstruct注释可确保在Sling模型初始化时调用此方法。 产品GraphQL查询已使用extendProductQueryWith方法扩展以检索属性。 更新GraphQL查询以在部分查询中包含属性：

    code language-javascript 
    @PostConstruct
private void initModel() {
productsRetriever = productCarousel.getProductsRetriever();

if(productCarousel.getProductsRetriever() != null)
productCarousel.getProductsRetriever().extendProductQueryWith(p -> p
.createdAt()
.addCustomSimpleField("accessory_gemstone_addon")
);
}

    在上述代码中，addCustomSimpleField用于检索accessory_gemstone_addon属性。

自定义标记 customize-markup

要进一步自定义标记，请执行以下操作：

  1. 创建从productcard.html （核心组件crxde路径）到ui.apps模块/apps/core/cif/components/commerce/productcarousel/v1/productcarousel的ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html的副本。

  2. 编辑productcard.html以调用实现类中提到的自定义属性：

    code language-xml 
    ..
<div
    data-product-sku="${product.commerceIdentifier.value}"
    data-product-base-sku="${product.combinedSku.baseSku}"
    id="${product.id}"
    data-cmp-data-layer="${product.data.json}"
    class="card product__card">
    <span>${product.product.responseData['accessory_gemstone_addon']}</span>
    <a href="${product.URL}"
        target="${productCarousel.linkTarget}"
..

  3. 从命令行终端，使用Maven命令保存更改并将更新部署到AEM。 您将能够在页面上看到所选产品的自定义属性accessory_gemstone_addon值。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab