Anpassa AEM CIF-kärnkomponenter

The CIF Venia Project är en referenskodbas för att använda CIF-kärnkomponenter. I den här självstudiekursen kommer du att utöka Product Teaser om du vill visa ett anpassat attribut från Adobe Commerce. Du får också lära dig mer om GraphQL-integreringen mellan AEM och Adobe Commerce och de tilläggskopplingar som finns i CIF Core Components.

TIPS

Använd AEM 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 sedan till som en del av GraphQL-frågan och visas i Product Teaser för angivna produkter.

Slutlig implementering av miljöanpassade märken

Förutsättningar

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 as a Cloud Service SDK. 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, till exempel 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

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

OBSERVERA

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 för att klona projektet:

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

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallSinglePackage,cloud
    
  3. Lägg till nödvändiga OSGi-konfigurationer för att ansluta AEM till en Adobe Commerce-instans eller lägga till konfigurationerna i det nyskapade 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

Product Teaser Component kommer att byggas ut genom hela kursen. Som ett första steg lägger du till en ny 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äppProduct Teaser på sidan.

    Dra och släpp Product Teaser

    OBSERVERA

    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

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

TIPS

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 för att 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. I produktvyn klickar du på 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)

    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.

  7. Navigera till System > verktyg > Cachehantering. Eftersom en uppdatering har gjorts av dataschemat måste vissa cachetyper i Adobe Commerce göras ogiltiga.

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

    Uppdatera cachetyp för konfiguration

Använd en GraphQL IDE för att verifiera attribut

Innan du börjar använda AEM kod är det praktiskt att utforska GraphQL - översikt med 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 Core-komponenterna.

Använd sedan en GraphQL IDE för att verifiera att eco_friendly har lagts till i produktattributuppsättningen. Skärmbilder i den här självstudiekursen använder Altair GraphQL Client.

  1. Öppna GraphQL IDE och ange URL:en http://<commerce-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:

      {
        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:

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

    Exempel på GraphQL-svar

    Observera att värdet för Ja är ett heltal av 1. Detta är användbart när vi skriver GraphQL-frågan i Java.

    TIPS

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

Uppdatera produktundervisningsmodellen

Därefter ska vi utöka produktTeaser affärslogik genom att implementera en Sling Model. Sling Models, är anteckningsdrivna "POJOs" (Plain Old Java Objects) som implementerar någon av de affärslogik som behövs för komponenten. Sling-modeller används tillsammans med HTML-skript som en del av komponenten. Vi kommer att följa Delegeringsmönster för delningsmodeller så att vi bara 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 ny metod, isEcoFriendly() till gränssnittet:

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

    Det här är en ny metod som vi kommer att införa för att kapsla in logiken som anger om produkten har eco_friendly attribut inställt på Ja eller Nej.

  3. 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:

    @Self
    @Via(type = ResourceSuperType.class)
    private ProductTeaser productTeaser;
    

    För alla metoder som vi inte vill åsidosätta eller ändra kan vi helt enkelt returnera värdet som ProductTeaser returneras. Till exempel:

    @Override
    public String getImage() {
        return productTeaser.getImage();
    }
    

    Detta minimerar mängden Java-kod som en implementering behöver skriva.

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

    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 initialize the productRetriever */
        @PostConstruct
        public void initModel() {
            productRetriever = productTeaser.getProductRetriever();
    
            if (productRetriever != null) {
                productRetriever.extendProductQueryWith(p -> p.createdAt());
            }
    
        }
    ...
    

    The @PostConstruct annoteringsfunktionen ser till att den här metoden anropas så snart som Sling-modellen initieras.

    Observera att produktfrågan GraphQL 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.

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

    //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 kodaddCustomSimpleField 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.

    OBSERVERA

    The createdAt() metoden har faktiskt 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.

  6. Lägg till en loggare som kan hjälpa dig att felsöka Java-koden:

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

    @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å GraphQL-frågor som vi arbetade med tidigare vet vi 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.

    Nu när delningsmodellen har uppdaterats måste komponentkoden uppdateras för att visa en indikator på Miljövänlig baserat på Sling-modellen.

Anpassa koden för 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 (HTML Template Language) ä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 vi å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 faktiskt standard för alla AEM, inte bara för AEM CIF Core Components.

OBSERVERA

Om du anpassar en komponent med CIF-produkt- och kategoriväljare som denna Product Teaser eller 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

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://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"/>
    

    Ovanför finns komponentdefinitionen för Product Teaser Component i vårt projekt. 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 Product Teaser HTML-skript från AEM CIF Core Components kan vi 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

    <!--/* 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 Model för MyProductTeaser används och tilldelas product variabel.

  3. Ändra productteaser.html för att ringa isEcoFriendly metod som har använts i föregående övning:

    ...
    <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:

    $ 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:

    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 att byta till olika produkter för att se hur beteendet förändras.

  8. Öppna AEM error.log för att se de loggsatser vi lagt till. The error.log finns 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:

    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**
    ...
    
    FÖRSIKTIGHET

    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

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 kommer att användas 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:

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

    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:

    $ 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 miljöanpassade märken

Grattis

Du har just skräddarsytt din första AEM CIF-komponent! Ladda ned färdiga lösningsfiler här.

Bonus Challenge

Granska funktionaliteten i Nytt emblem som redan har implementerats i Product Teaser. Försök lägga till ytterligare en kryssruta där författarna kan styra när Miljövänlig emblem ska visas. Du måste 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

På denna sida