Atributos personalizados para crear un carrusel de productos de CIF product-carousel

Vaya a la página principal del sitio, por ejemplo http://localhost:4502/editor.html/content/acme/us/en.html

Inserte un nuevo componente Carrusel de productos en el contenedor de diseño principal de la página.

Expanda el panel lateral (si no está activado) y cambie la lista desplegable del buscador de recursos a Productos.

Esto debería mostrar una lista de los productos disponibles de una instancia de Adobe Commerce conectada.

Los productos se mostrarán como se muestra a continuación con las propiedades predeterminadas:

En su IDE, vaya al módulo principal a core/src/main/java/com/venia/core/models/commerce y cree una interfaz CustomCarousel que extienda la interfaz ProductCarousel de CIF:

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

A continuación, cree una clase de implementación CustomCarouselImpl.java en core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

El patrón de delegación para modelos Sling permite que CustomCarouselImpl haga referencia al modelo ProductCarousel a través de la propiedad sling:resourceSuperType:

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

La anotación @PostConstruct garantiza que se llame a este método cuando se inicialice el modelo Sling. La consulta de GraphQL del producto ya se ha ampliado utilizando el método extendProductQueryWith para recuperar atributos. Actualice la consulta de GraphQL para incluir el atributo en la consulta parcial:

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

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

En el código anterior, addCustomSimpleField se usa para recuperar el atributo accessory_gemstone_addon.

Cree una copia de productcard.html desde /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (la ruta crxde del componente principal) al módulo ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

Edite productcard.html para llamar al atributo personalizado, que se menciona en la clase de implementación:

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

Guarde los cambios e implemente las actualizaciones en AEM con el comando Maven desde un terminal de línea de comandos. Podrá ver el valor del atributo personalizado accessory_gemstone_addon para los productos seleccionados en la página.