Attributs personnalisés pour le carrousel de produit CIF product-carousel

Accédez à la page d’accueil du site ; par exemple, http://localhost:4502/editor.html/content/acme/us/en.html

Insérez un nouveau composant de carrousel de produit dans le conteneur de mises en page principal de la page.

Développez le Panneau latéral (s’il n’est pas déjà basculé) et basculez la liste déroulante de l’outil de recherche de ressources sur Produits.

Cela devrait afficher la liste des produits disponibles à partir d’une instance Adobe Commerce connectée.

Les produits s’affichent comme ci-dessous avec les propriétés par défaut :

Dans votre IDE, accédez au module principal pour core/src/main/java/com/venia/core/models/commerce et créer une interface CustomCarousel qui étend l’interface ProductCarousel de CIF :

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

Créez ensuite un CustomCarouselImpl.java de classe d’implémentation dans core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

Le modèle de délégation pour les modèles Sling CustomCarouselImpl permet de référencer ProductCarousel modèle via la propriété sling:resourceSuperType :

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

L’annotation @PostConstruct garantit que cette méthode est appelée lorsque le modèle Sling est initialisé. La requête de GraphQL de produit a déjà été étendue à l’aide de la méthode extendProductQueryWith pour récupérer les attributs. Mettez à jour la requête GraphQL pour inclure l’attribut dans la requête partielle :

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

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

Dans le code ci-dessus, le addCustomSimpleField est utilisé pour récupérer l’attribut accessory_gemstone_addon.

Créez une copie de productcard.html à partir de /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (le chemin d’accès crxde des composants principaux) vers le module ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

Modifiez productcard.html pour appeler l’attribut personnalisé, qui est mentionné dans la classe d’implémentation :

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

Enregistrez les modifications et déployez les mises à jour sur AEM à l’aide de votre commande Maven, à partir d’un terminal de ligne de commande. Vous pourrez voir la valeur de l’accessory_gemstone_addon d’attribut personnalisé pour les produits sélectionnés sur la page.