Adobe Experience Manager CIF Core-componenten aanpassen customize-cif-components

De CIF Venia-project is een referentiecode die als basis kan dienen voor CIF kerncomponenten. In deze zelfstudie breidt u de Productteam om een aangepast kenmerk van Adobe Commerce weer te geven. U leert ook meer over de GraphQL-integratie tussen Adobe Experience Manager (AEM) en Adobe Commerce en de uitbreidingshaken die worden geleverd door de CIF Core Components.

TIP
Gebruik de Project archetype AEM wanneer het beginnen van uw eigen handelsimplementatie.

Wat u gaat maken

Het merk Venia is onlangs begonnen met de productie van bepaalde producten met behulp van duurzame materialen en het bedrijf wil graag een Eco Friendly badge als onderdeel van de Product Teaser. In Adobe Commerce wordt een nieuw aangepast kenmerk gemaakt om aan te geven of een product het Milieuvriendelijk materiaal. Dit douanekenmerk wordt toegevoegd als deel van de vraag van GraphQL en getoond op de Teaser van het Product voor gespecificeerde producten.

Eco-vriendelijke badge - definitieve implementatie

Vereisten prerequisites

U hebt een lokale ontwikkelomgeving nodig om deze zelfstudie te voltooien. Dit omvat een lopende instantie van AEM die wordt gevormd en met een instantie van Adobe Commerce verbonden. De vereisten en stappen voor een plaatselijke ontwikkeling opzetten met AEM. Als u de zelfstudie volledig wilt volgen, hebt u toestemming nodig om Kenmerken van een product in Adobe Commerce.

U hebt ook GraphQL IDE nodig, zoals GraphiQL of een browserextensie om de codevoorbeelden en zelfstudies uit te voeren. Als u een browserextensie installeert, moet u de aanvraagheaders kunnen instellen. In Google Chrome: Altair GraphQL Client is één extensie die de taak kan uitvoeren.

Het Venia-project klonen clone-venia-project

U kloont de Venia-project en overschrijf vervolgens de standaardstijlen.

NOTE
U kunt een bestaand project zonder problemen gebruiken (gebaseerd op het AEM Projectarchetype met CIF inbegrepen) en sla deze sectie over.
  1. Voer de volgende git-opdracht uit, zodat u het project kunt klonen:

    code language-shell
    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Bouw en stel het project aan een lokaal geval van AEM op:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  3. Voeg de noodzakelijke configuraties OSGi toe zodat kunt u uw AEM instantie met een instantie van Adobe Commerce verbinden of de configuraties toevoegen aan het onlangs gecreeerd project.

  4. Op dit moment hebt u een werkende versie van een winkel die is verbonden met een Adobe Commerce-instantie. Ga naar de US > Home pagina bij: http://localhost:4502/editor.html/content/venia/us/en.html.

    Je moet zien dat de winkel het Venia-thema gebruikt. Als u het hoofdmenu van de winkel uitbreidt, ziet u verschillende categorieën die aangeven dat de verbinding met Adobe Commerce werkt.

    Storefront geconfigureerd met Venia-thema

Auteur van de producttaser author-product-teaser

De component Product Teaser wordt tijdens deze zelfstudie uitgebreid. Als eerste stap voegt u een exemplaar van de Product Teaser toe aan de startpagina om de basislijnfunctionaliteit te begrijpen.

  1. Ga naar de Startpagina van het gebied: http://localhost:4502/editor.html/content/acme/us/en.html

  2. Een nieuwe invoegtoepassing Productteam Component in de hoofdlay-outcontainer op de pagina.

    Productteam invoegen

  3. Vouw het zijpaneel uit (indien nog niet in-/uitgeschakeld) en schakel het vervolgkeuzemenu voor het zoeken van elementen naar Producten. Dit zou een lijst van beschikbare producten van een verbonden instantie van Adobe Commerce moeten tonen. Selecteer een product en slepen+neerzetten het op de Productteam op de pagina.

    Slepen en productteam neerzetten

    note note
    NOTE
    Nota, kunt u het getoonde product ook vormen door de component te vormen gebruikend de dialoog (klikkend moersleutel pictogram).
  4. Er wordt nu een product weergegeven door de Product Teaser. De naam van het product en de prijs van het product zijn standaardkenmerken die worden weergegeven.

    Producttaser - standaardstijl

Een aangepast kenmerk toevoegen in Adobe Commerce add-custom-attribute

De in AEM weergegeven producten en productgegevens worden opgeslagen in Adobe Commerce. Voeg vervolgens een kenmerk toe voor Eco Friendly als onderdeel van het kenmerk product dat is ingesteld met de gebruikersinterface van Adobe Commerce.

TIP
Hebt u al een aangepaste Ja/Nee kenmerk als onderdeel van de set productkenmerken? Voel u vrij om het te gebruiken en sla deze sectie over.
  1. Meld u aan bij uw Adobe Commerce-exemplaar.

  2. Navigeren naar Catalogus > Producten.

  3. Werk het zoekfilter bij zodat u het Configureerbaar product worden gebruikt wanneer toegevoegd aan de component Teaser in de vorige oefening. Open het product in de bewerkingsmodus.

    Zoeken naar Valeria-product

  4. Klik in de productweergave op Kenmerk toevoegen > Nieuw kenmerk maken.

  5. Vul de Nieuw kenmerk formulier met de volgende waarden (standaardinstellingen voor andere waarden behouden)

    table 0-row-3 1-row-3 2-row-3 3-row-3
    Veldset Veldlabel Waarde
    Eigenschappen van kenmerk Kenmerklabel Eco Friendly
    Eigenschappen van kenmerk Invoertype catalogus Ja/Nee
    Geavanceerde kenmerkeigenschappen Kenmerkcode ecovriendelijk

    Nieuw kenmerkformulier

    Klikken Kenmerk opslaan wanneer gereed.

  6. Ga naar de onderkant van het product en vouw de Attributen kop. U moet de nieuwe Eco Friendly veld. Schakelen tussen Ja.

    Overschakelen op ja

    Opslaan de veranderingen in het product.

    note tip
    TIP
    Meer informatie over het beheren Productkenmerken vindt u in de gebruikershandleiding van Adobe Commerce.
  7. Navigeren naar Systeem > Gereedschappen > Cachebeheer. Omdat het gegevensschema is bijgewerkt, moet u enkele soorten cache in Adobe Commerce ongeldig maken.

  8. Schakel het selectievakje naast Configuratie en verzend het cachetype voor Vernieuwen

    Type configuratiecache vernieuwen

    note tip
    TIP
    Meer informatie over Cache Management vindt u in de Adobe Commerce-gebruikershandleiding.

GraphQL IDE gebruiken om kenmerk te verifiëren use-graphql-ide

Voordat u naar AEM code gaat, is het handig om de Adobe Commerce GraphQL een GraphQL-IDE gebruiken. De Adobe Commerce-integratie met AEM gebeurt voornamelijk via een reeks GraphQL-query's. Het begrijpen en wijzigen van de vragen van GraphQL is één van de belangrijkste manieren waarop de Componenten van de CIFKern kunnen worden uitgebreid.

Gebruik vervolgens een GraphQL-IDE om te controleren of de eco_friendly kenmerk is toegevoegd aan de set productkenmerken. Screenshots in deze zelfstudie gebruiken de Google Chrome-extensie Altair GraphQL Client.

  1. GraphQL-IDE openen en URL invoeren http://<server>/graphql in de bar URL van uw winde of uitbreiding.

  2. Voeg het volgende toe productquery waar YOUR_SKU is de SKU van het product dat bij de vorige exercitie werd gebruikt:

    code language-json
      {
        products(
        filter: { sku: { eq: "YOUR_SKU" } }
        ) {
            items {
            name
            sku
            eco_friendly
            }
        }
    }
    
  3. Voer de vraag uit en u zou een reactie als het volgende moeten krijgen:

    code language-json
    {
      "data": {
        "products": {
          "items": [
            {
              "name": "Valeria Two-Layer Tank",
              "sku": "VT11",
              "eco_friendly": 1
            }
          ]
        }
      }
    }
    

    Voorbeeld GraphQL-reactie

De waarde van Ja is een geheel getal van 1. Dit is handig wanneer u de GraphQL-query in Java™ schrijft.

TIP
Meer gedetailleerde documentatie over Adobe Commerce GraphQL is hier te vinden.

Het verkoopmodel voor de producttaser bijwerken updating-sling-model-product-teaser

Daarna, breidt u de bedrijfslogica van de Teaser van het Product door een het Verkopen Model uit te voeren uit. Verkoopmodellen zijn annotatiegestuurde "POJO's" (normale oude Java™-objecten) die een van de bedrijfslogica implementeren die nodig is voor de component. Sling Models worden gebruikt met de manuscripten HTML als deel van de component. Volg de delegatiepatroon voor verkoopmodellen zodat u onderdelen van het bestaande productteammodel kunt uitbreiden.

Sling Models worden geïmplementeerd als Java™ en zijn te vinden in het dialoogvenster kern module van het gegenereerde project.

Gebruiken de IDE van uw keuze het Venia-project in te voeren. De gebruikte screenshots zijn afkomstig van de Visual Studio Code IDE.

  1. In uw winde, navigeer onder kern module naar: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

    Core location IDE

    MyProductTeaser.java is een Java™ Interface die de CIF uitbreidt ProductTeaser interface.

    Er is al een nieuwe methode toegevoegd met de naam isShowBadge() om een badge weer te geven als het product als "Nieuw" wordt beschouwd.

  2. Een methode toevoegen isEcoFriendly() aan de interface:

    code language-java
    @ProviderType
    public interface MyProductTeaser extends ProductTeaser {
        // Extend the existing interface with the additional properties which you
        // want to expose to the HTL template.
        public Boolean isShowBadge();
    
        public Boolean isEcoFriendly();
    }
    

Dit is een nieuwe methode om de logica in te kapselen om erop te wijzen of het product heeft eco_friendly kenmerk ingesteld op Ja of Nee.

  1. Controleer vervolgens de MyProductTeaserImpl.java om core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

    De delegatiepatroon voor verkoopmodellen toestaat MyProductTeaserImpl verwijzing ProductTeaser model via de sling:resourceSuperType eigenschap:

    code language-java
    @Self
    @Via(type = ResourceSuperType.class)
    private ProductTeaser productTeaser;
    

    Voor alle methoden die niet zijn overschreven of gewijzigd, kunt u de waarde retourneren die ProductTeaser retourneert. Bijvoorbeeld:

    code language-java
    @Override
    public String getImage() {
        return productTeaser.getImage();
    }
    

    Dit minimaliseert de hoeveelheid code Java™ die een implementatie moet schrijven.

  2. Een van de extra extensiepunten die wordt geleverd door AEM Core Components is de AbstractProductRetriever die toegang biedt tot specifieke productkenmerken. Inspect the initModel() methode:

    code language-java
    import javax.annotation.PostConstruct;
    ...
    @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
    public class MyProductTeaserImpl implements MyProductTeaser {
        ...
        private AbstractProductRetriever productRetriever;
    
        /* add this method to intialize the proudctRetriever */
        @PostConstruct
        public void initModel() {
            productRetriever = productTeaser.getProductRetriever();
    
            if (productRetriever != null) {
                productRetriever.extendProductQueryWith(p -> p.createdAt());
            }
    
        }
    ...
    

    De @PostConstruct De aantekening zorgt ervoor dat deze methode wordt geroepen wanneer het het Verdelen Model wordt geïnitialiseerd.

    U ziet dat de GraphQL-query voor het product al is uitgebreid met de extendProductQueryWith methode om de extra created_at kenmerk. Dit kenmerk wordt later gebruikt als onderdeel van het dialoogvenster isShowBadge() methode.

  3. Werk de GraphQL-query bij en voeg de eco_friendly kenmerk in de gedeeltelijke query:

    code language-java
    //MyProductTeaserImpl.java
    
    private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";
    
    @PostConstruct
    public void initModel() {
        productRetriever = productTeaser.getProductRetriever();
    
        if (productRetriever != null) {
            productRetriever.extendProductQueryWith(p -> p
                .createdAt()
                .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
            );
        }
    }
    

    Toevoegen aan de extendProductQueryWith Deze methode is een krachtige manier om ervoor te zorgen dat extra productkenmerken beschikbaar zijn voor de rest van het model. Het minimaliseert ook het aantal uitgevoerde vragen.

    In de bovenstaande code worden deaddCustomSimpleField wordt gebruikt om de eco_friendly kenmerk. Dit illustreert hoe u kunt zoeken naar aangepaste kenmerken die deel uitmaken van het Adobe Commerce-schema.

    note note
    NOTE
    De createdAt() is geïmplementeerd als onderdeel van de Productinterface. De meeste algemeen gevonden schemakenmerken zijn uitgevoerd, zo slechts gebruik addCustomSimpleField voor werkelijk aangepaste kenmerken.
  4. Voeg een logger toe zodat u hiermee fouten in de Java™-code kunt opsporen:

    code language-java
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    ...
    @Model(adaptables = SlingHttpServletRequest.class, adapters = MyProductTeaser.class, resourceType = MyProductTeaserImpl.RESOURCE_TYPE)
    public class MyProductTeaserImpl implements MyProductTeaser {
    
    private static final Logger LOGGER = LoggerFactory.getLogger(MyProductTeaserImpl.class);
    
  5. Vervolgens implementeert u de isEcoFriendly() methode:

    code language-java
    @Override
    public Boolean isEcoFriendly() {
    
        Integer ecoFriendlyValue;
        try {
            ecoFriendlyValue = productRetriever.fetchProduct().getAsInteger(ECO_FRIENDLY_ATTRIBUTE);
            if(ecoFriendlyValue != null && ecoFriendlyValue.equals(Integer.valueOf(1))) {
                LOGGER.info("*** Product is Eco Friendly**");
                return true;
            }
        } catch (SchemaViolationError e) {
            LOGGER.error("Error retrieving eco friendly attribute");
        }
        LOGGER.info("*** Product is not Eco Friendly**");
        return false;
    }
    

    In de bovenstaande methode worden de productRetriever wordt gebruikt om het product en de getAsInteger() wordt gebruikt om de waarde van eco_friendly kenmerk. Op basis van de GraphQL-query's die u eerder hebt uitgevoerd, weet u dat de verwachte waarde eco_friendly kenmerk is ingesteld op "Ja" is eigenlijk een geheel getal van 1.

    Nu het Verkoopmodel is bijgewerkt, werkt u de componentmarkering bij om een indicator weer te geven van Eco Friendly op basis van het verkoopmodel.

De opmaak van de producttaser aanpassen customize-markup-product-teaser

Een algemene uitbreiding van AEM componenten is het wijzigen van de markering die door de component wordt gegenereerd. Dit wordt gedaan door met voeten te treden HTML-script dat de component gebruikt om zijn prijsverhoging terug te geven. De Taal van het Malplaatje van de HTML (HTL), is een lichtgewichtmalplaatjetaal die AEM componenten gebruiken om prijsverhoging dynamisch terug te geven die op authored inhoud wordt gebaseerd, toestaand de componenten om worden opnieuw gebruikt. De producttaser kan bijvoorbeeld steeds opnieuw worden gebruikt om verschillende producten weer te geven.

In dit geval, wilt u een banner op de teaser teruggeven om erop te wijzen dat het product "Milieuvriendelijk"gebaseerd op een douaneattribuut is. Het ontwerppatroon voor de markering aanpassen van een component is standaard voor alle AEM Componenten, niet alleen voor de AEM CIF Core Components.

NOTE
Als u een component aanpast met de CIF product- en categoriekiezers zoals deze Product Teaser of de CIF paginacomponent, moet u de vereiste cif.shell.picker clientlib voor de componentdialoogvensters. Zie Gebruik van CIF product- en rubriekkiezer voor meer informatie.
  1. In winde, navigeer en breid uit ui.apps en breid de maphiërarchie uit naar: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser en inspecteer de .content.xml bestand.

    Productieteams ui.apps

    code language-xml
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
        jcr:description="Product Teaser Component"
        jcr:primaryType="cq:Component"
        jcr:title="Product Teaser"
        sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser"
        componentGroup="Venia - Commerce"/>
    

    De componentdefinitie voor de Product Teaser Component in dit project is hierboven. Let op de eigenschap sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Dit is een voorbeeld van een Proxy-component. In plaats van alle HTML-scripts van de Product Teaser te kopiëren en te plakken van de AEM CIF Core Components, kunt u de opdracht sling:resourceSuperType om alle functionaliteit over te nemen.

  2. Het bestand openen productteaser.html. Dit is een kopie van het productteaser.html bestand van de CIF

    code language-html
    <!--/* productteaser.html */-->
    <sly
      data-sly-use.product="com.venia.core.models.commerce.MyProductTeaser"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-use.actionsTpl="actions.html"
      data-sly-test.isConfigured="${properties.selection}"
      data-sly-test.hasProduct="${product.url}"
    ></sly>
    

    Let op: het verkoopmodel voor MyProductTeaser wordt gebruikt en toegewezen aan product variabele.

  3. Bewerken productteaser.html zodat de isEcoFriendly in de vorige exercitie toegepaste methode:

    code language-html
    ...
    <div
      data-sly-test="${isConfigured && hasProduct}"
      class="item__root"
      data-cmp-is="productteaser"
      data-virtual="${product.virtualProduct}"
    >
      <div data-sly-test="${product.showBadge}" class="item__badge">
        <span>${properties.text || 'New'}</span>
      </div>
      <!--/* Insert call to Eco Friendly here */-->
      <div data-sly-test="${product.ecoFriendly}" class="item__eco">
        <span>Eco Friendly</span>
      </div>
      ...
    </div>
    

    Bij het aanroepen van een Sling Model-methode in HTML wordt de get en is Het gedeelte van de methode wordt verwijderd en de eerste letter wordt ingekort. Dus isShowBadge() wordt .showBadge en isEcoFriendly wordt .ecoFriendly. Gebaseerd op de booleaanse waarde die is geretourneerd van .isEcoFriendly() bepaalt of de <span>Eco Friendly</span> wordt weergegeven.

    Meer informatie over data-sly-test en andere HTML-blokinstructies vindt u hier.

  4. Sparen de veranderingen en stel de updates in om AEM te gebruiken uw Maven vaardigheden, van een bevel-lijn terminal op te stellen:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  5. Open een nieuw browservenster en navigeer naar AEM OSGi-console > Status > Verkoopmodellen: http://localhost:4502/system/console/status-slingmodels

  6. Zoeken naar MyProductTeaserImpl en u zou een lijn als het volgende moeten zien:

    code language-plain
    com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser
    

    Dit wijst erop dat het het Verdelen Model behoorlijk is opgesteld en aan de correcte component in kaart gebracht.

  7. Vernieuwen naar de Introductiepagina van Venia om http://localhost:4502/editor.html/content/venia/us/en.html waarbij de producttaser is toegevoegd.

    Eco Friendly message displayed

    Als het product de eco_friendly kenmerk ingesteld op Ja, moet u de tekst "Eco Friendly" op de pagina zien. Probeer over te schakelen op verschillende producten om de gedragswijziging te zien.

  8. Open vervolgens de AEM error.log om de logboekverklaringen te zien die werden toegevoegd. De error.log is om <AEM SDK Install Location>/crx-quickstart/logs/error.log.

    Zoek in de AEM logboeken naar de logboekinstructies die in het Sling-model zijn toegevoegd:

    code language-plain
    2020-08-28 12:57:03.114 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is Eco Friendly**
    ...
    2020-08-28 13:01:00.271 INFO [com.venia.core.models.commerce.MyProductTeaserImpl] *** Product is not Eco Friendly**
    ...
    
    note caution
    CAUTION
    U kunt ook enkele stapelsporen zien als het in de teaser gebruikte product niet de eco_friendly kenmerk als onderdeel van de kenmerkset.

Stijlen toevoegen voor de milieuvriendelijke badge add-styles

Op dit punt wordt de logica weergegeven voor het weergeven van de Eco Friendly badge werkt al, maar de onbewerkte tekst kan enkele stijlen gebruiken. Voeg vervolgens een pictogram en stijlen toe aan het dialoogvenster ui.frontend om de implementatie te voltooien.

  1. Download de eco_Vriendelijk.svg bestand. Dit wordt gebruikt als de Eco Friendly badge.

  2. Terugkeer aan winde en navigeer aan winde ui.frontend map.

  3. Voeg de eco_friendly.svg aan de ui.frontend/src/main/resources/images map:

    Eco Friendly SVG toegevoegd

  4. Het bestand openen productteaser.scss om ui.frontend/src/main/styles/commerce/_productteaser.scss.

  5. Voeg de volgende regels van de Klasse binnen toe .productteaser klasse:

    code language-scss
    .productteaser {
        ...
        .item__eco {
            width: 60px;
            height: 60px;
            left: 0px;
            overflow: hidden;
            position: absolute;
            padding: 5px;
    
        span {
            display: block;
            position: absolute;
            width: 45px;
            height: 45px;
            text-indent: -9999px;
            background: no-repeat center center url('../resources/images/eco_friendly.svg');
            }
        }
    ...
    }
    
    note note
    NOTE
    Uitchecken Stijlen CIF kerncomponenten voor meer informatie over front-end workflows.
  6. Sparen de veranderingen en stel de updates in om AEM te gebruiken uw Maven vaardigheden, van een bevel-lijn terminal op te stellen:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  7. Vernieuwen naar de Introductiepagina van Venia om http://localhost:4502/editor.html/content/venia/us/en.html waarbij de producttaser is toegevoegd.

    Eco-vriendelijke badge - definitieve implementatie

Gefeliciteerd congratulations

U hebt uw eerste AEM CIF component aangepast! Download de hier voltooide oplossingsbestanden.

Bonus Challenge bonus-challenge

Controleer de functionaliteit van de Nieuw badge die al is geïmplementeerd in de Product Teaser. Probeer een extra selectievakje voor auteurs toe te voegen om te bepalen wanneer de Eco Friendly badge moet worden weergegeven. Het dialoogvenster voor componenten bijwerken op ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

Nieuwe uitdaging voor Badge-implementatie

Aanvullende bronnen additional-resources

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2