Anpassa Adobe Experience Manager CIF-komponenter 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 -Pclassic

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.

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 till listrutan Produkter för att hitta resurser. Här visas 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://<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
        }
      ]
    }
  }
}

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

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 alla metoder som inte åsidosätts eller ändras kan du returnera värdet som returneras av ProductTeaser. Till exempel:

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

Detta 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 intialize the proudctRetriever */
    @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. Detta visar hur du kan söka efter anpassade attribut som ingår i Adobe Commerce-schemat.

Lägg till en längre behållare så att den kan hjälpa dig 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 du har uppdaterat delningsmodellen uppdaterar du komponentkoden 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="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 proxykomponent. 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.

Öppna filen productteaser.html. Det här ä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.

Redigera productteaser.html så att den anropar 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 -Pclassic

Ö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

Detta indikerar att Sling-modellen har distribuerats korrekt och mappats 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 loggsatser som lagts till. 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:

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. Det här 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 -Pclassic

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