Benutzerdefinierte Attribute zum CIF-Produktkarussell product-carousel

Navigieren Sie zur Startseite der Site, z. B. http://localhost:4502/editor.html/content/acme/us/en.html

Fügen Sie eine neue Produktkarussellkomponente in den Haupt-Layout-Container auf der Seite ein.

Erweitern Sie das seitliche Bedienfeld (falls noch nicht umgeschaltet) und schalten Sie in der Dropdown-Liste der Asset-Suche Produkte.

Nun sollte eine Liste mit verfügbaren Produkten einer verbundenen Adobe Commerce-Instanz angezeigt werden.

Produkte werden wie folgt mit Standardeigenschaften angezeigt:

Navigieren Sie in Ihrer IDE unter dem Kernmodul zu core/src/main/java/com/venia/core/models/commerce und erstellen Sie eine CustomCarousel-Oberfläche, die die CIF ProductCarousel-Oberfläche erweitert:

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

Erstellen Sie als Nächstes eine Implementierungsklasse CustomCarouselImpl.java unter core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java.

Das Delegationsmuster für Sling-Modelle ermöglicht es CustomCarouselImpl, durch die Eigenschaft sling:resourceSuperType auf das Modell ProductCarousel zu verweisen:

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

Die Anmerkung @PostConstruct stellt sicher, dass diese Methode aufgerufen wird, wenn das Sling-Modell initialisiert wird. Die GraphQL-Produktabfrage wurde bereits mit der Methode „extendProductQueryWith“ erweitert, um Attribute abzurufen. Aktualisieren Sie die GraphQL-Abfrage , um das -Attribut in die partielle Abfrage aufzunehmen:

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

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

Im obigen Code wird addCustomSimpleField zum Abrufen des Attributs accessory_gemstone_addon verwendet.

Erstellen Sie eine Kopie von productcard.html aus /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (CRXDE-Pfad der Kernkomponente) im ui.apps-Modul ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html.

Bearbeiten Sie productcard.html, um das benutzerdefinierte Attribut aufzurufen, das in der Implementierungsklasse erwähnt wird:

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

Speichern Sie die Änderungen und stellen Sie die Aktualisierungen in AEM bereit. Verwenden Sie dazu Ihren Maven-Befehl in einem Befehlszeilen-Terminal. Sie können für die ausgewählten Produkte auf der Seite den Wert accessory_gemstone_addon des benutzerdefinierten Attributs sehen.