Die Anpassung und Erweiterung von Webseiten ist im E-Commerce unerlässlich, und SAP Commerce Cloud (ehemals Hybris) bietet hierfür flexible Werkzeuge. Wenn wir über das Hinzufügen neuer CMS-Komponenten zu einer Seite sprechen, gibt es grundsätzlich zwei Szenarien:
- Das Hinzufügen einer CMS-Komponente eines bestehenden Komponententyps, wie zum Beispiel
CMSParagraphComponent,CMSImageComponentoderMiniCartComponent. - Das Hinzufügen einer CMS-Komponente eines vollkommen neuen Komponententyps, der über die Standardfunktionen von Hybris hinausgeht.
In diesem umfassenden Leitfaden konzentrieren wir uns auf die erste Option und zeigen Ihnen, wie Sie eine neue CMS-Komponente basierend auf einem vorhandenen Typ in Hybris Cms integrieren. Unser Ziel ist es, Ihnen eine detaillierte Anleitung zu geben, wie Sie eine einfache “Willkommen”-Nachricht auf der Startseite eines Apparel-Shops anzeigen können. Dies ist eine grundlegende, aber essentielle Fähigkeit für jeden, der mit Hybris CMS arbeitet.
Bevor wir beginnen, werfen Sie einen Blick auf die Startseite, wie sie vor der Implementierung dieser Anforderung aussieht:
Startseite vor dem Hinzufügen der Willkommens-Komponente in Hybris CMS
Die sechs Schritte zur Integration einer neuen CMS-Komponente in Hybris
Die Implementierung einer neuen CMS-Komponente erfordert einen strukturierten Ansatz. Hier sind die detaillierten Schritte, die wir durchführen werden:
Schritt 1: Auswahl des Komponenten-Typs
Zuerst müssen wir entscheiden, welchen bestehenden Komponententyp wir für unsere Anforderung verwenden möchten. Da wir lediglich einen Begrüßungstext anzeigen wollen, ist der CMSParagraphComponent der ideale Kandidat. Er ist einfach und direkt für die Darstellung von Textinhalten konzipiert.
Schritt 2: Erstellung der Komponenten-Instanz mittels Impex
Für einen bestehenden Komponententyp ist es nicht notwendig, einen neuen Controller oder eine JSP-Datei zu erstellen. Stattdessen definieren wir die Instanz des Komponententyps mithilfe einer Impex-Anweisung.
Fügen Sie den folgenden Impex-Code in die Datei cms-content.impex (üblicherweise zu finden unter hybrisbinext-dataapparelstoreresourcesapparelstoreimportsampledatacontentCatalogsapparel-ukContentCatalogcms-content.impex) hinzu:
INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content;
;;welcomeInfoComponent;Welcome information;welcomeInfoComponent;;;;welcome to home page;In diesem Impex haben wir die uid unserer neuen Absatzkomponente als welcomeInfoComponent definiert. Diese uid wird später verwendet, um die Komponente mit dem entsprechenden Content-Slot zu verknüpfen.
Schritt 3: Verknüpfung der Komponente mit einem Content-Slot
Nachdem die Komponente definiert wurde, muss sie einem Content-Slot zugewiesen werden. Für unsere Startseite können wir entweder einen bestehenden Content-Slot nutzen oder einen neuen definieren. Wir entscheiden uns für die Erstellung eines neuen Content-Slots speziell für die Startseite.
Zuerst definieren wir den Namen des Content-Slots für das Homepagetemplate. Fügen Sie diesen Impex-Code ebenfalls zur Datei cms-content.impex hinzu:
INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='LandingPage2Template'];validComponentTypes(code);compTypeGroup(code)
;welcomeInfo;;;wideHier haben wir welcomeInfo als Position/Namen des Content-Slots für unser LandingPage2Template festgelegt.
Als Nächstes definieren wir den eigentlichen Content-Slot:
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active
;;welcomeInfoSlot;welcome info slot;trueNun verknüpfen wir den Content-Slot-Namen mit dem Content-Slot selbst und dem Seitentemplate:
INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='LandingPage2Template'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;WelcomeInfo-LandingPage2;welcomeInfo;;welcomeInfoSlot;trueZuletzt weisen wir unsere neu erstellte Komponente (welcomeInfoComponent) diesem Content-Slot zu. Fügen Sie diesen Impex-Code ebenfalls zu cms-content.impex hinzu:
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid,$contentCV)
;;welcomeInfoSlot;welcomeInfoComponentSchritt 4: Ausführung der Impex-Dateien und Synchronisation
Nachdem alle Impex-Anweisungen in der cms-content.impex-Datei platziert wurden, müssen Sie diese importieren. Stellen Sie sicher, dass der Import erfolgreich war.
Anschließend ist es entscheidend, den Content-Katalog zu synchronisieren – und zwar von der Staged-Version zur Online-Version. Ohne diese Synchronisation werden Ihre Änderungen nicht auf der Live-Seite sichtbar sein. Alternativ können Sie (nur zu Testzwecken) den Impex direkt mit der Online-Version ausführen.
Schritt 5: Anpassung der JSP-Datei
Um den neuen Slot auf der Webseite sichtbar zu machen, müssen wir die entsprechende JSP-Datei des Templates anpassen. Für unser Beispiel ist dies die Datei landingLayout2Page.jsp (typischerweise unter trainingstorefrontwebwebrootWEB-INFviewsdesktoppageslayoutlandingLayout2Page.jsp).
Fügen Sie die folgenden CMS-Tags hinzu:
<div class="welcomeInfo">
<cms:pageSlot position="welcomeInfo" var="feature">
<cms:component component="${feature}" />
</cms:pageSlot>
</div>Hinweis: In JSP-Dateien wird immer der ContentSlotName als position verwendet. Da wir welcomeInfo als ContentSlotName definiert haben, nutzen wir diesen Wert direkt in der JSP. Dieser CMS-Tag ruft den entsprechenden Standard-Controller auf und lädt die Komponente zusammen mit den erforderlichen Model-Attributen.
Zusätzlich können Sie CSS-Anpassungen vornehmen, um die Darstellung der Komponente zu gestalten. Fügen Sie diese Zeilen zur Datei helper.css hinzu (z.B. trainingstorefront/web/webroot/_ui/desktop/common/css/helper.css):
.welcomeInfo{
font-weight: bold;
margin-right: 5px;
color: #0000ff;
}Die Startseite verfügt nun über die neue Komponente welcomeInfoComponent innerhalb des Slots welcomeInfoSlot.
Schritt 6: Überprüfung der Startseite
Öffnen Sie nun den Storefront in Ihrem Browser und überprüfen Sie die Startseite. Sie sollte jetzt wie folgt aussehen:
Startseite nach dem Hinzufügen der Willkommens-Komponente in Hybris CMSWie Sie sehen können, wird die neue Komponente “welcome to home page” erfolgreich auf der Startseite angezeigt.
So zeigen Sie die neue Komponente im CMS Cockpit an
Nachdem die Komponente auf der Webseite sichtbar ist, möchten Sie sie möglicherweise auch im CMS Cockpit verwalten können. Dies erfordert eine Anpassung der VM-Dateien, um die Struktur der Templates im CMS Cockpit zu ändern.
So sah das CMS Cockpit vor der Modifikation der VM-Datei aus:
CMS Cockpit der Startseite vor dem Hinzufügen des Content Slots
Öffnen Sie zunächst die .vm-Datei für das Startseiten-Template, in unserem Beispiel structure_landingPage2Template.vm (typischerweise unter hybrisbincustomtrainingtrainingcoreresourcestrainingcoreimportcockpitscmscockpitstructure-viewstructure_landingPage2Template.vm).
Fügen Sie den neuen Content-Slot in der .vm-Datei hinzu, damit er im Cockpit angezeigt wird. Platzieren Sie den folgenden Code direkt unterhalb des NavigationBar-Codes:
<tr>
<td colspan="5" class="structureViewSection">
<cockpit code="welcomeInfo" />
</td>
</tr>Wichtig: Der cockpit code muss exakt dem ContentSlotName entsprechen, den wir zuvor als welcomeInfo definiert haben.
Führen Sie nun die cms-content.impex-Datei erneut aus (z.B. hybrisbinext-dataapparelstoreresourcesapparelstoreimportcoredatacontentCatalogsapparel-ukContentCatalogcms-content.impex). Dies stellt sicher, dass die neueste .vm-Datei mit Ihrer Modifikation geladen wird.
Stellen Sie sicher, dass Sie den Content-Katalog nach dem erneuten Import des Impex synchronisieren.
Greifen Sie nun auf das CMS Cockpit zu und überprüfen Sie die Startseite. Sie sollte jetzt den neuen Content-Slot für das Seitentemplate mit der hinzugefügten Absatzkomponente anzeigen:
CMS Cockpit der Startseite nach dem Hinzufügen des Content Slots
Sie können diese Komponente nun entsperren und bearbeiten, genau wie jede andere CMSParagraphComponent im System.
Fazit
Das Hinzufügen einer neuen CMS-Komponente eines bestehenden Typs in Hybris CMS ist ein fundamentaler Prozess für die Personalisierung und Erweiterung Ihrer E-Commerce-Plattform. Durch das Verständnis und die Anwendung der hier beschriebenen Schritte können Entwickler und Content-Manager die Funktionalität ihrer Hybris-Seiten effektiv anpassen. Von der Definition der Komponente mittels Impex über die Verknüpfung mit Content-Slots bis hin zur Anpassung der JSP-Dateien und der Sichtbarkeit im CMS Cockpit – dieser Leitfaden deckt alle essenziellen Aspekte ab.
Die Beherrschung dieser Techniken ermöglicht es Ihnen, dynamische und ansprechende Benutzererlebnisse in Ihrer SAP Commerce Cloud Umgebung zu schaffen. Experimentieren Sie mit verschiedenen bestehenden Komponententypen, um die volle Leistungsfähigkeit des Hybris CMS auszuschöpfen. Haben Sie Fragen oder stoßen Sie auf Herausforderungen bei der Implementierung? Teilen Sie Ihre Erfahrungen in den Kommentaren mit!