CIF 製品カルーセルに対するカスタム属性 product-carousel

サイトのホームページ（例：http://localhost:4502/editor.html/content/acme/us/en.html）に移動します

新しい製品カルーセルコンポーネントをページのメインのレイアウトコンテナに挿入します。

サイドパネルを展開し（まだ切り替えていない場合）、アセットファインダードロップダウンを 製品 に切り替えます。

接続された Adobe Commerce インスタンスから使用可能な製品のリストが表示されます。

製品は、以下のようにデフォルトのプロパティで表示されます。

IDE で、コアモジュールの下にある core/src/main/java/com/venia/core/models/commerce に移動し、CIF ProductCarousel インターフェイスを拡張する CustomCarousel インターフェイスを作成します。

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

次に、CustomCarouselImpl.java に実装クラス core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java を作成します。

Sling モデルのデリゲーションパターンを使用すると、CustomCarouselImpl は sling:resourceSuperType プロパティを介して ProductCarousel モデルを参照できます。

@Self
@Via(type = ResourceSuperType.class)
private ProductCarousel productCarousel;

@PostConstruct 注釈により、Sling モデルの初期化時にこのメソッドが確実に呼び出されます。 製品の GraphQL クエリは、属性を取得するために extendProductQueryWith メソッドを使用して既に拡張されています。GraphQL クエリを更新して、部分的なクエリに属性を含めます。

@PostConstruct
private void initModel() {
productsRetriever = productCarousel.getProductsRetriever();

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

上記のコードでは、accessory_gemstone_addon 属性を取得するために addCustomSimpleField が使用されます。

/apps/core/cif/components/commerce/productcarousel/v1/productcarousel（コアコンポーネントの crxde パス）から ui.apps モジュール ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html に productcard.html のコピーを作成します。

productcard.html を編集して、実装クラスに記載されているカスタム属性を呼び出します。

..
<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}"
..

変更を保存し、コマンドラインターミナルから Maven コマンドを使用して、AEM にアップデートをデプロイします。ページで選択した製品のカスタム属性 accessory_gemstone_addon 値を確認できます。