AEM CIF-Kernkomponenten anpassen

Das CIF-Venia-Projekt ist eine Referenz-Code-Basis für die Verwendung von CIF-Kernkomponenten. In diesem Tutorial erweitern Sie die Komponente Produkt-Teaser weiter, um ein benutzerdefiniertes Attribut von Magento anzuzeigen. Außerdem erfahren Sie mehr über die GraphQL-Integration zwischen AEM und Magento und die von den CIF-Kernkomponenten bereitgestellten Erweiterungs-Hooks.

TIPP

Verwenden Sie den AEM-Projektarchetyp, wenn Sie Ihre eigene Commerce-Implementierung starten.

Was Sie erstellen werden

Die Marke Venia hat vor kurzem begonnen, Produkte mit nachhaltigen Materialien zu produzieren, und das Unternehmen möchte als Teil des Produkt-Teasers ein Zeichen für Umweltfreundlich anzeigen. In Magento wird ein neues benutzerspezifisches Attribut erstellt, um anzugeben, ob ein Produkt das umweltfreundliche Material verwendet. Dieses benutzerspezifische Attribut wird dann als Teil der GraphQL-Abfrage hinzugefügt und im Produkt-Teaser bei bestimmten Produkten angezeigt.

Abzeichen für „Umweltfreundlich“ – endgültige Implementierung

Voraussetzungen

Zum Absolvieren dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Dazu gehört eine laufende Instanz von AEM, die konfiguriert und mit einer Magento-Instanz verbunden ist. Überprüfen Sie die Anforderungen und Schritte zum Einrichten einer lokalen Entwicklungsumgebung mit dem AEM as a Cloud Service SDK. Zum Absolvieren des ganzen Tutorials benötigen Sie Berechtigungen, um in Magento Attribute einem Produkt hinzufügen zu können.

Außerdem benötigen Sie eine GraphQL-IDE wie GraphiQL oder eine Browser-Erweiterung, um die Code-Beispiele und Tutorials ausführen zu können. Stellen Sie beim Installieren einer Browser-Erweiterung sicher, dass diese die Möglichkeit hat, Anfragekopfzeilen festzulegen. In Google Chrome ist der Altair GraphQL Client eine Erweiterung, die dazu geeignet ist.

Venia-Projekt klonen

Wir werden das Venia-Projekt klonen und dann die Standardstile überschreiben.

HINWEIS

Sie können auch ein vorhandenes Projekt nutzen (basierend auf dem AEM-Projektarchetyp mit enthaltenem CIF) und diesen Abschnitt überspringen.

  1. Führen Sie folgenden git-Befehl aus, um das Projekt zu klonen:

    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. 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
    
  3. Fügen Sie die erforderlichen OSGi-Konfigurationen hinzu, um Ihre AEM-Instanz mit einer Magento-Instanz zu verbinden, oder fügen Sie die Konfigurationen dem neu erstellten Projekt hinzu.

  4. An diesem Punkt sollten Sie über eine funktionierende Version einer Storefront verfügen, die mit einer Magento-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 Magento funktioniert.

    Storefront mit konfiguriertem Venia-Design

Produkt-Teaser erstellen

Die Komponente Produkt-Teaser wird im Laufe dieses Tutorials erweitert. Als ersten Schritt fügen Sie der Startseite eine neue Instanz des Produkt- Teasers hinzu. So können Sie sich mit den Grundfunktionen vertraut machen.

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

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

    Produkt-Teaser einfügen

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

    Produkt-Teaser ziehen und ablegen

    HINWEIS

    Beachten Sie, dass Sie das angezeigte Produkt auch konfigurieren können, indem Sie die Komponente mithilfe des Dialogfelds konfigurieren (durch Klicken auf das Schraubenschlüsselsymbol).

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

    Produkt-Teaser – Standardstil

Benutzerdefiniertes Attribut in Magento hinzufügen

Die in AEM angezeigten Produkte und Produktdaten werden in Magento gespeichert. Als Nächstes fügen Sie als Teil des Produktattributs, das mithilfe der Magento-Benutzeroberfläche definiert wird, ein neues Attribut für Umweltfreundlich hinzu.

TIPP

Sie verfügen bereits über ein benutzerdefiniertes Ja/Nein-Attribut als Teil Ihres Produktattributs? Dann können Sie es gerne nutzen und diesen Abschnitt überspringen.

  1. Melden Sie sich bei Ihrer Magento-Instanz an.

  2. Navigieren Sie zu Katalog > Produkte.

  3. Aktualisieren Sie den Suchfilter, um das konfigurierbare Produkt zu finden, das zum Einsatz kam, als es in der vorherigen Übung der Teaser-Komponente hinzugefügt wurde. Öffnen Sie das Produkt im Bearbeitungsmodus.

    Nach Valeria-Produkt suchen

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

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

    Feldsatz Feldbezeichnung Wert
    Attributeigenschaften Attributbezeichnung Umweltfreundlich
    Attributeigenschaften Katalogeingabetyp Ja/Nein
    Erweiterte Attributeigenschaften Attribut-Code eco_friendly

    Neues Attributformular

    Klicken Sie auf Attribut speichern, wenn Sie fertig sind.

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

    Umschaltfläche in die Position „Ja“ umschalten

    Speichern Sie die Änderungen am Produkt.

    TIPP

    Weitere Informationen zur Verwaltung von Produktattributen finden Sie im Magento-Benutzerhandbuch.

  7. Navigieren Sie zu System > Tools > Cache-Verwaltung. Da das Datenschema aktualisiert wurde, müssen wir einige der Cache-Typen in Magento ungültig machen.

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

    Cache-Typ von Konfiguration aktualisieren

GraphQL-IDE zur Überprüfung von Attributen verwenden

Bevor Sie mit dem AEM-Code anfangen, sollten Sie Magento GraphQL mit einer GraphQL-IDE erkunden. Die Magento-Integration mit AEM erfolgt hauptsächlich über eine Reihe von GraphQL-Abfragen. Das Verstehen und Ändern der GraphQL-Abfragen ist eine der wichtigsten Methoden zum Erweitern der CIF-Kernkomponenten.

Verwenden Sie anschließend eine GraphQL-IDE, um zu prüfen, ob das eco_friendly-Attribut dem Produktattributsatz hinzugefügt wurde. Screenshots in diesem Tutorial stellen den Altair GraphQL Client dar.

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

  2. 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
            }
        }
    }
    
  3. 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
            }
          ]
        }
      }
    }
    

    Beispiel-GraphQL-Antwort

    Beachten Sie, dass der Wert von Ja eine Ganzzahl von 1 ist. Dies ist nützlich, wenn wir die GraphQL-Abfrage in Java schreiben.

    TIPP

    Eine detailliertere Dokumentation zu Magento GraphQL finden Sie hier.

Sling-Modell für den Produkt-Teaser aktualisieren

Als Nächstes erweitern wir die Geschäftslogik des Produkt-Teasers durch Implementierung eines Sling-Modells. Sling-Modelle sind von Anmerkungen gesteuerte „POJOs“ (Plain Old Java Objects), die eine beliebige Geschäftslogik implementieren, die von der Komponente benötigt wird. Sling-Modelle werden in Verbindung mit den HTL-Skripten als Teil der Komponente verwendet. Wir folgen dem Delegationsmuster für Sling-Modelle, sodass wir Teile des bestehenden Produkt-Teaser-Modells bequem erweitern können.

Sling-Modelle werden als Java implementiert und können im Kernmodul des erstellten Projekts gefunden werden.

Verwenden Sie eine IDE Ihrer Wahl, um das Venia-Projekt zu importieren. Die verwendeten Screenshots stammen aus der Visual Studio Code-IDE.

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

    Kern-Speicherort-IDE

    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.

  2. Fügen Sie der Schnittstelle eine neue 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();
    }
    

    Dies ist eine neue Methode, die wir einführen werden, um die Logik zu kapseln und anzugeben, ob das eco_friendly-Attribut beim Produkt auf Ja oder Nein gesetzt ist.

  3. Ü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 wir nicht überschreiben oder ändern möchten, können wir einfach den Wert zurückgeben, den der ProductTeaser zurückgibt. Beispiel:

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

    Dadurch wird die Menge an Java-Code minimiert, die eine Implementierung schreiben muss.

  4. 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, sobald das Sling-Modell initialisiert wurde.

    Beachten Sie, dass die GraphQL-Abfrage des Produkts 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.

  5. 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 Magento-Schemas sind.

    HINWEIS

    Die createdAt()-Methode wurde tatsächlich als Teil der Produktschnittstelle implementiert. Die meisten häufig gefundenen Schemaattribute wurden implementiert. Verwenden Sie daher das addCustomSimpleField nur für echte benutzerdefinierte Attribute.

  6. Fügen Sie eine Protokollierung hinzu, um das Debugging des Java-Codes zu erleichtern:

    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. 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 productRetriever genutzt, um das Produkt abzurufen, während die getAsInteger()-Methode dazu dient, den Wert des eco_friendly-Attributs abzurufen. Dank der GraphQL-Abfragen, die wir zuvor ausgeführt haben, wissen wir, dass der erwartete Wert, wenn das eco_friendly-Attribut auf „Ja“ gesetzt ist, eigentlich 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.

Anpassen des Markups für den Produkt-Teaser

Eine gebräuchliche Erweiterung von AEM-Komponenten besteht darin, das von der Komponente erstellte Markup zu ändern. Dies geschieht durch Überschreiben des HTL-Skripts, das die Komponente zum Rendern des Markups verwendet. HTML Template Language (HTL) ist eine einfache Vorlagensprache, die AEM-Komponenten nutzen, um Markup basierend auf erstellten Inhalten dynamisch zu rendern, sodass sich die Komponenten wiederverwenden lassen. So kann z. B. der Produkt-Teaser immer wieder neu verwendet werden, um verschiedene Produkte anzuzeigen.

In unserem Fall möchten wir ein Banner auf dem Teaser rendern, um anhand eines benutzerspezifischen Attributs anzugeben, dass das Produkt „Umweltfreundlich“ ist. Das Design-Muster zum Anpassen des Markups einer Komponente ist eigentlich Standard bei allen AEM-Komponenten, nicht nur bei den AEM CIF-Kernkomponenten.

HINWEIS

Wenn Sie eine Komponente wie diesen Produkt-Teaser oder die CIF-Seitenkomponente mit den CIF-Produkt- und Kategorieauswahlen anpassen, stellen Sie sicher, dass Sie die erforderliche cif.shell.picker-clientlib für die Komponentendialogfelder einschließen. Weitere Informationen finden Sie unter Verwenden der CIF-Produkt- und Kategorieauswahl.

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

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

    Oben sehen Sie die Komponentendefinition für die Produkt-Teaser-Komponente in unserem Projekt. 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 wir sämtliche Funktionen mit sling:resourceSuperType übernehmen.

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

  3. Ändern Sie productteaser.html, um einen Aufruf an die in der vorherigen Übung implementierte isEcoFriendly-Methode durchzuführen:

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

  4. 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
    
  5. Ö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

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

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

    Nachricht für „Umweltfreundlich“ wird angezeigt

    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.

  8. Als Nächstes öffnen Sie das AEM-error.log, um die hinzugefügten Protokollanweisungen anzuzeigen. Das 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**
    ...
    
    VORSICHT

    Es können auch Stapelspuren angezeigt werden, wenn das im Teaser verwendete Produkt als Teil seines Attributsatzes nicht über das eco_friendly-Attribut verfügt.

Stile für das Zeichen „Umweltfreundlich“ hinzufügen

An diesem Punkt funktioniert die Logik dafür, wann das Zeichen Umweltfreundlich angezeigt werden soll, bereits, der Text könnte aber noch mehr Stil vertragen. Fügen Sie dem ui.frontend-Modul als Nächstes ein Symbol und Stile hinzu, um die Implementierung abzuschließen.

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

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

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

    SVG für „Umweltfreundlich“ hinzugefügt

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

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

    Weitere Informationen zu Frontend-Workflows finden Sie unter Festlegung des Stils von CIF-Kernkomponenten.

  6. 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
    
  7. Aktualisieren Sie zur Venia-Startseite unter http://localhost:4502/editor.html/content/venia/us/en.html, wo der Produkt-Teaser hinzugefügt wurde.

    Abzeichen für „Umweltfreundlich“ – endgültige Implementierung

Herzlichen Glückwunsch

Sie haben gerade Ihre erste AEM CIF-Komponente angepasst. Laden Sie die fertigen Lösungsdateien hier herunter.

Bonusaufgabe

Überprüfen Sie die Funktionalität des neuen Abzeichens, das bereits im Produkt-Teaser implementiert wurde. Versuchen Sie, ein zusätzliches Kontrollkästchen hinzuzufügen, damit Autoren steuern können, wann das Umweltfreundlich-Zeichen angezeigt werden soll. Sie müssen das Komponentendialogfeld unter ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productteaser/_cq_dialog/.content.xml aktualisieren.

Aufgabe zur Implementierung neuer Abzeichen

Zusätzliche Ressourcen

Auf dieser Seite