Anpassade attribut till CIF Product Carousel product-carousel

Navigera till webbplatsens hemsida, till exempel http://localhost:4502/editor.html/content/acme/us/en.html

Infoga en ny Product Carousel-komponent i huvudlayoutbehållaren på sidan.

Expandera sidopanelen (om den inte redan är aktiverad) och växla till listrutan Produkter för att hitta resurser.

Här visas en lista över tillgängliga produkter från en ansluten Adobe Commerce-instans.

Produkter visas enligt nedan med standardegenskaper:

I din IDE navigerar du under kärnmodulen till core/src/main/java/com/venia/core/models/commerce och skapar ett CustomCarousel-gränssnitt som utökar CIF ProductCarousel-gränssnittet:

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

Skapa sedan en implementeringsklass CustomCarouselImpl.java vid core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

Delegeringsmönstret för delningsmodeller gör att CustomCarouselImpl kan referera till ProductCarousel-modellen via egenskapen sling:resourceSuperType:

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

Anteckningen @PostConstruct ser till att den här metoden anropas när Sling-modellen initieras. Produktens GraphQL-fråga har redan utökats med metoden extendProductQueryWith för att hämta attribut. Uppdatera GraphQL-frågan så att attributet inkluderas i den partiella frågan:

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

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

I ovanstående kod används addCustomSimpleField för att hämta attributet accessory_gemstone_addon.

Skapa en kopia av productcard.html från /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (huvudkomponentens sökväg) till modulen ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

Redigera productcard.html för att anropa det anpassade attributet, som nämns i implementeringsklassen:

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

Spara ändringarna och distribuera uppdateringarna till AEM med ditt Maven-kommando från en kommandoradsterminal. Du kan se det anpassade attributvärdet accessory_gemstone_addon för de valda produkterna på sidan.