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은(는) ProductCarousel 속성을 통해 sling:resourceSuperType 모델을 참조할 수 있습니다.

@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")
);
}

위의 코드에서는 addCustomSimpleField을(를) 사용하여 accessory_gemstone_addon 특성을 검색합니다.

productcard.html(핵심 구성 요소 자격 증명 경로)에서 ui.apps 모듈 /apps/core/cif/components/commerce/productcarousel/v1/productcarousel(으)로 ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/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 값을 볼 수 있습니다.