Stile für AEM CIF-Kernkomponenten festlegen style-aem-cif-core-components

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

$ 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 -PautoInstallPackage,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 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 zum Modul ui.frontend und erweitern Sie es. Erweitern Sie dann die Ordnerhierarchie zu: ui.frontend/src/main/styles/commerce:

Beachten Sie, dass sich unter dem Ordner mehrere Sass-Dateien (.scss) befinden. Dies sind Commerce-spezifische Stile für die einzelnen Commerce-Komponenten.

Öffnen Sie die Datei _productteaser.scss.

Aktualisieren Sie die .item__image-Regel und ändern Sie die Rahmenregel:

.item__image {
    border: #ea00ff 8px solid; /* <-- modify this rule */
    display: block;
    grid-area: main;
    height: auto;
    opacity: 1;
    transition-duration: 512ms;
    transition-property: opacity, visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    width: 100%;
}

Mit der obigen Regel sollte der Produkt-Teaser-Komponente ein dicker rosa Rahmen hinzugefügt werden.

Öffnen Sie ein neues Terminal-Fenster und navigieren Sie zum Ordner ui.frontend:

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

Führen Sie folgenden Maven-Befehl aus:

$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------

Prüfen Sie die Terminal-Ausgabe. Sie können sehen, dass der Maven-Befehl mehrere NPM-Skripte ausgeführt hat, darunter auch npm run build. Der npm run build-Befehl ist in der package.json-Datei definiert und führt dazu, dass das webpack-Projekt kompiliert und die Erstellung der Client-Bibliothek ausgelöst wird.

Prüfen Sie die Datei ui.frontend/dist/clientlib-site/site.css:

Die Datei ist die kompilierte und minimierte Version aller Sass-Dateien in dem Projekt.

Prüfen Sie die Datei ui.frontend/clientlib.config.js.

/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
    context: BUILD_DIR,
    clientLibRoot: CLIENTLIB_DIR,
    libs: [
        {
            ...libsBaseConfig,
            name: 'clientlib-site',
            categories: ['venia.site'],
            dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
            assets: {
...

Dies ist die Konfigurationsdatei für aem-clientlib-generator und bestimmt, wo und wie die kompilierten CSS- und JavaScript-Dateien in eine AEM-Client-Bibliothek umgewandelt werden.

Überprüfen Sie im ui.apps-Modul die Datei: ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

Damit wird die site.css-Datei in das ui.apps-Projekt kopiert. Sie ist jetzt Teil einer Client-Bibliothek namens clientlib-site mit der Kategorie venia.site. Sobald die Datei Teil des ui.apps-Moduls ist, kann sie in AEM bereitgestellt werden.

Überprüfen Sie anschließend die anderen vom Projekt erstellten Client-Bibliotheken:

Diese Client-Bibliotheken werden nicht vom ui.frontend-Modul verwaltet. Stattdessen enthalten sie CSS- und JavaScript-Abhängigkeiten, die von Adobe bereitgestellt werden. Die Definitionen für diese Client-Bibliotheken befinden sich in der .content.xml-Datei unter dem jeweiligen Ordner.

clientlib-base – Dies ist eine leere Client-Bibliothek, die die erforderlichen Abhängigkeiten von AEM-Kernkomponenten einfach einbettet. Die Kategorie lautet venia.base.

clientlib-cif – Dies ist ebenfalls eine leere Client-Bibliothek, die die erforderlichen Abhängigkeiten von AEM CIF-Kernkomponenten einfach einbettet. Die Kategorie lautet venia.cif.

clientlib-grid – Dies umfasst die CSS, die zur Aktivierung der Funktion „Responsives Raster“ von AEM erforderlich sind. Durch Verwendung des AEM-Rasters wird der Layout-Modus im AEM-Editor aktiviert und Inhaltsautorinnen und -autoren erhalten die Möglichkeit, die Größe von Komponenten zu ändern. Die Kategorie lautet venia.grid und ist in der venia.base-Bibliothek eingebettet.

Überprüfen Sie die Dateien customheaderlibs.html und customfooterlibs.html unter ui.apps/src/main/content/jcr_root/apps/venia/components/page:

Diese Skripte enthalten die Bibliotheken venia.base und venia.cif als Bestandteil aller Seiten.

Erstellen Sie das gesamte Projekt über das Terminal und stellen Sie es in einer lokalen Instanz von AEM bereit:

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

Öffnen Sie eine neue Registerkarte im Browser und navigieren Sie zur Startseite der Site: http://localhost:4502/editor.html/content/venia/us/en.html.

Erweitern Sie die Asset-Suche (die Seitenleiste) im Modus Bearbeitung. Wechseln Sie im Asset-Filter zu Produkte.

Ziehen Sie ein neues Produkt auf die Startseite im Haupt-Layout-Container:

Sie sollten sehen, dass der Produkt-Teaser nun einen rosa Rahmen hat, der auf der zuvor erstellten CSS-Regeländerung basiert.

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

Wählen Sie das Menü Seiteninformationen und klicken Sie auf Als veröffentlicht anzeigen:

Dadurch wird die Seite geöffnet, ohne dass das JavaScript von AEM Author geladen wird (so, wie die Seite auf der veröffentlichten Site angezeigt werden würde). Beachten Sie, dass an die URL der Abfrageparameter ?wcmmode=disabled angehängt ist. Bei der Entwicklung von CSS und JavaScript ist es eine gute Idee, diesen Parameter zur Vereinfachung der Seite zu verwenden (ohne Elemente von AEM Author).

Wenn Sie die Seitenquelle anzeigen, sollten Sie in der Lage sein, mehrere enthaltene Client-Bibliotheken zu identifizieren:

<!DOCTYPE html>
<html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>

Client-Bibliotheken, die auf der Seite bereitgestellt werden, sind mit dem Präfix /etc.clientlibs versehen und werden über einen Proxy bereitgestellt, um zu verhindern, dass in /apps oder /libs vertrauliche Daten angezeigt werden.

Achten Sie auf venia/clientlibs/clientlib-site.min.css und venia/clientlibs/clientlib-site.min.js. Dies sind die kompilierten CSS- und JavaScript-Dateien, die vom ui.frontend-Modul abgeleitet wurden.

Navigieren Sie im AEM-Editor zur Startseite der Site: http://localhost:4502/editor.html/content/venia/us/en.html.

Wählen Sie das Menü Seiteninformationen und klicken Sie auf Vorlage bearbeiten:

Dadurch wird die Vorlage für die Landingpage geöffnet, auf der die Startseite basiert.

Wählen Sie in der oberen linken Ecke das Symbol Seiteninformationen und klicken Sie auf Seitenrichtlinie.

Dadurch wird die Seitenrichtlinie für die Landingpage-Vorlage geöffnet:

Auf der rechten Seite sehen Sie eine Liste mit Kategorien von Client-Bibliotheken, die auf allen Seiten, die diese Vorlage nutzen, enthalten sein werden.

• venia.dependencies – Stellt beliebige Anbieterbibliotheken bereit, auf die venia.site angewiesen ist.
• venia.site – Dies ist die Kategorie für clientlib-site, die das ui.frontend-Modul generiert.

Beachten Sie, dass andere Vorlagen die gleiche Richtlinie verwenden: Inhaltsseite, Landingpage usw. Durch die Wiederverwendung der Richtlinie können wir sicherstellen, dass auf allen Seiten dieselben Client-Bibliotheken enthalten sind.

Der Vorteil einer Nutzung von Vorlagen und Seitenrichtlinien zur Verwaltung des Einschließens von Client-Bibliotheken besteht darin, dass Sie die Richtlinie je nach Vorlage ändern können. Möglicherweise verwalten Sie zwei verschiedene Marken innerhalb derselben AEM-Instanz. Jede Marke weist ihren eigenen Stil oder ihr eigenes Design auf, doch die Basisbibliotheken und der Code sind identisch. Ein weiteres Beispiel: Wenn Sie über eine größere Client-Bibliothek verfügen, die Sie nur auf bestimmten Seiten anzeigen möchten, können Sie eine Einzelseitenrichtlinie nur für diese Vorlage erstellen.

Navigieren Sie im Browser zur Startseite und dann zu Als veröffentlicht anzeigen: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

Zeigen Sie den Quell-Code der Seite an und kopieren Sie den rohen HTML-Code der Seite.

Kehren Sie zur IDE Ihrer Wahl zurück und öffnen Sie unter dem ui.frontend-Modul die folgende Datei: ui.frontend/src/main/static/index.html.

Überschreiben Sie den Inhalt von index.html und fügen Sie den im vorherigen Schritt kopierten HTML-Code ein.

Suchen Sie nach den Einbeziehungen für clientlib-site.min.css sowie clientlib-site.min.js und entfernen Sie sie.

<head>
    <!-- remove this link -->
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     <!-- remove this link -->
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>

Sie werden entfernt, da sie die kompilierte Version der vom ui.frontend-Modul generierten CSS- und JavaScript-Dateien darstellen. Lassen Sie die anderen Client-Bibliotheken in Ruhe, da sie von der laufenden AEM-Instanz als Proxy übermittelt werden.

Öffnen Sie ein neues Terminal-Fenster und navigieren Sie zum Ordner ui.frontend. Führen Sie den Befehl npm start aus:

$ cd ui.frontend
$ npm start

Mit diesem Befehl wird der webpack-dev-Server auf http://localhost:8080/ gestartet.

Navigieren Sie mit demselben Browser als angemeldeter AEM-Instanz in einer neuen Registerkarte zu http://localhost:8080/. Über den webpack-Dev-Server sollte die Venia-Startseite angezeigt werden:

Lassen Sie den webpack-Dev-Server laufen. Er wird in der nächsten Übung erneut verwendet.

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

Nehmen Sie folgende Änderungen am Rahmen des Produkt-Teasers vor:

    .item__image {
-       border: #ea00ff 8px solid;
+       border-bottom: 1px solid #c0c0c0;
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }

Speichern Sie die Änderungen. Der webpack-Dev-Server sollte mit den neuen Stilen automatisch aktualisiert werden.

Fügen Sie dem Produkt-Teaser einen Schlagschatten sowie abgerundete Ecken hinzu.

 .item__root {
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px;
     float: left;
     margin-left: 12px;
     margin-right: 12px;
}

.item__root:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

Aktualisieren Sie den Produktnamen so, dass er unten im Teaser angezeigt wird, und ändern Sie die Textfarbe.

.item__name {
    color: #000;
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 900;
    line-height: 1em;
    padding: 0.75em;
    text-transform: uppercase;
    width: 75%;
}

Aktualisieren Sie den Produktpreis so, dass er ebenfalls unten im Teaser angezeigt wird, und ändern Sie die Textfarbe.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Aktualisieren Sie die Medienabfrage unten, um den Namen und Preis in Bildschirmen, die kleiner als 992 Pixel sind, zu stapeln.

@media (max-width: 992px) {
    .productteaser .item__name {
        font-size: 18px;
        width: 100%;
    }
    .productteaser .item__price {
        font-size: 14px;
        width: 100%;
    }
}

Der Kartenstil sollte sich nun im webpack-Dev-Server widerspiegeln:

Die Änderungen wurden jedoch noch nicht in AEM bereitgestellt. Sie können die Lösungsdatei hier herunterladen.

Stellen Sie Aktualisierungen mithilfe Ihrer Maven-Kenntnisse über ein Befehlszeilen-Terminal in AEM bereit:

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

Kehren Sie zu Ihrem Browser zurück und aktualisieren Sie die Startseite: http://localhost:4502/editor.html/content/venia/us/en.html. Sie sollten erkennen, dass die aktualisierten Produkt-Teaser-Stile angewendet worden sind.

Experimentieren Sie, indem Sie zusätzliche Produkt-Teaser hinzufügen. Mit dem Layout-Modus können Sie die Breite und den Versatz der Komponenten ändern, um mehrere Teaser in einer Zeile anzuzeigen.