Attributi personalizzati per il carosello dei prodotti CIF product-carousel

Passa alla home page del sito, ad esempio http://localhost:4502/editor.html/content/acme/us/en.html

Inserisci un nuovo componente Carosello prodotto nel contenitore di layout principale della pagina.

Espandi il pannello laterale (se non è già attivato) e imposta il menu a discesa di ricerca risorse su Prodotti.

Dovrebbe essere visualizzato un elenco dei prodotti disponibili da un’istanza di Adobe Commerce connessa.

I prodotti verranno visualizzati come segue con le proprietà predefinite:

Nell'IDE, passa al modulo core fino a core/src/main/java/com/venia/core/models/commerce e crea un'interfaccia CustomCarousel che estende l'interfaccia CIF ProductCarousel:

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

Creare quindi una classe di implementazione CustomCarouselImpl.java in core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

Il modello di delega per modelli Sling consente a CustomCarouselImpl di fare riferimento al modello ProductCarousel tramite la proprietà sling:resourceSuperType:

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

L'annotazione @PostConstruct assicura che questo metodo venga chiamato quando il modello Sling viene inizializzato. La query GraphQL del prodotto è già stata estesa utilizzando il metodo extendProductQueryWith per recuperare gli attributi. Aggiorna la query GraphQL per includere l’attributo nella query parziale:

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

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

Nel codice riportato sopra, addCustomSimpleField viene utilizzato per recuperare l'attributo accessory_gemstone_addon.

Crea una copia di productcard.html da /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (percorso crxde del componente core) al modulo ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

Modificare productcard.html per chiamare l'attributo personalizzato, indicato nella classe di implementazione:

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

Salva le modifiche e distribuisci gli aggiornamenti in AEM utilizzando il comando Maven, da un terminale della riga di comando. Nella pagina verrà visualizzato il valore dell'attributo personalizzato accessory_gemstone_addon per i prodotti selezionati.