Anpassen von Adobe Experience Manager-CIF-Kernkomponenten 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 -Pclassic

Fügen Sie die erforderlichen OSGi-Konfigurationen hinzu, um so Ihre AEM-Instanz mit einer Adobe Commerce-Instanz zu verbinden, oder fügen Sie die Konfigurationen dem neu 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 im Dropdown-Menü der Asset-Suche zu Produkte. Nun sollte eine Liste mit verfügbaren Produkten einer verbundenen Adobe Commerce-Instanz angezeigt werden. 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://<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
        }
      ]
    }
  }
}

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 der Schnittstelle eine Methode isEcoFriendly() 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();
}

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

Bei allen Methoden, die nicht überschrieben oder geändert werden, können Sie den Wert zurückgeben, der von ProductTeaser zurückgegeben wird. Zum Beispiel:

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

Dadurch wird die Menge an Java™-Code minimiert, die für eine Implementierung geschrieben werden 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 intialize the proudctRetriever */
    @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. Dadurch wird deutlich, 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 zuvor ausgeführten GraphQL-Abfragen wissen Sie, dass – wenn das Attribut eco_friendly auf Ja gesetzt ist – tatsächlich die Ganzzahl 1 als Wert erwartet wird.

Nachdem das Sling-Modell aktualisiert wurde, aktualisieren Sie das Komponenten-Markup, 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="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"/>

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

Öffnen Sie die Datei productteaser.html. Dies ist eine Kopie der productteaser.html-Datei des CIF-Produkt-Teasers.

<!--/* 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 die in der vorherigen Übung implementierte Methode isEcoFriendly aufgerufen wird:

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

Ö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

Dies bedeutet, dass das Sling-Modell ordnungsgemäß bereitgestellt 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.

Als Nächstes öffnen Sie die AEM-Datei error.log, um die hinzugefügten Protokollanweisungen anzuzeigen. Die Datei error.log befindet sich unter <AEM SDK Install Location>/crx-quickstart/logs/error.log.

Suchen Sie in den AEM-Protokollen nach den Protokollanweisungen, die im Sling-Modell hinzugefügt wurden:

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

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