Anpassa AEM CIF kärnkomponenter customize-cif-components

Kör följande Git-kommando så att du kan klona projektet:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Skapa och distribuera projektet till en lokal instans av AEM:

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallSinglePackage,cloud

Lägg till nödvändiga OSGi-konfigurationer så att du ansluter AEM till en Adobe Commerce-instans eller lägger till konfigurationerna i det skapade projektet.

Nu bör du ha en fungerande version av en storefront som är ansluten till en Adobe Commerce-instans. Gå till sidan US > Home på: 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.

Navigera till webbplatsens hemsida: http://localhost:4502/editor.html/content/acme/us/en.html

Infoga en ny Product Teaser-komponent i huvudlayoutbehållaren på sidan.

Expandera sidopanelen (om den inte redan är aktiverad) och växla den nedrullningsbara listan över tillgångssökare till Produkter. Den här listan bör visa en lista över tillgängliga produkter från en ansluten Adobe Commerce-instans. Välj en produkt och dra+släpp den på komponenten Product Teaser på sidan.

Du bör nu se en produkt som visas av Product Teaser. Produktens namn och produktens pris är standardattribut som visas.

Logga in på din Adobe Commerce-instans.

Navigera till Katalog > Produkter.

Uppdatera sökfiltret så att du kan hitta den konfigurerbara produkt som användes när den lades till i Teaser-komponenten i föregående övning. Öppna produkten i redigeringsläge.

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

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

Klicka på Spara attribut när du är klar.

Bläddra till produktens nedre del och expandera rubriken Attribut. Det nya fältet Eko-Friendly ska visas. Växla till Ja.

Spara ändringarna i produkten.

Navigera till System > Verktyg > Cachehantering. Eftersom en uppdatering gjordes av dataschemat måste du göra vissa cachetyper i Adobe Commerce ogiltiga.

Markera rutan bredvid Konfiguration och skicka cachetypen för Uppdatera

Öppna GraphQL IDE och ange URL:en http://<commerce-server>/graphql i URL-fältet för IDE eller tillägget.

Lägg till följande produktfråga där YOUR_SKU är SKU för den produkt som användes i föregående övning:

  {
    products(
    filter: { sku: { eq: "YOUR_SKU" } }
    ) {
        items {
        name
        sku
        eco_friendly
        }
    }
}

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

Värdet Yes är heltalet 1. Detta värde är användbart när du skriver GraphQL-frågan i Java™.

I din IDE navigerar du under core -modulen till: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

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 emblem om produkten betraktas som"ny".

Lägg till isEcoFriendly() i 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();
}

Den här nya metoden introduceras för att kapsla in logiken som anger om produkten har attributet eco_friendly inställt på Yes eller No.

Kontrollera sedan MyProductTeaserImpl.java på core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

Delegeringsmönstret för delningsmodeller gör att MyProductTeaserImpl kan referera till ProductTeaser-modellen via egenskapen sling:resourceSuperType:

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

För de metoder som du inte vill åsidosätta eller ändra kan du returnera värdet som returneras av ProductTeaser. Till exempel:

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

Den här metoden minimerar mängden Java™-kod som en implementering måste skriva.

En av de extra tilläggspunkterna AEM Core Components är AbstractProductRetriever som ger åtkomst till specifika produktattribut. Inspect metoden initModel():

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

    }
...

Anteckningen @PostConstruct ser till att den här metoden anropas när Sling-modellen initieras.

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

Uppdatera GraphQL-frågan så att attributet eco_friendly inkluderas 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)
        );
    }
}

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

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

Lägg till en loggare så att du kan 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);

Implementera sedan metoden isEcoFriendly():

@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 används productRetriever för att hämta produkten och metoden getAsInteger() används för att hämta värdet för attributet eco_friendly. Baserat på de GraphQL-frågor du körde tidigare vet du att det förväntade värdet när attributet eco_friendly är inställt på Yes är i själva verket ett heltal på 1.

Nu när delningsmodellen har uppdaterats måste komponentkoden uppdateras så att den visar indikatorn Eco Friendly baserat på delningsmodellen.

I IDE navigerar och expanderar du modulen ui.apps och expanderar mapphierarkin till: ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser och inspekterar filen .content.xml.

<?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"/>

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

Öppna filen productteaser.html. Den här filen är en kopia av filen 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 variabeln product.

Ändra productteaser.html så att du kan anropa den isEcoFriendly-metod som implementerades 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 du anropar en Sling Model-metod i HTML tas delen get och is av metoden bort och den första bokstaven sänks. isShowBadge() blir alltså .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-blocksatser finns i HTML-specifikationen.

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

Öppna ett nytt webbläsarfönster och navigera till AEM och OSGi-konsolen > Status > Sling Models: http://localhost:4502/system/console/status-slingmodels

Sök efter MyProductTeaserImpl och du bör se en rad som följande:

com.venia.core.models.commerce.MyProductTeaserImpl - venia/components/commerce/productteaser

Den här raden anger att Sling-modellen är korrekt distribuerad och mappad till rätt komponent.

Uppdatera till Venias hemsida på http://localhost:4502/editor.html/content/venia/us/en.html där Product Teaser har lagts till.

Om produkten har attributet eco_friendly inställt på Yes bör 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.

Öppna sedan AEM error.log för att se de tillagda loggsatserna. error.log är på <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Sök i AEM loggar för att se de tillagda loggsatserna 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**
...

Hämta filen eco_friendly.svg. Den här filen används som märket Eko-Friendly.

Återgå till IDE och navigera till mappen ui.frontend.

Lägg till filen eco_friendly.svg i mappen ui.frontend/src/main/resources/images:

Öppna filen productteaser.scss vid ui.frontend/src/main/styles/commerce/_productteaser.scss.

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

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

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

Uppdatera till Venias hemsida på http://localhost:4502/editor.html/content/venia/us/en.html där Product Teaser har lagts till.