AEM CIF-Kernkomponenten anpassen customize-cif-components

Führen Sie den folgenden Git-Befehl aus, damit Sie das Projekt klonen können:

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

Erstellen Sie das Projekt und stellen Sie es in einer lokalen Instanz von AEM bereit:

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

Fügen Sie die erforderlichen OSGi-Konfigurationen hinzu, um Ihre AEM-Instanz mit einer Adobe Commerce-Instanz zu verbinden, oder fügen Sie die Konfigurationen zum erstellten Projekt hinzu.

An diesem Punkt sollten Sie über eine funktionierende Version einer Storefront verfügen, die mit einer Adobe Commerce-Instanz verbunden ist. Navigieren Sie zur Seite US > Home unter: http://localhost:4502/editor.html/content/venia/us/en.html.

Sie sollten sehen, dass die Storefront derzeit im Venia-Design erscheint. Wenn Sie das Hauptmenü der Storefront erweitern, sollten verschiedene Kategorien angezeigt werden, was darauf hinweist, dass die Verbindung mit Adobe Commerce funktioniert.

Navigieren Sie zur Startseite der Site: http://localhost:4502/editor.html/content/acme/us/en.html

Fügen Sie auf der Seite eine neue Produkt-Teaser-Komponente in den Haupt-Layout-Container ein.

Erweitern Sie das seitliche Bedienfeld (falls noch nicht geschehen) und wechseln Sie in der Dropdown-Liste der Asset-Suche zu Produkte. Diese Liste sollte eine Liste der verfügbaren Produkte aus einer verbundenen Adobe Commerce-Instanz anzeigen. Wählen Sie ein Produkt aus und ziehen Sie es auf der Seite per Drag-and-Drop auf die Komponente Produkt-Teaser.

Sie sollten nun sehen, dass der Produkt-Teaser ein Produkt anzeigt. Name und Preis des Produkts sind standardmäßig angezeigte Attribute.

Melden Sie sich bei Ihrer Adobe Commerce-Instanz an.

Navigieren Sie zu Katalog > Produkte.

Aktualisieren Sie den Suchfilter, sodass Sie das konfigurierbare Produkt finden können, das in der vorherigen Übung zur Teaser-Komponente hinzugefügt wurde. Öffnen Sie das Produkt im Bearbeitungsmodus.

Klicken Sie in der Produktansicht auf Attribut hinzufügen > Neues Attribut erstellen.

Füllen Sie das Formular Neues Attribut mit den folgenden Werten aus (bei anderen Werten bleiben die Standardeinstellungen erhalten).

Klicken Sie auf Attribut speichern, wenn Sie fertig sind.

Blättern Sie zum unteren Rand des Produkts und erweitern Sie die Überschrift Attribute. Sie sollten das neue Feld Umweltfreundlich sehen. Schalten Sie die Umschaltfläche in die Position Ja.

Speichern Sie die Änderungen am Produkt.

Navigieren Sie zu System > Tools > Cache-Verwaltung. Da das Datenschema aktualisiert wurde, müssen Sie einige Cache-Typen in Adobe Commerce invalidieren.

Aktivieren Sie das Kontrollkästchen neben Konfiguration und senden Sie den Cache-Typ zum Aktualisieren.

Öffnen Sie die GraphQL-IDE und geben Sie die URL http://<commerce-server>/graphql in die URL-Leiste Ihrer IDE oder Erweiterung ein.

Fügen Sie die folgende Produktabfrage hinzu, wobei YOUR_SKU die SKU des in der vorherigen Übung verwendeten Produkts ist:

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

Führen Sie die Abfrage aus und Sie sollten eine Antwort wie die folgende erhalten:

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

Der Wert von Ja ist eine Ganzzahl von 1. Dieser Wert ist nützlich, wenn Sie die GraphQL-Abfrage in Java™ schreiben.

Navigieren Sie in Ihrer IDE unter dem Kernmodul zu: core/src/main/java/com/venia/core/models/commerce/MyProductTeaser.java.

MyProductTeaser.java ist eine Java™-Schnittstelle, die die CIF-ProductTeaser-Schnittstelle erweitert.

Es wurde bereits eine neue Methode mit dem Namen isShowBadge() zur Anzeige eines Abzeichens hinzugefügt, wenn das Produkt als „Neu“ gilt.

Fügen Sie isEcoFriendly() zur Benutzeroberfläche hinzu:

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

Diese neue Methode wird eingeführt, um die Logik zu kapseln, die angibt, ob das Produkt das Attribut eco_friendly auf Ja oder Nein gesetzt hat.

Überprüfen Sie dann das MyProductTeaserImpl.java unter core/src/main/java/com/venia/core/models/commerce/MyProductTeaserImpl.java.

Das Delegationsmuster für Sling-Modelle ermöglicht es MyProductTeaserImpl, das ProductTeaser-Modell über die sling:resourceSuperType-Eigenschaft zu referenzieren:

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

Für die Methoden, die Sie nicht außer Kraft setzen oder ändern wollen, können Sie den Wert zurückgeben, den ProductTeaser zurückgibt. Zum Beispiel:

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

Diese Methode minimiert die Menge an Java™-Code, die eine Implementierung schreiben muss.

Einer der zusätzlichen Erweiterungspunkte, die von AEM CIF-Kernkomponenten bereitgestellt werden, ist der AbstractProductRetriever, der Zugriff auf bestimmte Produktattribute bietet. Überprüfen Sie die initModel()-Methode:

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

    }
...

Die @PostConstruct-Anmerkung stellt sicher, dass diese Methode aufgerufen wird, wenn das Sling-Modell initialisiert wird.

Beachten Sie, dass das Produkt „GraphQL-Abfrage“ bereits mit der extendProductQueryWith-Methode erweitert wurde, um das zusätzliche created_at-Attribut abzurufen. Dieses Attribut wird später als Teil der isShowBadge()-Methode verwendet.

Aktualisieren Sie die GraphQL-Abfrage, um das eco_friendly-Attribut in die partielle Abfrage einzuschließen:

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

Das Hinzufügen zur extendProductQueryWith-Methode ist eine effektive Möglichkeit, um sicherzustellen, dass dem Rest des Modells zusätzliche Produktattribute zur Verfügung stehen. Außerdem wird die Anzahl der ausgeführten Abfragen minimiert.

Im obigen Code wird das addCustomSimpleField zum Abrufen des eco_friendly-Attributs verwendet. Dieses Attribut verdeutlicht, wie Sie Abfragen für beliebige benutzerdefinierte Attribute durchführen können, die Teil des Adobe Commerce-Schemas sind.

Fügen Sie eine Protokollfunktion hinzu, damit Sie den Java™-Code debuggen können:

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

Implementieren Sie anschließend die isEcoFriendly()-Methode:

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

Bei der obigen Methode wird der productRetriever genutzt, um das Produkt abzurufen, während die getAsInteger()-Methode dazu dient, den Wert des eco_friendly-Attributs abzurufen. Anhand der GraphQL-Abfragen, die Sie zuvor ausgeführt haben, wissen Sie, dass der erwartete Wert, wenn das Attribut eco_friendly auf „Ja“ gesetzt ist, tatsächlich eine Ganzzahl von 1 ist.

Nachdem das Sling-Modell aktualisiert wurde, muss das Komponenten-Markup aktualisiert werden, um basierend auf dem Sling-Modell ein Zeichen für Umweltfreundlich anzuzeigen.

Navigieren Sie in der IDE zum ui.apps-Modul und erweitern Sie es. Erweitern Sie dann die Ordnerhierarchie zu ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser und überprüfen Sie die .content.xml-Datei.

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

Die oben aufgeführte Komponentendefinition gilt für die Produkt-Teaser-Komponente in Ihrem Projekt. Beachten Sie die Eigenschaft sling:resourceSuperType="core/cif/components/commerce/productteaser/v1/productteaser". Diese Eigenschaft ist ein Beispiel für die Erstellung einer Proxy-Komponente. Anstatt die Produkt-Teaser-HTL-Skripte aus den AEM CIF-Kernkomponenten zu kopieren und einzufügen, können Sie sämtliche Funktionen mit sling:resourceSuperType übernehmen.

Öffnen Sie die Datei productteaser.html. Diese Datei ist eine Kopie der productteaser.html-Datei aus dem CIF-Produkt-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>

Beachten Sie, dass das Sling-Modell für MyProductTeaser verwendet und der product-Variablen zugewiesen wird.

Ändern Sie productteaser.html so, dass Sie die in der vorherigen Übung implementierte Methode isEcoFriendly aufrufen können:

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

Beim Aufrufen einer Sling-Modellmethode in HTL werden der get- und is-Abschnitt der Methode verworfen; der erste Buchstabe wird zu einem Kleinbuchstaben. Aus isShowBadge() wird so .showBadge, aus isEcoFriendly wird .ecoFriendly. Basierend auf dem booleschen Wert, der von .isEcoFriendly() zurückgegeben wird, wird ermittelt, ob <span>Eco Friendly</span> angezeigt wird.

Weitere Informationen zu data-sly-test und anderen HTL-Blockanweisungen finden Sie unter Die HTL-Spezifikation.

Speichern Sie die Änderungen und stellen Sie die Aktualisierungen mithilfe Ihrer Maven-Kenntnisse über ein Befehlszeilen-Terminal in AEM bereit:

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

Öffnen Sie ein neues Browser-Fenster. Navigieren Sie zu AEM und dann zur OSGi-Konsole > Status > Sling-Modelle: http://localhost:4502/system/console/status-slingmodels

Suchen Sie nach MyProductTeaserImpl; Sie sollten eine Zeile sehen, die wie folgt aussieht:

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

Diese Zeile zeigt an, dass das Sling-Modell korrekt eingesetzt und der richtigen Komponente zugeordnet wurde.

Aktualisieren Sie zur Venia-Startseite unter http://localhost:4502/editor.html/content/venia/us/en.html, wo der Produkt-Teaser hinzugefügt wurde.

Wenn das eco_friendly-Attribut für das Produkt auf Ja gesetzt ist, sollte auf der Seite der Text „Umweltfreundlich“ angezeigt werden. Versuchen Sie, andere Produkte aufzurufen, um die Verhaltensänderung zu sehen.

Öffnen Sie anschließend AEM error.log, um die hinzugefügten Protokollanweisungen zu sehen. Das error.log befindet sich unter <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Durchsuchen Sie die AEM-Protokolle, um die hinzugefügten Protokollanweisungen im Sling-Modell zu sehen:

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

Laden Sie die Datei eco_friendly.svg herunter. Diese wird als Umweltfreundlich-Zeichen verwendet.

Kehren Sie zur IDE zurück und navigieren Sie zum Ordner ui.frontend.

Fügen Sie die eco_friendly.svg-Datei dem Ordner ui.frontend/src/main/resources/images hinzu:

Öffnen Sie die Datei productteaser.scss unter ui.frontend/src/main/styles/commerce/_productteaser.scss.

Fügen Sie innerhalb der .productteaser-Klasse die folgenden Segmentregeln hinzu:

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

Speichern Sie die Änderungen und stellen Sie die Aktualisierungen mithilfe Ihrer Maven-Kenntnisse über ein Befehlszeilen-Terminal in AEM bereit:

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

Aktualisieren Sie zur Venia-Startseite unter http://localhost:4502/editor.html/content/venia/us/en.html, wo der Produkt-Teaser hinzugefügt wurde.