Documentatie AEM as a Cloud Service Handboek

Aangepaste kenmerken voor CIF productcarrousel

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Commerce Integration Framework

Gemaakt voor:

Beheerder
Ontwikkelaar

Inleiding

De component Product Carousel wordt uitgebreid door deze zelfstudie. Als eerste stap voegt u een exemplaar van de productcarrousel toe aan de startpagina om inzicht te krijgen in de basislijnfunctionaliteit:

Navigeer aan de Homepage van de plaats, bijvoorbeeld http://localhost:4502/editor.html/content/acme/us/en.html
Plaats een nieuwe productcarrouselcomponent in de hoofdlay-outcontainer op de pagina.
Breid het Zijpaneel (als niet reeds) van een knevel voorzien en schakelaar de activa finder dropdown aan Producten.
Dit zou een lijst van beschikbare producten van een verbonden instantie van Adobe Commerce moeten tonen.
Producten worden hieronder weergegeven met standaardeigenschappen:
wordt getoond

Het verkoopmodel bijwerken

U kunt de bedrijfslogica van de Carousel van het Product uitbreiden door een het Verkopen Model uit te voeren:

In uw winde, navigeer onder de kernmodule aan core/src/main/java/com/venia/core/models/commerce en creeer een Interface CustomCarousel die de interface CIF ProductCarousel uitbreidt:

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

Maak vervolgens een implementatieklasse CustomCarouselImpl.java op core/src/main/java/com/venia/core/models/commerce/CustomCarouselImpl.java .
Met het delegatiepatroon voor Sling Models kan CustomCarouselImpl via de eigenschap ProductCarousel model verwijzen: sling:resourceSuperType
@Self @Via(type = ResourceSuperType.class) private ProductCarousel productCarousel;
De @PostConstruct-annotatie zorgt ervoor dat deze methode wordt aangeroepen wanneer het Sling-model wordt geïnitialiseerd. De GraphQL-query voor het product is al uitgebreid met de methode extendProductQueryWith om kenmerken op te halen. Werk de GraphQL-query bij en voeg de kenmerk in de gedeeltelijke query:
@PostConstruct private void initModel() { productsRetriever = productCarousel.getProductsRetriever(); if(productCarousel.getProductsRetriever() != null) productCarousel.getProductsRetriever().extendProductQueryWith(p -> p .createdAt() .addCustomSimpleField("accessory_gemstone_addon") ); }
In de bovenstaande code wordt addCustomSimpleField gebruikt om het kenmerk accessory_gemstone_addon op te halen.

De opmaak aanpassen

De markering verder aanpassen:

Maak een kopie van productcard.html van /apps/core/cif/components/commerce/productcarousel/v1/productcarousel (het kerncomponentkruispad) naar de module ui.apps ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productcarousel/productcard.html .

Bewerk productcard.html om het aangepaste kenmerk aan te roepen, dat in de implementatieklasse wordt vermeld:

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

Sparen de veranderingen en stel de updates in om het gebruiken van uw Gemaakt bevel, van een bevel-lijn terminal te AEM. U kunt de aangepaste kenmerkwaarde accessory_gemstone_addon voor de geselecteerde producten op de pagina zien.

recommendation-more-help