Anpassa Adobe Experience Manager CIF-komponenter customize-cif-components

The CIF Venia Project är en referenskodbas för att använda CIF kärnkomponenter. I den här självstudiekursen utökar du Product Teaser om du vill visa ett anpassat attribut från Adobe Commerce. Du kan även läsa mer om GraphQL-integrationen mellan Adobe Experience Manager (AEM) och Adobe Commerce och de tilläggskopplingar som finns i CIF Core Components.

TIP
Använd AEM projekttyp när du startar en egen implementering av e-handeln.

Vad du ska bygga

Varumärket Venia började nyligen tillverka vissa produkter med hjälp av hållbara material och företaget skulle vilja visa en Miljövänlig som en del av Product Teaser. Ett nytt anpassat attribut skapas i Adobe Commerce för att ange om en produkt använder Miljövänlig material. Det här anpassade attributet läggs till som en del av GraphQL-frågan och visas i Product Teaser för angivna produkter.

Slutlig implementering av Eco-Friendly Badge

Förutsättningar prerequisites

Det krävs en lokal utvecklingsmiljö för att slutföra den här självstudiekursen. Detta inkluderar en instans av AEM som körs och som är konfigurerad och ansluten till en Adobe Commerce-instans. Granska kraven och stegen för konfigurera en lokal utveckling med AEM. Om du vill följa självstudiekursen fullständigt måste du ha behörighet att lägga till Attribut till en produkt i Adobe Commerce.

Du behöver också GraphQL IDE som GraphiQL eller ett webbläsartillägg för att köra kodexempel och självstudiekurser. Om du installerar ett webbläsartillägg måste du se till att det går att ange begäranrubriker. På Google Chrome Altair GraphQL Client är ett tillägg som kan utföra jobbet.

Klona Veniaprojektet clone-venia-project

Du klonar Venedig-projektet och åsidosätt sedan standardformaten.

NOTE
Du kan använda ett befintligt projekt (baserat på AEM Project Archetype med CIF inkluderat) och hoppa över det här avsnittet.
  1. Kör följande Git-kommando så att du kan klona projektet:

    code language-shell
    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Skapa och distribuera projektet till en lokal instans av AEM:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  3. Lägg till nödvändiga OSGi-konfigurationer så att du kan ansluta AEM till en Adobe Commerce-instans eller lägga till konfigurationerna i det nya projektet.

  4. Nu bör du ha en fungerande version av en storefront som är ansluten till en Adobe Commerce-instans. Navigera till US > Home sida vid: http://localhost:4502/editor.html/content/venia/us/en.html.

    Du ser att butiken för närvarande använder temat Venia. När du expanderar huvudmenyn för butiken bör du se olika kategorier som anger att anslutningen till Adobe Commerce fungerar.

    Storefront konfigurerat med Venia-tema

Skapa Product Teaser author-product-teaser

Product Teaser Component utökas genom hela kursen. Som ett första steg lägger du till en instans av Product Teaser på startsidan för att förstå baslinjefunktionerna.

  1. Navigera till Hemsida för platsen: http://localhost:4502/editor.html/content/acme/us/en.html

  2. Infoga en ny Product Teaser Komponent i sidans huvudlayoutbehållare.

    Insert Product Teaser

  3. Expandera sidopanelen (om den inte redan är aktiverad) och växla till listrutan för resurssökning. Produkter. Här visas en lista över tillgängliga produkter från en ansluten Adobe Commerce-instans. Välj en produkt och dra och släpp den på Product Teaser på sidan.

    Dra och släpp Product Teaser

    note note
    NOTE
    Observera att du även kan konfigurera den visade produkten genom att konfigurera komponenten med hjälp av dialogrutan (klicka på wrench ikon).
  4. Du bör nu se en produkt som visas av Product Teaser. Produktens namn och produktens pris är standardattribut som visas.

    Product Teaser - standardstil

Lägg till ett anpassat attribut i Adobe Commerce add-custom-attribute

De produkter och produktdata som visas i AEM lagras i Adobe Commerce. Lägg sedan till ett attribut för Miljövänlig som en del av produktattributet som anges med Adobe Commerce användargränssnitt.

TIP
Har redan en anpassad Ja/Nej som en del av din produktattributuppsättning? Du kan använda den och hoppa över det här avsnittet.
  1. Logga in på din Adobe Commerce-instans.

  2. Navigera till Katalog > Produkter.

  3. Uppdatera sökfiltret så att du kan hitta Konfigurerbar produkt används när de läggs till Teaser-komponenten i föregående övning. Öppna produkten i redigeringsläge.

    Sök efter Valeria-produkt

  4. Klicka på i produktvyn Lägg till attribut > Skapa nytt attribut.

  5. Fyll i Nytt attribut formulär med följande värden (lämna standardinställningarna för andra värden)

    table 0-row-3 1-row-3 2-row-3 3-row-3
    Fältuppsättning Fältetikett Värde
    Attributegenskaper Attributetikett Miljövänlig
    Attributegenskaper Indatatyp för katalog Ja/Nej
    Avancerade attributegenskaper Attributkod miljövänlig

    Nytt attributformulär

    Klicka Spara attribut när du är klar.

  6. Rulla längst ned i produkten och expandera Attribut rubrik. Du borde se det nya Miljövänlig fält. Växla till Ja.

    Växla till ja

    Spara ändringar av produkten.

    note tip
    TIP
    Mer information om hantering Produktattribut finns i användarhandboken för Adobe Commerce.
  7. Navigera till System > verktyg > Cachehantering. Eftersom en uppdatering gjordes av dataschemat måste du göra vissa cachetyper i Adobe Commerce ogiltiga.

  8. Markera rutan bredvid Konfiguration och skicka cachetypen för Uppdatera

    Uppdatera cachetyp för konfiguration

    note tip
    TIP
    Mer information om Cachehantering finns i användarhandboken för Adobe Commerce.

Använd en GraphQL-utvecklingsmiljö för att verifiera attribut use-graphql-ide

Innan du hoppar in i AEM kod är det praktiskt att utforska Adobe Commerce GraphQL med en GraphQL IDE. Adobe Commerce integrering med AEM görs huvudsakligen via en serie GraphQL-frågor. Att förstå och ändra GraphQL-frågor är ett av de viktigaste sätten att utöka CIF kärnkomponenter.

Använd sedan en GraphQL-utvecklingsmiljö för att verifiera att eco_friendly har lagts till i produktattributuppsättningen. Skärmbilder i den här självstudien använder tillägget Google Chrome Altair GraphQL Client.

  1. Öppna GraphQL IDE och ange URL:en http://<server>/graphql i URL-fältet för den utvecklingsmiljö eller det tillägg du använder.

  2. Lägg till följande produktfråga där YOUR_SKU är SKU av den produkt som använts i föregående undersökning:

    code language-json
      {
        products(
        filter: { sku: { eq: "YOUR_SKU" } }
        ) {
            items {
            name
            sku
            eco_friendly
            }
        }
    }
    
  3. Kör frågan så får du ett svar som följande:

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

    Exempel på GraphQL-svar

Värdet för Ja är ett heltal av 1. Detta är användbart när du skriver GraphQL-frågan i Java™.

TIP
Mer detaljerad dokumentation om Adobe Commerce GraphQL finns här.

Uppdatera produktundervisningsmodellen updating-sling-model-product-teaser

Därefter utökar du affärslogiken i Product Teaser genom att implementera en Sling Model. Sling Models är anteckningsdrivna "POJOs" (Plain Old Java™ Objects) som implementerar någon av de affärslogik som komponenten behöver. Sling-modeller används med HTML-skript som en del av komponenten. Följ Delegeringsmönster för delningsmodeller så att du kan utöka delar av den befintliga Product Teaser-modellen.

Sling Models implementeras som Java™ och finns i kärna för det genererade projektet.

Använd den utvecklingsmiljö du vill för att importera Venia-projektet. Skärmbilder som används finns i Visual Studio Code IDE.

  1. I din utvecklingsmiljö navigerar du under kärna till: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

    IDE för huvudplats

    MyProductTeaser.java är ett Java™-gränssnitt som utökar CIF ProductTeaser gränssnitt.

    En ny metod har redan lagts till med namnet isShowBadge() för att visa ett märke om produkten anses vara"Nytt".

  2. Lägg till en metod isEcoFriendly() till gränssnittet:

    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();
    }
    

Detta är en ny metod för att kapsla in logiken som anger om produkten har eco_friendly attribut inställt på Ja eller Nej.

  1. Kontrollera sedan MyProductTeaserImpl.javacore/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

    The Delegeringsmönster för delningsmodeller tillåter MyProductTeaserImpl till referens ProductTeaser modell via sling:resourceSuperType egenskap:

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

    För alla metoder som inte åsidosätts eller ändras kan du returnera värdet som ProductTeaser returneras. Till exempel:

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

    Detta minimerar mängden Java™-kod som en implementering måste skriva.

  2. En av de extra tilläggspunkterna AEM Core Components är AbstractProductRetriever som ger tillgång till specifika produktattribut. Inspect initModel() metod:

    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());
            }
    
        }
    ...
    

    The @PostConstruct anteckningen säkerställer att den här metoden anropas när Sling Model initieras.

    Observera att GraphQL-frågan redan har utökats med extendProductQueryWith metod för att hämta ytterligare created_at -attribut. Det här attributet används senare som en del av isShowBadge() -metod.

  3. Uppdatera GraphQL-frågan så att den innehåller eco_friendly attribut i den partiella frågan:

    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)
            );
        }
    }
    

    Lägga till i extendProductQueryWith är ett kraftfullt sätt att säkerställa att ytterligare produktattribut är tillgängliga för resten av modellen. Det minimerar även antalet frågor som körs.

    I ovanstående kod visasaddCustomSimpleField används för att hämta eco_friendly -attribut. Detta visar hur du kan söka efter anpassade attribut som ingår i Adobe Commerce-schemat.

    note note
    NOTE
    The createdAt() har implementerats som en del av Produktgränssnitt. De flesta av de vanligaste schemaattributen har implementerats, så använd bara addCustomSimpleField för verkligt anpassade attribut.
  4. Lägg till en längre behållare så att den kan hjälpa dig felsöka Java™-koden:

    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. Implementera sedan isEcoFriendly() metod:

    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;
    }
    

    I ovanstående metod productRetriever används för att hämta produkten och getAsInteger() -metoden används för att hämta värdet för eco_friendly -attribut. Baserat på de GraphQL-frågor du körde tidigare vet du att det förväntade värdet när eco_friendly attribute is set to "Ja" är i själva verket ett heltal av 1.

    När du nu uppdaterat segmentmodellen uppdaterar du komponentkoden så att den visar en indikator på Miljövänlig baserat på Sling-modellen.

Anpassa koden för Product Teaser customize-markup-product-teaser

Ett vanligt tillägg för AEM är att ändra den kod som genereras av komponenten. Detta görs genom att åsidosätta HTL-skript som komponenten använder för att återge sin kod. HTML Template Language (HTL) är ett lättviktsmallspråk som används AEM komponenter för att dynamiskt återge kod baserat på det innehåll som skapats, vilket gör att komponenterna kan återanvändas. Product Teaser kan till exempel återanvändas om och om igen för att visa olika produkter.

I det här fallet vill du återge en banderoll ovanpå teaser för att ange att produkten är"miljövänlig" baserat på ett anpassat attribut. Designmönstret för anpassa markeringen för en komponent är standard för alla AEM komponenter, inte bara för AEM CIF.

NOTE
Om du anpassar en komponent med hjälp av CIF produkt- och kategoriväljare som detta Product Teaser eller den CIF sidkomponenten måste du inkludera den cif.shell.picker clientlib för komponentdialogrutorna. Se Användning av CIF produkt- och kategoriväljare för mer information.
  1. Navigera i och expandera dialogrutan ui.apps och expandera mapphierarkin till: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser och inspektera .content.xml -fil.

    Product Teaser 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"/>
    

    Komponentdefinitionen för Product Teaser Component i det här projektet är ovan. Observera egenskapen sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Det här är ett exempel på hur du skapar en Proxy-komponent. I stället för att kopiera och klistra in alla HTML-skript för Product Teaser från AEM Core Components kan du använda sling:resourceSuperType för att ärva alla funktioner.

  2. Öppna filen productteaser.html. Det här är en kopia av productteaser.html från CIF Product Teaser

    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>
    

    Observera att Sling-modellen för MyProductTeaser används och tilldelas product variabel.

  3. Redigera productteaser.html så att den anropar isEcoFriendly metod som har använts i föregående övning:

    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>
    

    När en Sling Model-metod anropas i HTML-koden get och is del av metoden tas bort och den första bokstaven minskas. Så isShowBadge() blir .showBadge och isEcoFriendly blir .ecoFriendly. Baserat på det booleska värdet som returneras från .isEcoFriendly() avgör om <span>Eco Friendly</span> visas.

    Mer information om data-sly-test och andra HTML-blockprogramsatser finns här.

  4. Spara ändringarna och distribuera uppdateringarna till AEM med dina Maven-kunskaper från en kommandoradsterminal:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  5. Öppna ett nytt webbläsarfönster och navigera till AEM och OSGi-konsol > Status > Sling Models: http://localhost:4502/system/console/status-slingmodels

  6. Sök efter MyProductTeaserImpl och du ska se en rad som följande:

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

    Detta indikerar att Sling-modellen har distribuerats korrekt och mappats till rätt komponent.

  7. Uppdatera till Venia - startsidahttp://localhost:4502/editor.html/content/venia/us/en.html där Product Teaser har lagts till.

    Miljövänligt meddelande visas

    Om produkten har eco_friendly attribut inställt på Ja ska du se texten"Eco-Friendly" på sidan. Försök med att byta till olika produkter för att se hur beteendet förändras.

  8. Öppna sedan AEM error.log om du vill visa de loggsatser som har lagts till. The error.log är på <AEM SDK Install Location>/crx-quickstart/logs/error.log.

    Sök i AEM loggar för att se de loggsatser som lagts till i Sling-modellen:

    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
    Du kan också se vissa stackspår om den produkt som används i teaser inte har eco_friendly som en del av dess attributuppsättning.

Lägg till stilar för etiketten Eco Friendly add-styles

I det här läget är logiken för när Miljövänlig emblemet fungerar, men den oformaterade texten kan använda vissa format. Lägg sedan till en ikon och format i ui.frontend för att slutföra implementeringen.

  1. Ladda ned eco_friendly.svg -fil. Detta används som Miljövänlig emblem.

  2. Återgå till utvecklingsmiljön och navigera till ui.frontend mapp.

  3. Lägg till eco_friendly.svg till ui.frontend/src/main/resources/images mapp:

    Miljövänlig SVG har lagts till

  4. Öppna filen productteaser.scssui.frontend/src/main/styles/commerce/_productteaser.scss.

  5. Lägg till följande Sass-regler i .productteaser klass:

    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
    Checka ut Utforma CIF kärnkomponenter för mer information om arbetsflöden.
  6. Spara ändringarna och distribuera uppdateringarna till AEM med dina Maven-kunskaper från en kommandoradsterminal:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  7. Uppdatera till Venia - startsidahttp://localhost:4502/editor.html/content/venia/us/en.html där Product Teaser har lagts till.

    Slutlig implementering av Eco-Friendly Badge

Grattis congratulations

Du anpassade den första AEM CIF komponenten! Ladda ned färdiga lösningsfiler här.

Bonus Challenge bonus-challenge

Granska funktionaliteten i Nytt emblem som redan har implementerats i Product Teaser. Försök lägga till en extra kryssruta där författarna kan styra när Miljövänlig emblem ska visas. Uppdatera komponentdialogrutan på ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml.

Utmaning vid implementering av nya märken

Ytterligare resurser additional-resources

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