1. Einleitung
FirstSpirit dient der Erstellung vielseitiger und projektspezifischer Inhalte. Mit dem Modul ContentConnect wurde die Möglichkeit geschaffen, diese Inhalte in das E-Commerce-Shopsystem Salesforce Commerce Cloud zu übertragen und dort zu nutzen.
Im restlichen Dokument wird anstelle von “Salesforce Commerce Cloud” die Kurzform “Commerce Cloud” benutzt. Damit ist immer ausschließlich die Salesforce Commerce Cloud gemeint. |
Das Modul kombiniert die funktionalen Stärken beider Systeme, um so die besten Vorteile zu erzielen und ein erfolgreiches Gesamtsystem zu schaffen. Dieses Gesamtsystem besteht aus zwei Bereichen, die parallel und größtenteils entkoppelt voneinander arbeiten:
- FirstSpirit-seitige Komponenten
-
Diese Komponenten dienen der Erstellung und Pflege der redaktionellen Daten. Sie werden in Form von XML-Dateien und Medien an die Commerce Cloud übermittelt.
- Commerce Cloud-seitige Komponenten
-
Diese Komponenten dienen der Verarbeitung der in FirstSpirit erstellten redaktionellen Inhalte. Die Commerce Cloud integriert diese Daten in den Shop und überführt sie in den Live-Stand.
Ein Bestandteil der Auslieferung des ContentConnect-Moduls ist ein StarterPackage inklusive eines Referenzprojekts und verschiedener Cartridge-Komponenten, die zu großen Teilen auf der Storefront Reference Architecture aufsetzen. Die vorliegende Dokumentation orientiert sich durchgängig an dem Referenzprojekt und erläutert die mit dem Modul bereitgestellten Funktionalitäten anhand gängiger Anwendungsfälle. Dabei erfolgt die Beschreibung sowohl aus Redakteurssicht als auch aus der Sicht eines FirstSpirit-Entwicklers.
1.1. Funktionsumfang
ContentConnect stellt Redakteuren die folgenden Möglichkeiten zur Verfügung:
-
Erstellung nativer Commerce Cloud-Inhalte mit FirstSpirit
-
Zugriff auf Produktinformationen über die
Open Commerce API
(OC API) -
gleichzeitige Darstellung von Shop-Elementen und redaktionellen Inhalten in der FirstSpirit-Vorschau
-
Übertragung von Inhalten in den Commerce Cloud Storage über
WebDAV
Die entsprechenden Funktionalitäten werden mit der Installation und Konfiguration des Moduls sowohl im SiteArchitect als auch im ContentCreator bereitgestellt.
Die Pflege der Inhalte findet über die gewohnten FirstSpirit-Mittel statt. Mit FirstSpirit vertraute Redakteure benötigen daher keine darüber hinausgehenden Kenntnisse. Die Inhalte werden der Commerce Cloud im Rahmen eines Deployments zum Import bereitgestellt. Diese überträgt die Informationen in den Live-Stand.
Für die Commerce Cloud ergibt sich somit bei der Auslieferung redaktioneller Inhalte in den Live-Stand keinerlei Unterschied. Auch wenn der FirstSpirit-Server beispielsweise aufgrund von Wartungsarbeiten heruntergefahren wird, beeinflusst dies die Commerce Cloud nicht.
1.2. Architektur
Die Verbindung von FirstSpirit und der Commerce Cloud wird über eine Architektur aus verschiedenen Komponenten realisiert (vgl. Abbildung Architektur). Diese Komponenten sind:
-
die auf dem FirstSpirit-Server installierten Module:
-
ContentConnect-Modul
-
WebDAV-Modul
-
JSTL-Modul
-
-
Commerce Cloud-Instanzen (Staging & Production)
Das Zusammenspiel der einzelnen Komponenten erfolgt immer nach dem folgenden Schema:
-
Die Erstellung und Bearbeitung der redaktionellen Inhalte findet FirstSpirit-seitig statt. Die Inhalte ersetzen Platzhalter im HTML-Gerüst, das ebenso wie die auf der Live-Seite angezeigten Produkte jedoch aus der Commerce Cloud stammt. Es wird per
https
nach FirstSpirit übertragen, wo es für die vollständige Darstellung der Vorschau benötigt wird. Für Produkt- und Kategorieseiten erfordet dies außerdem die Kommunikation mit Controllern, die Teil der ausgelieferten Cartridge sind. Die Übergabe der Produkte nach FirstSpirit erfolgt über dieOC API
-Schnittstelle der Commerce Cloud Staging Instanz. Diese Schnittstelle wird außerdem genutzt, um verschiedene Aktionen in der Commerce Cloud zu starten. -
Alle in FirstSpirit vorgenommenen inhaltlichen Änderungen werden im Rahmen eines Deployments per
WebDAV
der Commerce Cloud Staging Instanz bereitgestellt. Sie werden in Form von Medien und XML-Dateien in verschiedenenWebDAV
-Verzeichnissen abgelegt. Von dort werden sie über Jobs, die durch eine Aktion des Deployments angestoßen werden, in die Library der Commerce Cloud Staging Instanz importiert. -
Diese Library wird zusammen mit dem Produktkatalog auf die produktive Commerce Cloud Instanz repliziert. Für die Commerce Cloud ergibt sich somit bei der Auslieferung redaktioneller Inhalte in den Live-Stand keinerlei Unterschied.
Die Commerce Cloud stellt somit die Hauptkomponente dieser Architektur dar. Sie liefert die in FirstSpirit erstellten bzw. gepflegten Inhalte an die Kunden aus und stellt sämtliche Shop-Funktionalitäten zur Verfügung. Zwischen beiden Systemen existiert lediglich eine lose Kopplung. Sie arbeiten hauptsächlich parallel zueinander. Wird der FirstSpirit-Server beispielsweise aufgrund von Wartungsarbeiten heruntergefahren, beeinflusst dies die Commerce Cloud nicht.
1.3. Konzept
Das ContentConnect-Modul bietet die Möglichkeit, redaktionelle Inhalte FirstSpirit-seitig zu pflegen und diese anschließend per Deployment in die Commerce Cloud zu übertragen. Dafür muss die Verarbeitung von Inhalten in beiden Systemen aufeinander abgestimmt und zueinander kompatibel sein. Die nachfolgenden Unterkapitel beschreiben das zugrunde liegende Konzept, mit dem diese Kompatibilität erreicht wird.
1.3.1. Seiten
Ähnlich wie in FirstSpirit basieren Seiten in der Commerce Cloud auf einer Struktur unterschiedlicher Komponenten. Um redaktionelle Inhalte zwischen den beiden Systemen austauschen zu können, müssen diese Komponenten aufeinander abgestimmt sein.
Innerhalb des in der Auslieferung enthaltenen Referenzprojekts ContentConnect Reference Project werden die Slots durch die Inhaltsbereiche einer Seitenvorlage repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils einem Asset entsprechen und je nach Anwendungsfall zusätzlich eine Slot-Konfiguration besitzen (vgl. Abbildung Page Rendering). Mithilfe dieser Konfigurationen lässt sich beispielsweise definieren, welche Zielgruppe den entsprechenden Inhalt sehen darf oder in welchem Zeitraum dieser sichtbar ist. Jede Slot-Konfiguration verweist auf exakt ein Asset.
Mit FirstSpirit lassen sich somit Assets generieren, die über Slots in einer Seite dargestellt werden.
1.3.2. Vorschau
Die mit dem ContentConnect-Modul realisierte Integration sieht FirstSpirit-seitig lediglich die Erzeugung und Pflege der redaktionellen Inhalte sowie ihre Publizierung in Form von Assets vor. Die Commerce Cloud bestimmt jedoch weiterhin das Rahmenwerk einer Seite, deren Slots die generierten Assets einbinden.
Für die Darstellung der Vorschau einer Seite ermittelt FirstSpirit daher ihre aktuelle Ansicht im Commerce Cloud Storefront und lädt das HTML herunter. Die darin enthaltenen Slots sind durch HTML-Kommentare eindeutig gekennzeichnet. FirstSpirit ersetzt diese Bereiche durch die entsprechenden redaktionellen Inhalte und stellt das Resultat in der Vorschau dar.
1.3.3. Velocity
Alternativ zu dem zuvor beschriebenen Slot-basierten Ansatz bietet Salesforce die Content Integration API (CI API)
an. Sie ermöglicht die Salesforce-seitige Auswertung von Velocity-Fragmenten und damit eine einfache Realisierung von Geschäftslogiken auf einer Seite. Des Weiteren bietet sie Redakteuren eine höhere Kontrolle über das Seitenlayout als beim Slot-basierten Ansatz. Die Velocity-Fragmente inklusive der Geschäftslogik werden dabei innerhalb von FirstSpirit gepflegt.
1.3.4. Sprachen
Sowohl Salesforce- als auch FirstSpirit-seitig erfolgt die Pflege redaktioneller Inhalte in verschiedenen Sprachen. Für die Integration ist daher eine Zuordnung zwischen den Sprachen beider Systeme notwendig. Zu diesem Zweck wurde für die im Referenzprojekt verwendeten Sprachen eine Konvention bezüglich ihrer in FirstSpirit definierten Abkürzung getroffen. Diese orientiert sich an den in Salesforce bestehenden Sprachen und sieht vor, jede Abkürzung nach dem Schema SPRACHKÜRZEL_LÄNDERKÜRZEL
zu benennen (vgl. Abbildung Sprachen). Dabei entspricht das Sprachkürzel dem ISO-639-Standard und das Länderkürzel dem ISO-3166-Standard.
Darüber hinaus wird im Projekt gewährleistet, dass die FirstSpirit-Mastersprache der Defaultsprache in Salesforce zugeordnet wird.
Dieser Sachverhalt wird in den Kapiteln Generierung sowie Homepage genauer behandelt.
1.3.5. Generierung & Deployment
Die Übertragung der FirstSpirit-seitig erstellten Inhalte in den Live-Stand geschieht durch die Commerce Cloud. Ihr müssen die Inhalte daher bereitgestellt werden, was in Form zweier, während der Generierung erzeugter XML-Dateien erfolgt. Während eine dieser Dateien alle im FirstSpirit-Projekt erzeugten Slot-Konfigurationen enthält, beinhaltet die zweite alle Assets.
Das WebDAV-Deployment überträgt die beiden XML-Dateien zusammen mit den generierten Medien in die Commerce Cloud und legt sie im Commerce Cloud Storage ab. Von dort werden sie über einen Job Schedule, der durch den FirstSpirit-Auftrag angestoßen wird, importiert.
1.3.6. Löschen
Die Inhalte eines FirstSpirit-Projekts können jederzeit im Rahmen des gewöhnlichen Redaktionsprozesses verändert oder gelöscht werden. Diese Änderungen müssen Salesforce-seitig übernommen werden. Genauso wie die Übertragung neuer Inhalte erfolgt auch ihre Löschung per Deployment.
Allen Assets und Slot-Konfigurationen wird zu Beginn jeder Vollgenerierung ein aktueller Zeitstempel hinzugefügt. Ihr Zeitstempel divergiert somit von den Zeitstempeln der Inhalte, die Salesforce-seitig noch bestehen, im FirstSpirit-Projekt jedoch bereits gelöscht sind. Die letzte Aktion des Generierungsauftrags ermittelt die Assets und Slot-Konfigurationen mit solch einem veralteten Zeitstempel und veranlasst ihre Löschung.
1.4. Technische Voraussetzungen
Das Modul ContentConnect besitzt die folgenden technischen Voraussetzungen:
-
FirstSpirit-Version: FirstSpirit (Isolated- oder Legacy-Mode) ab 2020-01
-
E-Commerce-Shopsystem Commerce Cloud
-
Storefront Reference Architecture in der Version 6.2.0
-
Crownpeak LINK Cartridges
int_espirit
,int_espirit_sfra
bzw.int_espirit_sg
Version 22.1.0 -
Open Commerce API in der Version 22.10 oder höher
-
aktuelle JSTL-Version (Diese wird mit dem JSTL-Modul bereitgestellt)
-
Java 11 oder höher
2. Komponenten
ContentConnect besteht aus verschiedenen Komponenten. Die Funktionalität dieser Komponenten wird in den nachfolgenden Unterkapiteln erläutert.
2.1. ContentConnect-Modul
Das ContentConnect-Modul ist die Hauptkomponente der Verbindung zwischen FirstSpirit und der Commerce Cloud. Es hat eine maßgebliche Bedeutung für den bidirektionalen Datenaustausch zwischen dem FirstSpirit-Server und der Commerce Cloud.
Sowohl im SiteArchitect als auch im ContentCreator wird durch das Modul ein Report bereitgestellt. Dieser Report dient der Darstellung der Produktinformationen aus der Commerce Cloud. Stößt ein Redakteur eine entsprechende Abfrage an, ermittelt das Modul die gewünschten Daten und übergibt sie dem Report. Die zurückgelieferten Daten können anschließend für die Erstellung und Pflege redaktioneller Inhalte weiterverwendet werden.
Wird nach der Erstellung der Inhalte eine Generierung ausgeführt, fasst das Modul sie in Form zweier XML-Dateien zusammen. Die Dateien werden dann vom WebDAV-Modul in den Commerce Cloud Storage übermittelt. Aus diesem liest die Commerce Cloud die Daten aus und überträgt sie in den Live-Stand.
Das ContentConnect-Modul stellt eine API bereit, mit der projektspezifische Funktionalitäten implementiert werden können. Weitere Informationen können der mitgelieferten Javadoc-Dokumentation entnommen werden. |
2.2. WebDAV-Modul
Die Erstellung und Bearbeitung der redaktionellen Inhalte findet FirstSpirit-seitig statt. Ihre Übertragung in den Live-Stand erfolgt hingegen durch die Commerce Cloud. Ihr müssen die Inhalte daher bereitgestellt werden. Dafür erstellt das ContentConnect-Modul im Rahmen eines Deployments jeweils eine XML-Datei für die Library und die Slot-Konfiguration. Sie müssen zusammen mit den referenzierten Medien an die Commerce Cloud übergeben werden.
Diese Aufgabe übernimmt das WebDAV-Modul. Es fungiert als Bindeglied zwischen FirstSpirit und der Commerce Cloud und legt die Daten im Commerce Cloud Storage ab. Aus diesem werden sie von der Commerce Cloud ausgelesen.
2.3. JSTL-Modul
Innerhalb des Referenzprojekt ist für die Vorschau bestimmter Seiten die Verwendung von JSTL erforderlich. Dies ermöglicht das JSTL-Modul. Es muss jedoch nur dann auf dem FirstSpirit-Server installiert werden, wenn JSTL noch nicht anderweitig auf dem Server eingebunden ist.
2.4. Commerce Cloud Cartridges
Die Auslieferung enthält die drei Cartridges int_espirit
, int_espirit_sfra
und int_espirit_sg
. Sie unterstützen alle Locales und unterliegen diesbezüglich keinerlei Restriktion.
- int_espirit
-
Die Cartridge
int_espirit
enthält Skripte, die in den anderen beiden Cartridges genutzt werden. Die bereitgestellten Funktionen dienen z. B. der Abbildung von Commerce Cloud Render Templates auf FirstSpirit-Seitenvorlagen, um damit das Anlegen von Kategorie- und Produktseiten zu ermöglichen (vgl. Product Page Template Mapping, Category Page Template Mappings und Kategorie- und Produktseiten). - int_espirit_sfra
-
Die Cartridge
int_espirit_sfra
überschreibt einige Vorlagen der Storefront Reference Architecture, um die FirstSpirit-seitige Vorschau zu ermöglichen. Außerdem enthält die Cartridge die folgenden Controller:-
Common: Der Controller
Common
stellt die Standardkomponenten eines Salesforce-Shops als einzelne Widgets bereit. -
Content: Der Controller
Content
nimmt die in FirstSpirit gepflegten Velocity-Fragmente entgegen und gibt das daraus gerenderte HTML zurück. -
CategorySearchResult: Der Controller
CategorySearchResult
ermittelt die Produkte einer Unterkategorie und stellt diese als ein separates Widget bereit. -
Product: Der Controller
Product
stellt die Widgets einer Produkt-Detailseite zur Verfügung und steuert die Anzeige der Produkt-Detailseite im Live-Stand. -
RenderTemplate: Der Controller
RenderTemplate
ermittelt für ein gegebenes Produkt oder eine gegebene Kategorie das Commerce Cloud Render Template. Er verwendet dabei die Möglichkeiten der Storefront Reference Architecture und greift auf die Funktionen der Cartridgeint_espirit
zurück. -
Search: Der Controller
Search
ermöglicht die Darstellung von FirstSpirit Kategorie-Detailseiten im Live-Stand.
-
- int_espirit_sg
-
Für Shops, die nicht auf der Storefront Reference Architecture basieren, enthält die Cartridge
int_espirit_sg
eine entsprechende Implementierung des ControllersRenderTemplate
.
3. Commerce Cloud - Installation und Konfiguration
Für die Verwendung der Funktionalitäten des ContentConnect-Moduls ist die Installation und Konfiguration unterschiedlicher Komponenten erforderlich. Die folgenden Unterkapitel erläutern die notwendigen Schritte für die Installation und Konfiguration der Commerce Cloud-seitigen Komponenten. Die zugehörige Import-Datei befindet sich im Ordner data
.
3.1. Einrichtung der Cartridges
In der Auslieferung sind drei Cartridges enthalten, die zunächst in die Commerce Cloud übertragen werden müssen. Verschiedene Methoden hierzu beschreibt die Commerce Cloud-Dokumentation unter Salesforce B2C Commerce 22.10 ➔ Developing Your Site ➔ Development Components>Cartridges.
Anschließend muss die Cartridge int_espirit
allen Sites, die FirstSpirit-Inhalte empfangen sollen, hinzugefügt werden. Entsprechende Instruktionen finden sich in der Commerce Cloud-Dokumentation unter Salesforce B2C Commerce 22.10 ➔ Developing Your Site ➔ Development Components ➔ Register a Cartridge. Sites, die auf der Storefront Reference Architecture aufsetzen und in FirstSpirit gepflegt werden, benötigen in ihrem Cartridge-Pfad außerdem int_espirit_sfra
. Basiert eine Site hingegen auf SiteGenesis, muss ihr Cartridge-Pfad um int_espirit_sg
ergänzt werden.
Die drei Cartridges unterstützen alle Locales und unterliegen diesbezüglich keinerlei Restriktion. |
3.2. Import der zip-Datei importExamples
Für die Einrichtung der Job Schedules sowie der Content-Bereinigung und für die Slot-Konfigurationen sind die verschiedene Dateien erforderlich, die in der Datei importExamples.zip gespeichert sind. Die zip-Datei ist innerhalb der Auslieferung im Verzeichnis metadata enthalten und muss in der Commerce Cloud bereitgestellt werden. Dafür ist sie über die Seite zu importieren. Die in ihr enthalten Dateien setzen unterschiedliche Konfigurationsschritte voraus, die in den entsprechenden Unterkapiteln im Detail erläutert werden.
3.3. Einrichtung der Job Schedules
Um die von FirstSpirit generierten Inhalte und Slot-Konfigurationen in die Commerce Cloud zu importieren, ist für jede Site ein Job Schedule in der Commerce Cloud anzulegen. Die Auslieferung enthält daher im Verzeichnis metadata die zip-Datei importExamples.zip, die wie zuvor beschrieben einen Import in die Commerce Cloud erfordert.
Die mit der zip-Datei importierten Jobs besitzen standardmäßig die Job-IDs FirstSpirit-Import-RefArch
und FirstSpirit-Import-RefArchGlobal
. Die ID stellt die Eindeutigkeit der Jobs für die verschiedenen Sites sicher und lässt sich auf der Seite beliebig anpassen. Es wird empfohlen, die ID der jeweiligen Site in die zugehörige Job-ID aufzunehmen, um die Eindeutigkeit zu gewährleisten.
Die in der Datei konfigurierten Job Schedules bestehen aus drei Job Steps vom Typ Import Content
, Import Content Slots
und Rebuild Search Index
. Alle drei Job Steps besitzen initial den Scope RefArch
bzw. RefArchGlobal
, der auf die entsprechende Site umzustellen ist. Darüber hinaus definieren sie unterschiedliche Parameter, deren Default-Werte größtenteils beibehalten werden können. Lediglich die Parameter WorkingFolder
und FileNamePattern
sind projektspezifisch anzupassen. Der Bearbeitungsdialog öffnet sich per Klick auf den Namen des Job Steps.
- WorkingFolder
-
Der Parameter
WorkingFolder
gibt - relativ zumIMPEX
-Verzeichnis - den Pfad zu dem Verzeichnis an, das die von FirstSpirit generierten XML-Dateien enthält. Sein Wert muss für beide Job Steps identisch sein. - FileNamePattern
-
Der Parameter definiert den Namen der von FirstSpirit generierten XML-Dateien. Im Fall des Job Steps
ImportContent
muss er den Wertfs_import_library.xml
und für den Job StepImportContentSlots
den Wertfs_import_slot_configuration.xml
besitzen.
Allgemeine Informationen zur Erzeugung von Job Schedules sind in der Commerce Cloud-Dokumentation im Kapitel Administering Your Organization ➔ Jobs ➔ Creating Jobs enthalten. Die drei Job Steps und ihre Parameter sind in der Commerce Cloud Dokumentation in den Kapiteln ImportContent, ImportContentSlots und SearchReindex beschrieben. |
3.4. Einrichtung der Content-Bereinigung
Um von FirstSpirit verwaltete Assets und Slot-Konfigurationen, die innerhalb von FirstSpirit gelöscht wurden, auch aus der Commerce Cloud zu löschen, sind folgende Schritte zu befolgen:
Import der benutzerdefinierten System-Objekt-Attribute
Zur Persistierung von Zeitstempeln der Generierung benutzt die Content-Bereinigung innerhalb von Assets und Slot-Konfigurationen das benutzerdefinierte Attribut fsGenerationTime
. Dieses muss den System-Objekten (Content und Slot-Konfigurationen) zunächst hinzugefügt werden. Für das Anlegen der benutzerdefinierten System-Objekt-Attribute muss die zip-Datei importExamples.zip in der Commerce Cloud verfügbar sein. Sie ist innerhalb des Verzeichnisses metadata gespeichert, das in der Auslieferung enthalten ist. Ihre Bereitstellung erfolgt über den zuvor beschriebenen Importprozess.
Anlegen weiterer Custom-Attributes für Assets
Die Menge der zu löschenden Content Assets kann auf Basis beliebiger weiterer Custom-Attributes zusätzlich eingeschränkt werden. Ist dies gewünscht, sind entsprechende Attribute für Content Assets anzulegen. Eine Beschreibung hierzu findet sich in der Commerce Cloud-Dokumentation unter dem Punkt Salesforce B2C Commerce 22.10 ➔ Administering Your Organisation ➔ Business Objects ➔ Creating Custom Attributes for Business Objects.
Erzeugung von Search-Refinements für Assets
Für das neu erzeugte Attribut fsGenerationTime
und die zusätzlich angelegten Custom-Attributes ist außerdem ein Commerce Cloud Search Refinement anzulegen. Dies beschreibt die Commerce Cloud-Dokumentation unter dem Punkt Merchandising Your Site ➔ Content Assets ➔ Working with Content Assets ➔ Creating Content Search Refinements.
Nach dem Import der benutzerdefinierten System-Object-Attribute und dem Anlegen des Search-Refinements ist es notwendig die Search Indexes der Site neu zu bauen. |
3.5. OC API Settings
Unter anderem für die Reports und das Deployment wird die OC API eingesetzt. Für die verwendete Client ID
müssen daher Salesforce-seitig die entsprechenden Rechte gesetzt werden.
Die im folgenden beschhriebenen Anpassungen an den Rechten können auch den separaten Dateien Shop OCAPI-Settings und Data OCAPI-Settings entnommen werden. |
Die verwendete Client ID
benötigt Rechte zur Ausführung von GET-Anfragen über die ShopAPI auf folgende Ressourcen. Diese müssen je nach Anwendungsfall im globalen oder Site-spezifischen Kontext gesetzt werden.
-
/products/*/variations
-
/products/*
-
/product_search/variations
Bei Verwendung der Content-Bereinigung außerdem:
-
/content_search
Zusätzlich werden Rechte zur Ausführung von GET-, POST und DELETE-Anfragen über die DataAPI für folgende Ressourcen vorausgesetzt. Sie sind ausschließlich im globalen Kontext zu definieren.
-
/catalogs
(nur GET) -
/catalogs/*/categories
(nur GET) -
/jobs/*/executions
(GET & POST) -
/jobs/*/executions/*
(nur GET)
Bei Verwendung der Content-Bereinigung außerdem:
-
/sites/*/slot_configuration_search
(nur POST) -
/libraries/*/content/*
(nur DELETE) -
/sites/*/slots/*/slot_configurations/*
(nur DELETE)
Die Verwendung der Sorting Rules erfordert darüber hinaus die folgende Definition:
-
/sites/*/sorting_rule_search (nur POST)
Sollen optional Workflows zur Löschung von Library folder und Folder assignments verwendet werden, so sind Rechte zur Ausführung von DELETE-Anfragen über die DataAPI auf folgende Ressourcen notwendig:
-
/libraries/*/folders/*
-
/libraries/*/folder_assignments/*/*
3.6. Slot-Konfigurationen
Durch die Vorlagen der Cartridge int_espirit_sfra
werden der Site neue Slots hinzugefügt. Die Auslieferung stellt dafür die zip-Datei importExamples.zip mit Slot-Konfigurationen für diese Slots zur Verfügung. Sie ist innerhalb des Verzeichnisses metadata gespeichert, das in der Auslieferung enthalten ist. Die Bereitstellung der zip-Datei in der Commerce Cloud erfolgt über den zuvor beschriebenen Importprozess.
4. FirstSpirit - Installation und Konfiguration
Für die Verwendung der Funktionalitäten des ContentConnect-Moduls ist die Installation und Konfiguration unterschiedlicher Komponenten erforderlich. Die folgenden Unterkapitel erläutern die notwendigen Schritte für die Installation und Konfiguration der FirstSpirit-seitigen Komponenten.
4.1. Installation der Module
Die ContentConnect-Auslieferung enthält drei Module, die auf dem FirstSpirit-Server hinzugefügt werden müssen. Öffnen Sie für die Installation der Module den ServerManager
und wählen Sie den Bereich .
Im Hauptpanel ist eine Liste aller auf dem FirstSpirit-Server installierten Module zu sehen. Wählen Sie nach dem Klicken auf Installieren nacheinander zunächst die mitgelieferte contentconnect-fsm-<Versionsnummer>.fsm und anschließend die WebDavDeployment-<Versionsnummer>.fsm sowie die jstl.fsm aus. Bestätigen Sie die Auswahl jeweils mit Öffnen. Nach der erfolgreichen Installation wurden der Liste die Ordner ContentConnect
, WebDavDeployment
und JSTL
hinzugefügt, von denen jeder Alle Rechte
erhalten muss.
Das JSTL-Modul muss nur dann installiert werden, wenn JSTL noch nicht anderweitig auf dem Server eingebunden ist. |
Nach jeder Installation oder Aktualisierung eines Moduls ist ein Neustart des FirstSpirit-Servers notwendig. |
4.2. WebDAV-Verwendung mit https
Um den WebDAV-Server mit https
statt http
zu verwenden, ist grundsätzlich keine zusätzliche Konfiguration notwendig. Für https
wird jedoch im Allgemeinen eine lokale vom Unternehmen verwaltete Zertifizierungsstelle verwendet. Dessen Zertifikat muss inklusive der gesamten Kette bis zum Zertifikat des WebDAV-Servers der JVM des FirstSpirit-Servers zur Verfügung gestellt werden.
Die JVM erwartet diese öffentlichen Zertifikate als |
Importieren Sie die öffentlichen Root- oder Zwischenzertifikate über das folgende Kommando in eine JKS
-Datei und beantworten Sie die Frage, ob dem Zertifikat vertraut werden soll, mit Ja Dieser Vorgang muss für jedes Zertifikat wiederholt werden.
keytool -import -file cert1.crt -keystore truststore.jks –storepass changeit
Kopieren Sie den erzeugten Trust Store
in das Verzeichnis ihres FirstSpirit-Servers und fügen Sie die folgenden Zeilen der Datei
hinzu.
wrapper.java.additional.100=-Djavax.net.ssl.trustStore=conf/truststore.jks
wrapper.java.additional.101=-Djavax.net.ssl.trustStorePassword=changeit
wrapper.java.additional.102=-Djavax.net.ssl.trustStoreType=JKS
Die Parameter müssen über einen Neustart des FirstSpirit-Servers aktiviert werden. |
Sollte der WebDAV-Server eine wechselseitige SSL-Authentifizierung erwarten, muss über die folgenden Aufrufe zunächst ein Client-Zertifikat erstellt und signiert werden.
openssl genrsa -out private.key 2048
openssl req -new -key private.key -out request.csr
Die Datei request.csr
wird an die Zertifizierungsstelle versandt, die mit der Datei cert.crt
antwortet. Der private Schlüssel, das öffentliche Zertifikat und das Zertifikat der Zertifizierungsstelle müssen anschließend in einem von der JVM
zu lesenden Key Store
zusammengefasst werden.
cd firstspirit5/conf
openssl pkcs12 -export -in public.crt -inkey private.key \
-out clientcert.p12 -CAfile authority.crt
Falls die Zertifikatskette aus einem oder mehreren Zwischenzertifikaten besteht, können diese via keytool
importiert werden.
keytool -import -file intermediate1.crt -trustcacerts \
-keystore clientcert.p12 -storepass changeit
Der Key Store
lässt sich über das Hinzufügen der folgenden Zeilen in die an die
JVM
des FirstSpirit-Servers übergeben.
wrapper.java.additional.103=-Djavax.net.ssl.keyStore=conf/clientcert.p12
wrapper.java.additional.104=-Djavax.net.ssl.keyStorePassword=changeit
wrapper.java.additional.105=-Djavax.net.ssl.keyStoreType=PKCS12
4.3. Projekt-Import
Ein Bestandteil des in der Auslieferung enthaltenen StarterPackages ist das Referenzprojekt ContentConnect Reference Project, das auf dem FirstSpirit-Server zu installieren ist. Öffnen Sie dafür im ServerManager
den Import-Dialog über den Menüpunkt und wählen Sie über den Button Lokal die Datei
ContentConnectReferenceProject.tar.gz
aus ihrem lokalen Dateisystem aus. Vergeben Sie anschließend einen Projektnamen sowie eine Beschreibung und bestätigen Sie den Import mit Ja. Nach der erfolgreichen Installation wurde das Projekt der Liste im Hauptpanel hinzugefügt (vgl. Abbildung Importiertes Projekt im ServerManager).
Neben den Standardgruppen |
4.4. Konfiguration der Projekt-Komponente
Für den Einsatz des ContentConnect-Moduls ist eine projektspezifische Konfiguration notwendig. Diese wird über die Projekt-Komponente vorgenommen, die dem mitgelieferten Referenzprojekt bereits hinzugefügt ist.
Öffnen Sie für die Konfiguration der Projekt-Komponente den ServerManager
und wählen Sie den Bereich . Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen. Selektieren Sie den Eintrag
ContentConnect Project Configuration
und öffnen Sie den zugehörigen Konfigurationsdialog über Konfigurieren (vgl. Abbildung Konfigurationsdialog der Projekt-Komponente).
Die nachfolgende Konfiguration wird von den Modul-Services verwendet. Jegliche Änderung an der Konfiguration erfordert einen Neustart des Services und aller laufenden Clients. Andernfalls wird die entsprechende Änderung weder von den Services noch von den Clients übernommen. |
- Base URL
-
In dem Dialog wird zunächst die
Base URL
erfasst, die sich aus der URL der Commerce Cloud-Instanz und der ID der verwendeten Site ergibt:https://<SUBDOMAIN INSTANCE>.demandware.net/s/<SITE ID>
Basierend auf dieser Struktur ist stets eine eindeutige Verbindung zwischen dem FirstSpirit-Projekt und der Commerce Cloud-Site sichergestellt.
Bei der
Base URL
handelt es sich um ein Pflichtfeld.
Um Zertifikatsprobleme zu vermeiden, ist sicherzustellen, dass die Subdomain keine Punkte im Namen enthält. |
- Storefront Hostname
-
Dieses Konfigurationsfeld ist optional und sollte nur ausgefüllt werden, wenn sich der Hostname der
Storefront Base URL
in den Projekteinstellungen vom Hostname der in diesem Dialog konfiguriertenBase URL
unterscheidet. In diesem Fall ist hier der Hostname inklusive Protokoll derStorefront Base URL
einzutragen.Beispiel:
https://<DIFFERENT SUBDOMAIN INSTANCE>.demandware.net/
- Client ID
-
Die
Client ID
ist ebenfalls ein Pflichtfeld. Sie wird für die Verwendung derOpen Commerce Shop API
benötigt.
Die |
- Password
-
Die Komponenten der ContentConnect-API setzen eine passwortbasierte Authentifizierung gegenüber der Commerce Cloud voraus. Aus diesem Grund ist zusätzlich zur Client ID ein Passwort erforderlich, das während der Registrierung des API Clients bei der Commerce Cloud definiert wird.
- Refinements
-
In diesem Konfigurationsfeld sind Refinements definiert, die der Verfeinerung der Produktsuche dienen. Die Angabe der Refinements erfolgt in Form einer kommaseparierten Liste von Schlüssel-Wert-Paaren.
Es werden maximal die ersten neun angegebenen Schlüssel-Wert-Paare genutzt, da die Commerce Cloud nicht mehr als neun Refinements akzeptiert. Das Format der Werte der Schlüssel-Wert-Paare entspricht dem von der Commerce Cloud erwarteten Format für Refinement-Werte. Es können also mehrere Werte sowie Wertmengen für ein Refinement angegeben werden:
|
Die Filterung nach einer Kategorie geschieht ebenfalls über ein Refinement, weshalb zwei Sonderfälle zu beachten sind: Im ersten Fall
In diesem Fall liegen insgesamt zehn Refinement-Definitionen vor, was unzulässig ist. Deshalb wird ein Refinement aus der Konfiguration ignoriert, um stattdessen die Kategorie-Filterung zu ermöglich. Im zweiten Fall
In diesem Fall gibt es eine doppelte Definition für das Kategorie-Refinement |
- Locale
-
Die
Locale
gibt den Sprachkontext des aktuellen Projekts an. Erlaubt ist die Angabe maximal einer ID einer aktiven Locale, die für Storefront-Anfragen in der oben konfigurierten Site erlaubt ist. Falls das Feld leer bleibt, wird der Parameterlocale
in Storefront-Anfragen nicht verwendet. - Auth User
-
Ist die Beschränkung des Zugriffs in der Commerce Cloud aktiviert, muss in diesem Feld der User
storefront
angegeben werden. - Auth Password
-
Die Angabe in diesem Feld entspricht dem zum
storefront
User gehörenden Passwort.
- Product Page Template Mapping
-
Über den Produkte-Report können komfortabel Produktseiten erstellt werden, die im Referenzprojekt die Seitenvorlage Product Detail Page verwenden. Um dies zu ermöglichen, erlaubt dieses Konfigurationsfeld die Abbildung von Salesforce Render Templates auf FirstSpirit-Seitenvorlagen. Dabei gelten folgende Regeln:
-
Das Feld enthält entweder gar keinen Inhalt oder ein oder mehrere Mappings.
-
Bleibt das Feld leer, ist die Verwendung von Produktseiten im Projekt deaktiviert.
-
Mappings werden durch eine kommaseparierte Liste angegeben <mapping>,<mapping>
-
jedes Mapping ist folgendermaßen aufgebaut: <isml_template>:<fs_template>
-
Um für alle ISML-Templates, die kein explizites Mapping besitzen, eine Seitenvorlage zu konfigurieren, ist folgende Form zu verwenden: default:<fs_template>
-
- Default Folder (Product Pages)
-
Für eine neue Produktseite muss bekannt sein, wo diese in der Struktur einzubinden ist. Dafür ist an dieser Stelle der Referenzname des Struktur-Ordners Product Pages angegeben. In ihm werden innerhalb des Referenzprojekts alle neuen Produktseiten erstellt. Bleibt das Feld leer, muss die Auswahl einer Menüebene durch den Redakteur erfolgen.
- Editable Folder (Product Pages)
-
Mit dieser Checkbox lässt sich festlegen, ob die im Feld
Default Folder (Product Pages)
getroffene Auswahl durch einen Redakteur geändert werden kann. Initial ist die Funktion aktiviert. Ist sie deaktiviert, wird die entsprechende Eingabekomponente im Dialog zur Erstellung einer Kategorie- oder Produktseite versteckt. Der Redakteur besitzt in diesem Fall keine Möglichkeit, den Menüpunkt einer neu erstellten Kategorie- oder Produktseite zu wählen bzw. zu ändern.
Das Feld |
- Category Page Template Mappings
-
Über dieses Konfigurationsfeld kann das Mapping von Seitenvorlagen für das Anlegen von Kategorieseiten über den Kategorie-Report, konfiguriert werden. Dabei gelten folgende Regeln:
-
Das Feld enthält entweder gar keinen Inhalt oder ein oder mehrere Mappings.
-
Bleibt das Feld leer, ist die Verwendung von Kategorieseiten im Projekt deaktiviert.
-
Mappings werden durch eine kommaseparierte Liste angegeben <mapping>,<mapping>
-
Jedes Mapping ist folgendermaßen aufgebaut: <isml_template>:<fs_template>[:fallback_category]
-
Der dritte Bestandteil des Mappings ist optional und dient der Angabe einer Fallback-Kategorie für Kategorieseiten, die auf dem angegebenen ISML-Template basieren
-
Um für alle ISML-Templates, die kein explizites Mapping besitzen, eine Seitenvorlage und optional eine Fallback-Kategorie zu konfigurieren, ist folgende Form zu verwenden: default:<fs_template>[:fallback_category]
-
Wir empfehlen, separate FirstSpirit-Vorlagen für Produktseiten und Kategorieseiten zu verwenden. |
- Default Folder (Category Pages)
-
Äquivalent zu den Produktseiten muss auch für jede neue Kategorieseite bekannt sein, wo diese in der Struktur einzubinden ist. Dafür ist an dieser Stelle der Referenzname des Struktur-Ordners Category Pages angegeben. In ihm werden innerhalb des Referenzprojekts alle neuen Kategorieseiten erstellt. Bleibt das Feld leer, muss die Auswahl einer Menüebene durch den Redakteur erfolgen.
- Editable Folder (Category Pages)
-
Äquivalent zur Checkbox
Editable Folder (Product Pages)
kann an dieser Stelle festgelegt werden, ob Redakteure die im FeldDefault Folder (Category Pages)
getroffene Auswahl ändern können. Initial ist die Funktion aktiviert. Ist sie deaktiviert, wird die Auswahlmöglichkeit im Dialog zur Erstellung einer Kategorieseite versteckt. Der Redakteur besitzt in diesem Fall keine Möglichkeit, den Menüpunkt für eine neue Seite zu wählen bzw. zu ändern.
Das Feld |
- Template Instantiation Script Uid
-
Über dieses Konfigurationsfeld kann optional ein Skript gewählt werden, das vor und nach der Anlage von Kategorie- oder Produktseiten ausgeführt wird. Das angegebene Skript create_sfcc_item_wizard dient der Ausführung projektspezifischer Aktionen, die für die Vorschauerzeugung notwendig sind. Im Referenzprojekt markiert es die erzeugte Kategorie- oder Produktseite für alle Sprachen als übersetzt.
Es ist zu beachten, dass nur der Code aus dem HTML-Kanal des Skripts ausgeführt wird. |
- View Type Priority
-
Die Bilder der aus der Commerce Cloud stammenden Produkte werden stets in verschiedenen Größen bereitgestellt. Es kann jedoch nicht vorausgesetzt werden, dass für jede Größe ein Bild hinterlegt wurde. Aus diesem Grund kann an dieser Stelle kommasepariert die
View Type Priority
der zu berücksichtigenden Bildgrößen definiert werden.
Im auf der Abbildung Konfigurationsdialog der Projekt-Komponente dargestellten Fall wird für jedes Produkt das zugehörige mittelgroße (medium
) Bild ermittelt und bei dessen Existenz verwendet. Liegt jedoch kein mittelgroßes Bild vor, wird anschließend das große (large
) bzw. gegebenenfalls das kleine (small
) Bild abgerufen.
Da das Feld keine Pflichteingabe erwartet, kann es vorkommen, dass keine Priorität definiert wird und das Feld leer bleibt. In diesem Fall werden Suchergebnisse für eine Produktabfrage ohne ein Bild dargestellt. |
- Image Service Base URL
-
Die Commerce Cloud stellt einen sogenannten
Dynamic Imaging Service
bereit. Ist seine Verwendung gewünscht, ist an dieser Stelle die URL des Images Services in der Formhttp[s]://<image server host name>
anzugeben. Produktbilder werden dann über den Image Service abgerufen.
Die Angabe der |
- Use Category Search
-
Im nächsten Schritt ist zu entscheiden, ob die Reports für Produkte und Kategorien zusätzlich zum Freitextsuchfeld eine Filterung auf Kategorien bereitstellen sollen. Standardmäßig ist die dafür zur Verfügung gestellte Checkbox
Use Category Search?
deaktiviert. In diesem Fall lässt sich eine Produkt- oder Kategoriesuche nicht zusätzlich auf eine Kategorie filtern. Die zugehörige Dropdown-Liste wird währenddessen im Report ausgeblendet. Ist eine solche Filterung nach Kategorien gewünscht, muss die Checkbox aktiviert werden.
Die Filterung nach Kategorien unterscheidet sich je nach verwendetem Report. Im Report für die Produktsuche ist eine Filterung über alle Kategorien möglich. Im Report für die Kategoriesuche ist die Filterung hingegen nur über die Toplevel-Kategorien möglich. |
- Show Category Report
-
Über diese Checkbox kann die Einblendung des Kategoriereports gesteuert werden. Standardmäßig ist dieser deaktiviert und somit nur der Report für die Produktsuche aktiv.
Abbildung 7. Kategorie-Report - Test Configuration
-
Über den Button Test Configuration lassen sich die eingetragenen Eingaben überprüfen. Dabei werden neben der
Client ID
, derBase URL
und - wenn vorhanden - derImage Service Base URL
auch die Konfigurationen für die Produkt- und Kategorieseiten berücksichtigt.
4.5. Hinzufügen der Web-Komponenten
Für die Vorschau
und den ContentCreator
werden zwei Web-Komponenten benötigt, die dem mitgelieferten Referenzprojekt bereits hinzugefügt sind. Sie müssen jedoch noch auf einem aktiven Webserver installiert werden. Öffnen Sie hierfür den ServerManager
und wählen Sie den Bereich .
Innerhalb des Hauptpanels sind verschiedene Registerkarten zu sehen, in denen jeweils eine Liste der bereits vorhandenen Web-Komponenten sichtbar ist. Diese Liste enthält sowohl für die Vorschau
als auch für den ContentCreator
die folgenden Einträge (vgl. Abbildung Web-Komponenten in den Projekt-Eigenschaften):
-
ContentConnect Web Component
-
FS_JSTL_WebApp
Selektieren Sie in beiden Registerkarten einen Webserver
über die Auswahlbox und starten Sie die Installation jeweils über den Button Installieren. Nach der erfolgreichen Installation öffnet sich ein Dialog, in welchem die Aktivierung des Webservers
zu bestätigen ist.
Detaillierte Informationen zum Hinzufügen von Web-Komponenten finden Sie in der FirstSpirit Dokumentation für Administratoren.
4.6. Konfiguration der Web-Komponente
Teil der Web-Komponente des ContentConnect-Moduls sind der Preview Proxy und der Preview Filter. Beide Komponenten lassen sich über die web.xml
konfigurieren und sind in den beiden folgenden Kapiteln näher beschrieben.
4.6.1. Preview Proxy
Treten bei der Vorschau Probleme mit Cross-Origin Requests aufgrund der Same-Origin Policy moderner Webserver auf, so können diese durch den Einsatz des im ContentConnect-Modul enthaltenen Preview Proxys behoben werden.
Dazu sind die Aufrufe der betroffenen Ressourcen über den Preview Proxy zu leiten. Wie dies im Projekt bewerkstelligt wird, erläutert das Kapitel Vorschau.
Der Preview Proxy ist über die web.xml
mit folgendem Parameter konfigurierbar:
Parameter | Defaultwert | Beschreibung |
---|---|---|
connection.keepalive |
60 |
Die Dauer der Aufrechterhaltung einer Verbindung innerhalb des Preview Proxys in Sekunden. Ein zu hoher Wert kann zu Problemen bei der Abfrage von Ressourcen führen. |
Beispiel
Ein beispielhafter Ausschnitt aus der web.xml
, in dem der Parameter des Preview Proxys konfiguriert ist und außerdem der vorkonfigurierte URL-Pfad angepasst wurde, könnte wie folgt aussehen:
<servlet>
<servlet-name>ContentConnectPreviewProxy</servlet-name>
<servlet-class>com.espirit.moddev.demandware.preview.proxy.ProxyServlet</servlet-class>
<load-on-startup>0</load-on-startup>
<init-param>
<param-name>connection.keepalive</param-name>
<param-value>120</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>ContentConnectPreviewProxy</servlet-name>
<url-pattern>/assets/*</url-pattern>
</servlet-mapping>
4.6.2. Preview Filter
Der ContentConnect Preview Filter
ermittelt für die Darstellung einer Seite in der FirstSpirit-Vorschau die notwendigen Informationen. Im Slot-basierten Ansatz identifiziert er dafür die richtige Storefront-URL, lädt anhand dieser das HTML herunter und ersetzt die darin enthaltenen Slots durch die entsprechenden redaktionellen Inhalte. Bei Verwendung der CI API
lässt er hingegen die in FirstSpirit gepflegten Velocity-Fragmente Salesforce-seitig auswerten und stellt das jeweilige Ergebnis an der entsprechenden Stelle auf der Seite in der FirstSpirit-Vorschau dar.
Für die Durchführung dieser Schritte benötigt er einige Informationen, die über diverse Parameter in der web.xml
der hinzugefügten Web-Komponente (sowohl für die Vorschau als auch für den ContentCreator) konfigurierbar sind. Diese beziehen sich auf unterschiedliche Aspekte, die sich in vier Gruppen unterteilen lassen.
Die
Anpassung in der web.xml für die Vorschau im SiteArchitect
Darüber hinaus ist eine Konfiguration der einzelnen Parameter ausschließlich dann notwendig, wenn ihre Defaultwerte nicht den projektspezifischen Gegebenheiten entsprechen. |
Storefront URL Parameter
Wie bereits beschrieben ermittelt der Preview Filter
sowohl im Slot-basierten Ansatz als auch bei der Verwendung der CI API
Salesforce-seitig die notwendigen Informationen und stellt sie in der FirstSpirit-Vorschau dar. Dafür ist eine projektspezifische Storefront-URL erforderlich. Da diese in den Projekteinstellungen gepflegt wird, benötigt der Preview Filter
zur Abfrage die Angabe der zugehörigen Eingabekomponente.
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.url.baseUrlFormField |
ps_storefrontUrlBaseUrl |
Die Eingabekomponente für die Angabe der Basis-URL des Storefronts, die um den Page Type und die ID des anzuzeigenden Elements (z.B. Produkt-, Kategorie- oder Asset-ID) erweitert wird. Sie wird in den Projekteinstellungen gepflegt. |
Die Syntax für die Storefront Base URL kann im Kapitel Salesforce B2C Commerce 22.10 ➔ Merchandising Your Site ➔ Search Engine Optimization ➔ URL Syntax ➔ Salesforce B2C Commerce URL Syntax Without SEO der Salesforce Commerce Cloud Dokumentation nachgeschlagen werden. |
Als Wert der Eingabekomponente Bsp.: https://www.mystore.com/on/demandware.store/Sites-YourShopHere-Site/ |
Änderungen an den Projekteinstellungen sind nicht sofort wirksam, da sie in der Session des Benutzers gespeichert werden. Sie erfordern daher einen Neustart des Clients. |
Storefront Crop Marks Parameter
Die in den redaktionellen Inhalten enthaltenen Platzhalter bestehen jeweils aus einem Start- sowie End-Kommentar und besitzen standardmäßig das Format <!-- CMS-<IDENTIFIER>-START -->
bzw. <!-- CMS-<IDENTIFIER>-END -->
. Über ein Toggle in den Projekteinstellungen, das bei Bedarf hinzuzufügen ist, kann jedoch die Verwendung individueller Affixe aktiviert werden. In diesem Fall werden die Defaultwerte überschrieben und stattdessen die spezifischen Präfixe bzw. Suffixe verwendet. Um dem Preview Filter
den Zugriff auf diese Informationen zu ermöglichen, benötigt er die Angabe der zugehörigen Eingabekomponenten.
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.cropMarks. customAffixes.enabledFormField |
ps_storefrontCropMarksCustomAffixesEnabled |
Das Toggle in den Projekteinstellungen zur De-/Aktivierung der Verwendung individueller Affixe. |
storefront.cropMarks. opening.prefixFormField |
ps_storefrontCropMarksOpeningPrefix |
Die Eingabekomponente in den Projekteinstellungen zur Angabe eines Präfixes für den Start-Kommentar. |
storefront.cropMarks. opening.suffixFormField |
ps_storefrontCropMarksOpeningSuffix |
Die Eingabekomponente in den Projekteinstellungen zur Angabe eines Suffixes für den Start-Kommentar. |
storefront.cropMarks. closing.prefixFormField |
ps_storefrontCropMarksClosingPrefix |
Die Eingabekomponente in den Projekteinstellungen zur Angabe eines Präfixes für den End-Kommentar. |
storefront.cropMarks. closing.suffixFormField |
ps_storefrontCropMarksClosingSuffix |
Die Eingabekomponente in den Projekteinstellungen zur Angabe eines Suffixes für den End-Kommentar. |
Storefront Protection Parameter
Es besteht die Möglichkeit, die Verbindung zur Commerce Cloud über eine Authentifizierung zu schützen. Sie kann Salesforce-seitig de-/aktiviert werden und muss FirstSpirit-seitig über das entsprechende Toggle in den Projekteinstellungen übernommen werden. Im Fall der Aktivierung sind zusätzlich die benötigten Zugangsdaten anzugeben. Der Preview Filter
muss auf diese Informationen zugreifen können und benötigt daher die Angabe der zugehörigen Eingabekomponenten.
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.protection.enabledFormField |
ps_storefrontProtectionEnabled |
Die Eingabekomponte in den Projekteinstellungen zur De-/Aktivierung der Authentifizierung für die Storefront-URL. |
storefront.protection.userFormField |
ps_storefrontProtectionUser |
Die Eingabekomponente in den Projekteinstellungen für die Erfassung des Storefront-Benutzers. |
storefront.protection.passwordFormField |
ps_storefrontProtectionPassword |
Die Eingabekomponente in der Projekteinstellungen für das Passwort des Storefront-Benutzers. |
Storefront Downloader Parameter
Zusätzlich zu den übrigen Parametern, die hauptsächlich der Ermittlung der richtigen Storefront-URL dienen, muss es im Slot-basierten Ansatz möglich sein, das Verhalten des Preview Filters
während des Herunterladens des HTMLs der entsprechenden Seite zu steuern. Dafür besitzt er verschiedene Parameter, die in den Projekteinstellungen pflegbar sind. Der Preview Filter
muss auf diese Informationen zugreifen können und benötigt daher die Angabe der zugehörigen Eingabekomponenten.
Die Storefront Downloader Parameter werden zur Initialisierung des Filters im Slot-basierten Ansatz benutzt. Aus diesem Grund besitzen sie für den Fall einer fehlenden oder leeren Eingabekomponente einen festen Fallback-Wert. |
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.downloader.maxConnections |
ps_storefrontDownloaderMaxConnections |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der maximalen Anzahl parallel zulässiger Verbindungen zum Storefront. |
storefront.downloader.socketTimeout |
ps_storefrontDownloaderSocketTimeout |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der Zeitspanne (in Millisekunden), in der eine Antwort vom Storefront erwartet wird. |
storefront.downloader.retryCount |
ps_storefrontDownloaderRetryCount |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der maximalen Anzahl der Verbindungsversuche. |
Die Verwendung der folgenden beiden Parameter wird nur in Ausnahmefällen empfohlen, da diese die Zertifikatsprüfung für |
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.downloader.certificatesCheck |
true |
Das Setzen dieses Parameters auf |
storefront.downloader.sslWhitelist |
leer |
Über die |
Storefront Cache Parameter
Das vom Preview Filter
heruntergeladene HTML Slot-basierter Seiten wird in einem Cache vorgehalten, so dass es nicht bei jedem Aufruf neu von der Commerce Cloud bezogen werden muss. Ein solcher Cache existiert sitzungsübergreifend für jedes Projekt auf dem FirstSpirit-Server. Dieser Cache besitzt einige Parameter, die in den Projekteinstellungen pflegbar sind. Der Preview Filter
muss auf diese Informationen zugreifen können und benötigt daher die Angabe der zugehörigen Eingabekomponenten.
Wie die Downloader Parameter werden auch die Cache Parameter zur Initialisierung des Filters im Slot-basierten Ansatz benutzt. Aus diesem Grund besitzen sie für den Fall einer fehlenden oder leeren Eingabekomponente einen festen Fallback-Wert. |
Parameter | Defaultwert | Beschreibung |
---|---|---|
storefront.cache.maxEntries |
ps_storefrontDownloaderMaxCacheEntries |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der maximalen Anzahl der Elemente im Cache. |
storefront.cache.refreshAfterWrite |
ps_storefrontCacheRefreshAfterWrite |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der Zeitspanne (in Stunden), bis ein Element im Cache als veraltet markiert wird. |
storefront.cache.expireAfterWrite |
ps_storefrontCacheExpireAfterWrite |
Die Eingabekomponente in den Projekteinstellungen zur Angabe der Zeitspanne (in Stunden), bis ein Element im Cache als entfernbar markiert wird. |
storefront.cache.excludePatterns |
ps_storefrontCacheExcludePatterns |
Die Eingabekomponente in den Projekteinstellungen zur Angabe von Storefront URLs, die nicht im Cache vorgehalten werden sollen. Die Angabe der URLs erfolgt in Form einer Liste von regulären Ausdrücken. |
Beispiel
Ein beispielhafter Ausschnitt aus der web.xml
, in der zwei Parameter des Preview Filters konfiguriert sind, könnte wie folgt aussehen:
<filter>
<filter-name>ContentConnectPreviewFilter</filter-name>
<filter-class>com.espirit.moddev.demandware.preview.PreviewFilter</filter-class>
<init-param>
<param-name>storefront.downloader.socketTimeout</param-name>
<param-value>ps_myCustomStorefrontDownloaderSocketTimeout</param-value>
</init-param>
<init-param>
<param-name>storefront.downloader.retryCount</param-name>
<param-value>ps_myCustomStorefrontDownloaderRetryCount</param-value>
</init-param>
</filter>
4.7. Auflösungen
Das Referenzprojekt ContentConnect Reference Project besitzt unterschiedliche Absätze, mit denen sich auf den verschiedenen Seiten Bilder einbinden lassen. Die Bilder sollen durch den Redakteur auf einen bestimmten Bildausschnitt zugeschnitten werden können. Diese Funktionalität wird über die Angabe einer Auflösung aktiviert.
$CMS_REF(st_picture, resolution:"RESOLUTION")$
Für das Referenzprojekt werden die Auflösungen BANNER
, SLIDE
, GRID_ELEMENT_HIGH
, GRID_ELEMENT_WIDE
, GRID_ELEMENT_SQUARE
, IMAGE_MAP
, ARTICLE_TEASER_IMAGE
und TECHNOLOGY_IMAGE
benötigt. Sie sind bereits innerhalb des ServerManagers
im Bereich angelegt und an den entsprechenden Stellen in den Absätzen angegeben.
4.8. Deployment-Auftrag
Für die Übermittlung der in FirstSpirit erstellten Inhalte in den Commerce Cloud Storage besitzt das mitgelieferte Referenzprojekt einen Auftrag, der die folgenden Aktionen enthält (vgl. Abbildung Aktionen des Generierungsauftrags). Eine Beschreibung der einzelnen Aktionen erfolgt in den nachfolgenden Unterkapiteln.
Weitere Informationen zur Erstellung eines Auftrags sind in der FirstSpirit Dokumentation für Administratoren zu finden.
4.8.1. Initialize SFCC Deployment
Im ersten Schritt erfolgt die Initialisierung des Deployments. Dies beinhaltet die Einrichtung der Content-Bereinigung, während der ein der Generierung vorausgehender Zeitstempel erzeugt wird. Diesen Zeitstempel verwendet die Cleanup-Aktion im letzten Schritt des Auftrags zur Löschung veralteter Assets und Slot-Konfigurationen. Der Auftrag enthält dafür die Aktion Salesforce Commerce Cloud Initializer
:
Für die Verwendung der Content-Bereinigung muss die Initialisierung zwingend die erste Aktion des Auftrags sein. Andernfalls kommt es zu Inkonsistenzen im Datenbestand. |
4.8.2. Content Preparation - Vollgenerierung
Für das Deployment der für die Commerce Cloud relevanten Inhalte sind diese zunächst aus dem Projekt zu ermitteln. Dafür muss eine Vollgenerierung durchgeführt werden, die alle referenzierten Medien in der richtigen Auflösung generiert. Außerdem erzeugt sie die in den Projekteinstellungen initialisierten XML-Kollektoren und füllt sie anhand der in den Vorlagen enthaltenen xmlCollector-Aufrufe.
Der Auftrag besitzt daher die Generierungsaktion Content Preparation
, in deren Eigenschaften
die folgenden Optionen aktiviert sind (vgl. Abbildung Aktion Content Preparation):
-
Vollgenerierung durchführen
-
Generierungsverzeichnis vorher leeren
-
Medien im Generierungsverzeichnis erzeugen
Das definierte Präfix für absolute Pfade
/firstspirit
wird in der Aktion WebDAV-Deployment benötigt.
Der Einsatz des WebDAV-Moduls ist nur in Verbindung mit dem Standard-URL-Creator möglich. Für die Pfaderzeugung ist daher der Eintrag |
In der Registerkarte Erweitert
sind außerdem die Vorlagensätze aller im Projekt vorhandenen Sprachen selektiert. Des Weiteren wurde die Variable dwre_xmlGeneration
hinzugefügt, die den Wert false
enthält. Sie wird in den nachfolgenden XML Import File
-Aktionen auf den Wert true
gesetzt und stellt sicher, dass die Erzeugung der XML-Dateien für die Slot-Konfigurationen und die Assets erst nach der Generierung erfolgt. Die Erzeugung der XML-Datei wird durch die im Projekt enthaltene XML-Vorlage gesteuert.
4.8.3. XML Import File - Teilgenerierungen
Alle an die Commerce Cloud übermittelten Daten werden von dieser in Form von XML-Dateien erwartet. Aus diesem Grund müssen die während der Vollgenerierung ermittelten Informationen aus den erzeugten XML-Kollektoren ausgelesen werden. Sie sollen stattdessen in eine jeweils zu erstellende XML-Datei geschrieben werden.
Der Auftrag verfügt daher für jeden in den Projekteinstellungen initialisierten XML-Kollektor eine weitere Generierungsaktion. Im Gegensatz zur Aktion Content Preparation
handelt es sich bei ihnen jedoch um Teilgenerierungen. In ihren Eigenschaften
ist daher die Option Teilgenerierung durchführen für folgende Startpunkte
aktiviert. Als Startpunkt dient jeweils eine der auf der XML-Vorlage basierenden Seitenreferenzen (vgl. Abbildung Teilgenerierung).
In der Registerkarte Erweitert
jeder dieser Aktionen wurde außerdem die Variable dwre_xmlGeneration
hinzugefügt, die den Wert true
enthält. Zusammen mit dem jeweils ausgewählten Startknoten stellt sie sicher, dass die selektierte Seitenreferenz erst zu diesem Zeitpunkt generiert wird. Somit liegen alle benötigten Informationen für die Erstellung der XML-Datei bereits vor und es können keine Lücken auftreten. Die Erzeugung der XML-Datei wird durch die im Projekt enthaltene XML-Vorlage gesteuert.
4.8.4. WebDAV-Deployment
Die mit den Teilgenerierungen erzeugten XML-Dateien müssen anschließend an die Commerce Cloud übermittelt werden. Die Publizierung erfolgt über eine Skript-Aktion, für die in ihren Eigenschaften
folgende Parameter definiert sind:
- url
-
Die
URL
gibt den Host und den Pfad auf dem WebDAV-Server an. Sie besitzt immer die folgende Struktur:https://<SUBDOMAIN INSTANCE>.demandware.net/on/demandware.servlet/webdav/Sites/Impex/…/<PREFIX>/<SITE ID>
Der Pfad entspricht dem Ort, an dem die jeweilige XML-Datei während des Imports erwartet wird. Er muss auf ein bereits existierendes Verzeichnis verweisen. |
- user
-
Für die Übertragung der Daten wird ein technischer User benötigt, der zur Nutzung der WebDAV-Schnittstelle berechtigt ist. Er muss Schreibrechte besitzen und wird an dieser Stelle mit seinem Namen angegeben.
Unter Administering Your Organization ➔ Permissions, Users, and Roles ➔ Roles and Permissions ➔ Create a Role enthält die Salesforce-Dokumentation Informationen, wie diese Rechte zu setzen sind.
- password
-
Für den zuvor angegebenen User wird zusätzlich die Angabe des Passworts benötigt.
Der technische Benutzer unterliegt den durch die Commerce Cloud definierten Passwort-Bestimmungen. Diese erfordern eine mindestens vierteljährliche Änderung des Passworts. Der Wert des Parameters muss in jedem dieser Fälle zwingend angepasst werden. |
- mediaurl
-
Der bei der Generierung erzeugte Medien-Ordner und sein Inhalt müssen in ein separates Verzeichnis übertragen werden, um der Commerce Cloud den Import zu ermöglichen. Dieses Verzeichnis ist über den Parameter
mediaurl
festgelegt. Diemediaurl
besitzt immer die folgende Struktur:https://<SUBDOMAIN INSTANCE>.demandware.net/on/demandware.servlet/webdav/Sites/Libraries/<SITE ID|LIBRARY ID>/default/<PREFIX>
Die |
Bei der Benutzung einer privaten Library ist die Angabe der Site ID anstelle der Library ID im Pfad erforderlich. |
- srcprefixdir
-
Soll nur ein bestimmtes Verzeichnis an die Commerce Cloud übertragen werden, kann es über den optionalen Parameter
srcprefixdir
relativ zum Root-Knoten des Generierungsverzeichnisses angegeben werden. Wird der Parameter nicht definiert oder für ihn kein Wert gespeichert, wird das gesamte Generierungsverzeichnis übertragen. - purge
-
Dieser Parameter ist optional und kann nur den Wert
true
oderfalse
besitzen. Der Werttrue
bewirkt, dass alle Dateien und Verzeichnisse unterhalb der angegebenenURL
vor dem Start der Übertragung gelöscht werden. Besitzt der Parameter den Wertfalse
oder keinen Wert, bleiben alle bestehenden Dateien und Verzeichnisse unterhalb der angegebenenURL
bestehen. Neue Daten werden entweder hinzugefügt oder im Fall bereits existierender Daten überschreiben sie diese. - javax_net_ssl_keyStore (optional)
-
Über diesen Parameter ist die Angabe einer dedizierten Java-Zertifikats-Datei für das WebDAV-Deployment möglich.
- javax_net_ssl_keyStorePassword (optional)
-
Das Passwort der Java-Zertifikats-Datei.
- javax_net_ssl_keyStoreType (optional)
-
Der Typ der Java-Zertifikats-Datei, z.B.
jks
.
Das WebDav-Deployment darf nicht im Fehlerfall ausgeführt werden. |
4.8.5. Trigger SFCC Import Job Schedule
Nach der Publizierung der erzeugten XML-Dateien durch das WebDAV-Deployment wird der angelegte Job Schedule ausgeführt. Dieser löst Salesforce-seitig den Import der generierten Inhalte und Slot-Konfigurationen in die Commerce Cloud aus. Das ContentConnect-Modul stellt zu diesem Zweck die Auftragsaktion Salesforce Commerce Cloud Importer
zur Verfügung:
Die Aktion stellt einen Konfigurationsdialog bereit, in dem neben einem frei zu vergebenen Namen zwei Parameter zu definieren sind:
- Import Job ID
-
Dieses Feld enthält die ID des angelegten Job Schedules.
- Timeout
-
Der Wert in diesem Feld stellt die Zeitspanne in Sekunden dar, in der sekündlich der Status des Job Schedules abgefragt wird. Falls der Job Schedule in der angegebenen Zeitspanne nicht beendet wurde, wird diese Auftragsaktion als fehlerhaft gekennzeichnet. Der Defaultwert beträgt 10 Sekunden.
Da der |
4.8.6. Salesforce Commerce Cloud Cleanup
Nach der Ausführung des angelegten Job Schedules wird die Content-Bereinigung ausgeführt. Dabei werden alle veralteten Assets und Slot-Konfigurationen über die OC API abgefragt und anschließend gelöscht. Hierfür stellt das ContentConnect-Modul die Auftragsaktion Salesforce Commerce Cloud Cleanup
zur Verfügung:
Neben einem frei zu vergebenden Namen für diese Auftragsaktion enthält der dazugehörige Konfigurationsdialog folgende Parameter:
- Use different site
-
Die Content-Bereinigung nutzt eine Commerce Cloud-Site für die Suche nach den zu löschenden Content Assets und Slot-Konfigurationen. Die Checkbox
Use different site
erlaubt die Nutzung der Content-Bereinigung für eine andere als die konfigurierte Site.
- Site Id
-
Falls die Checkbox
Use different site
aktiv ist, ist in diesem Feld die Commerce Cloud-Site anzugeben, die bei der Content-Bereinigung genutzt werden soll. -
Diese Checkbox erlaubt die De-/Aktivierung der Content-Bereinigung von Assets.
- Library Id
-
In diesem Feld ist die ID der Content Library anzugeben, aus der Content Assets gelöscht werden. Im Fall einer privaten Libary entspricht die Library ID der Site ID.
- Additional refinement(s)
-
In diesem Feld können Attributnamen und -werte zur weiteren Filterung der zu löschenden Content Assets angegeben werden. Die Angabe muss die folgende Form besitzen:
ATTRIBUTE_NAME=ATTRIBUTE_VALUE [; ATTRIBUTE_NAME=ATTRIBUTE_VALUE] ...
Die Attributwerte können folgende Parameter enthalten:
Parameter Ersetzung durch ${projectId}
Die ID des generierten FirstSpirit-Projekts
${projectName}
Der Name des generierten FirstSpirit-Projekts
Die angegebenen Attribute müssen als Custom-Attributes in der Commerce Cloud existieren und über die FirstSpirit-Generierung mit Werten befüllt worden sein, bevor die hier beschriebene Filterung genutzt werden kann. |
-
Diese Checkbox erlaubt die De-/Aktivierung der Content-Bereinigung von Slot-Konfigurationen.
- Filter query
-
Dieses Feld dient der Filterung der zu löschenden Slot-Konfigurationen. Die Angabe eines Filters erfolgt als Query-Dokument im JSON-Format. Innerhalb der Abfrage können die Parameter des Felds Additional refinement(s) genutzt werden, wie das folgende Beispiel einer TextQuery veranschaulicht:
"text_query": { "fields": ["c_fsProjectId"], "search_phrase": "${projectId}" }
Falls das Feld
Filter query
leer bleibt, nutzt das ContentConnect-Modul eine MatchAllQuery, wodurch die zu löschenden Slot-Konfigurationen nicht weiter gefiltert werden.
Um Inkonsistenzen im Datenbestand bzw. einen Datenverlust zu vermeiden, muss die Aktion |
Da der |
4.9. Arbeitsabläufe
Die Freigabe, das Löschen und die Publizierung von Inhalten durch Redakteure erfolgt innerhalb des mitgelieferten Referenzprojekts ContentConnect Reference Project über Arbeitsabläufe. Es enthält aus diesem Grund einen Publish-Arbeitsablauf sowie die BasicWorkflows, die alternativ zu projektspezifischen Arbeitsabläufen eingesetzt werden können.
Installation des BasicWorkflows-Moduls
Vor der Verwendung der Arbeitsabläufe muss zunächst das BasicWorkflows-Modul auf dem FirstSpirit-Server installiert und die Web-Komponente aktiviert sein. Die dafür notwendigen Schritte sind analog zur Installation der anderen Module und der Aktivierung der zugehörigen Web-Komponenten. Die Web-Komponente der BasicWorkflows wird allerdings nur in der Registerkarte ContentCreator
benötigt.
Der Einsatz der BasicWorkflows im ContentCreator erfordert darüber hinaus die Auswahl des bereitgestellten BasicWorkflows Status Providers
im Bereich innerhalb des
ServerManagers
. Im Referenzprojekt ContentConnect Reference Project ist diese Einstellung bereits vorgenommen (vgl. Abbildung Element Status Provider).
Des Weiteren ist im Bereich der
Arbeitsablauf zum Löschen von Elementen
vorausgewählt. Dies bewirkt, dass jede Handlung zum Löschen von Elementen innerhalb des Projekts (Entf-Taste, Lösch-Symbol) über ihn ausgeführt wird. Das native (von einem Arbeitsablauf unabhängige) Löschen von Elementen steht somit nicht zur Verfügung – auch nicht für den Administrator.
Vorlagen
Die BasicWorkflows sowie der mit dem StarterPackage mitgelieferte Arbeitsablauf benötigen verschiedene Vorlagen. Diese müssen für die BasicWorkflows üblicherweise über das Kontextmenü in das verwendete FirstSpirit-Projekt importiert werden. Im Referenzprojekt sind sie jedoch bereits vorhanden und ein Import der Vorlagen ist somit nicht notwendig.
Der Publish-Arbeitsablauf stößt den Deployment-Auftrag an und benötigt dafür dessen Namen. Weicht dieser von dem Ausdruck Generate and deploy to SFCC ab, ist innerhalb des Skripts SFCC Release Deployment der Wert der Variablen |
Rechtevergabe
Im letzten Schritt müssen die Arbeitsabläufe in den einzelnen Verwaltungen erlaubt werden, um auf FirstSpirit-Elementen ausgeführt werden zu können. Dafür lässt sich auf den Root-Knoten der Verwaltungen über den Kontextmenüeintrag die Rechtevergabe öffnen. Dieser Schritt ist im Referenzprojekt ebenfalls bereits durchgeführt und entfällt damit.
Die auf den Root-Knoten der Verwaltungen gesetzten Rechte zur Ausführung der Arbeitsabläufe beziehen sich auf die Gruppe |
Nähere Informationen finden Sie in der BasicWorkflows-Dokumentation.
4.10. Projekteinstellungen
Für die Verbindung zwischen FirstSpirit und der Commerce Cloud sind einige projektspezifische Informationen unentbehrlich (vgl. Abbildung Projekteinstellungen). Sie werden über das Formular der Projekteinstellungen erfasst und sind innerhalb des Referenzprojekts anzugeben.
Änderungen an den Projekteinstellungen sind nicht sofort wirksam, da sie in der Session des Benutzers gespeichert werden. Sie erfordern daher einen Neustart des Clients. |
- Storefront Base URL
-
Das Feld dient der Angabe der Basis-URL des Storefronts, die um den Page Type und die ID des anzuzeigenden Elements (z. B. Produkt-, Kategorie- oder Asset-ID) erweitert wird. Sie besitzt das folgende Format:
https://<SUBDOMAIN INSTANCE>/on/demandware.store/Sites-<SIDE ID>-Site
Weitere Informationen zur Storefront Base URL erhalten Sie in der Commerce Cloud Dokumentation im Kapitel Merchandising Your Site ➔ Search Engine Optimization ➔ URL Syntax>Salesforce B2C Commerce URL Syntax Without SEO.
Als Wert der Storefront Base URL darf entsprechend ihres genannten Formats lediglich der Teil bis zur Locale und nicht die gesamte URL angegeben werden. Beispiel: |
- SFCC Content Asset ID Prefix
-
Zur eindeutigen Identifizierung der durch FirstSpirit erzeugten Content Assets ist an dieser Stelle ein Präfix für die Content Asset ID zu definieren.
- Preview Protection (BasicAuth)
-
Innerhalb der Commerce Cloud lässt sich der Zugriff auf den Storefront schützen, indem der Site Status
Online (protected)
aktiviert wird. Besteht diese Einschränkung, muss in FirstSpirit der Userstorefront
angegeben werden. Durch die Aktivierung des Toggles werden die FelderUser
undPassword
eingeblendet. - User
-
Ist die Beschränkung des Zugriffs in der Commerce Cloud aktiviert, muss in diesem Feld der User
storefront
angegeben werden. - Password
-
In diesem Feld erfolgt die Angabe des zum
storefront
Users gehörenden Passworts. - StarterPackage Version
-
Dieses Feld dient allein zur Anzeige der Version des verwendeten Referenzprojekts.
- Enable Custom Affixes
-
Das Toggle ermöglicht die Verwendung individueller Affixe für die in den Vorlagen enthaltenen HTML-Kommentare, mit denen die für die Vorschau zu ersetzenden Inhalte gekennzeichnet sind. Diese besitzen standardmäßig das Format
<!-- CMS-<IDENTIFIER>-START -->
bzw.<!-- CMS-<IDENTIFIER>-END -->
. Mit der Aktivierung des Toggles werden alle vier Affixe überschrieben und die Defaultwerte somit nicht mehr berücksichtigt. Die spezifischen Werte lassen sich anschließend über die nachfolgenden Felder angeben. Fehlt trotz aktiviertem Toggle eines der Eingabefelder, wird für das entsprechende Affix ein Leerstring verwendet.
Für die individuellen Affixe gilt das Format Leerzeichen, die in den Konfigurationsfeldern vor oder hinter einem individuellen Affix angegeben sind, werden ignoriert. Die Aktivierung des Toggles ohne die Definition mindestens eines Affixes kann zu unerwartetem Verhalten führen. |
Innerhalb des Referenzprojekts besitzen alle HTML-Kommentare das Standardformat. Aus diesem Grund enthält die Vorlage für die Projekteinstellungen weder das Toggle noch die Eingabefelder für die Verwendung individueller Affixe. |
- Opening Prefix/Opening Suffix
-
Das öffnende Präfix und das öffnende Suffix bilden zusammen mit dem Identifier den Start-HTML-Kommentar und markieren den Anfang des zu ersetzenden Inhalts.
- Closing Prefix/Closing Suffix
-
Das schließende Präfix und das schließende Suffix bilden zusammen mit dem Identifier den End-HTML-Kommentar und markieren das Ende des zu ersetzenden Inhalts.
- Storefront-URL Controller Form Field
-
Zur Bestimmung der Storefront-URL muss der ContentConnect Preview Filter wissen, welchen Controller (z. B. Home, Page oder Search) er ansprechen soll. Diese Information ist in der Regel abhängig von der anzuzeigenden Seite, weshalb der Preview Filter sie aus einer Eingabekomponente des Formulars der Vorschauseite ausliest. Dabei verwendet er standardmäßig das Feld
pt_storefrontUrlController
. Dieses Verhalten kann in den Projekteinstellungen über das Feldps_storefrontUrlControllerFormField
konfiguriert werden, in das bei Bedarf der Name des auszulesenden Formularfeldes einzutragen ist.
Innerhalb des Referenzprojekts besitzen alle Seitenvorlagen standardmäßig die Eingabekomponente |
- Storefront-URL Context ID Form Field
-
Zusätzlich zum Controller benötigt der ContentConnect Preview Filter in manchen Fällen eine ID (z. B. eine Produkt-, Kategorie-, oder Content Asset-ID), die er ebenfalls aus dem Seitenformular ermittelt. Das entsprechende Formularfeld kann optional in den Projekteinstellungen über das Feld
ps_storefrontUrlContextIdFormField
konfiguriert werden. Standardmäßig liest der Preview Filter die Komponentept_storefrontUrlContextId
aus.
Innerhalb des Referenzprojekts besitzen alle Seitenvorlagen standardmäßig die Eingabekomponente |
Des Weiteren werden mit der Vorlage zwei XML-Kollektoren und ein Produkt-Manager initialisiert, die in den anderen Seiten- und Absatzvorlagen des Projekts genutzt werden. In diesen Seiten- und Absatzvorlagen wird festgelegt, welche Daten an die Commerce Cloud übergeben werden sollen. Während der Generierung werden die Daten auf Basis dieser Festlegungen gesammelt und die XML-Kollektoren gefüllt.
Bestehen für die XML-Kollektoren projektspezifische Anforderungen, so können sie über die Methoden der Klasse Informationen zum Aufruf des Produkt-Managers sind im Javadoc der Klasse |
5. Anwendungsfälle
Das ContentConnect-Modul stellt unterschiedliche Möglichkeiten bereit, auf Commerce Cloud-Inhalte zuzugreifen und diese in FirstSpirit zu verwenden. Diese sind in beiden Clients äquivalent und werden nachfolgend anhand des mitgelieferten Referenzprojekts ContentConnect Reference Project in Form von Anwendungsfällen beschrieben. Die Beschreibung jedes Anwendungsfalls richtet sich sowohl an Redakteure als auch an FirstSpirit-Entwickler.
5.1. Vorschau
Für die Darstellung der Vorschau einer Seite ermittelt der ContentConnect Preview Filter Salesforce-seitig die notwendigen Informationen. Im Slot-basierten Ansatz identifiziert er dafür die richtige Storefront-URL, lädt anhand dieser das HTML herunter und ersetzt die darin enthaltenen Slots durch die entsprechenden redaktionellen Inhalte. Die Slots sind dabei durch eindeutige HTML-Kommentare gekennzeichnet und werden in FirstSpirit durch die Inhaltsbereiche einer Seitenvorlage repräsentiert. Bei der Verwendung der Content Integration API
lässt der Preview Filter hingegen die in FirstSpirit gepflegten Velocity-Fragmente Salesforce-seitig auswerten und stellt das jeweilige Ergebnis an der entsprechenden Stelle auf der Seite dar.
Redakteurssicht
Die Erstellung und Pflege redaktioneller Inhalte findet in FirstSpirit statt. Einem Redakteur stehen dafür die gewohnten Mittel zur Verfügung und er benötigt keine darüber hinausgehenden Kenntnisse. Die Inhalte beider Systeme werden aus der Sicht des Redakteurs automatisch zusammengeführt und in der Vorschau bzw. im ContentCreator dargestellt.
Entwicklersicht
Standardmäßig basieren die Seiten innerhalb des mitgelieferten Referenzprojekts auf dem Slot-basierten Ansatz. Wie beispielsweise bei der Kategorie-Detailseite ist jedoch alternativ die Verwendung der CI API
möglich. Die beiden Ansätze unterscheiden sich grundlegend voneinander und werden bei der Vorschauerzeugung automatisch vom ContentConnect Preview Filter entsprechend berücksichtigt.
Slot-basierter Ansatz
Innerhalb des mitgelieferten Referenzprojekts werden die aus Salesforce stammenden Slots durch die Inhaltsbereiche der Seitenvorlagen repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils einem Asset entsprechen und je nach Anwendungsfall zusätzlich eine Slot-Konfiguration besitzen. Für die Darstellung einer Seite in der Vorschau werden die im heruntergeladenen HTML enthaltenen Slots durch die redaktionellen Inhalte ersetzt.
Für die Ersetzung müssen alle für die Vorschau relevanten Inhalte durch eindeutige HTML-Kommentare gekennzeichnet sein. Diese können aus technischer Sicht in jeder Vorlage vorkommen, sind im Referenzprojekt jedoch nur in Seitenvorlagen enthalten. Sie bestehen jeweils aus einem Start- sowie End-Kommentar und besitzen standardmäßig das Format <!-- CMS-<IDENTIFIER>-START -->
bzw. <!-- CMS-<IDENTIFIER>-END -->
.
Über ein Toggle in den Projekteinstellungen, das bei Bedarf hinzuzufügen ist, kann die Verwendung individueller Affixe für die HTML-Kommentare aktiviert werden. In diesem Fall werden die Defaultwerte überschrieben und stattdessen die spezifischen Präfixe bzw. Suffixe verwendet. |
Dieselben HTML-Kommentare müssen vom Salesforce-Entwickler auch in die Storefront-Seite eingefügt werden und die zu ersetzenden Slots kennzeichnen. Dabei ist darauf zu achten, dass die Identifier in der FirstSpirit-Vorlage und in der Storefront-Seite übereinstimmen. Andernfalls ist die Darstellung der Vorschau fehlerhaft. |
Verwendung der Content Integration API
Die Content Integration API
ermöglicht die Salesforce-seitige Auswertung von Velocity-Fragmenten. Diese werden in den FirstSpirit-Vorlagen gepflegt und bei der Darstellung einer Seite in der Vorschau ersetzt. Dafür nimmt der Preview Filter die Ergebnisse der Salesforce-seitigen Auswertung entgegen und fügt sie an den entsprechenden Stellen in der Seite ein. Um dem Preview Filter diesen Schritt zu ermöglichen, müssen die Velocity-Fragmente ebenfalls durch eindeutige HTML-Kommentare gekennzeichnet sein. Sie bestehen aus einem Start- sowie End-Kommentar und besitzen das unveränderbare Format <!-- CMS-VELOCITY-<IDENTIFIER>-START -->
bzw. <!-- CMS-VELOCITY-<IDENTIFIER>-END -->
.
Ersetzungen durch Regex-Ausdrücke
Sind darüber hinaus weitere Ersetzungen gewünscht, können spezifische Regex-Ausdrücke definiert werden. Diese besitzen eine eigene Syntax und weisen immer die folgende Form auf:
<!-- CMS-REGEX-PATTERN-START -->
regex-match="<REGEX>"
regex-value="<REPLACEMENT>"
<!-- CMS-REGEX-PATTERN-END -->
Während der Ausdruck regex-match
die Regex speichert, entspricht der Ausdruck regex-value
dem Inhalt, durch den alle Regex-Matches im Dokument ersetzt werden. Beide Ausdrücke sind durch die HTML-Kommentare <!-- CMS-REGEX-PATTERN-START -
-> und <!-- CMS-REGEX-PATTERN-END -->
zu einer Anweisung zusammenzufassen.
Im Referenzprojekt wird auf diesem Weg beispielsweise in der Formatvorlage Preview Generation weiteres CSS in jede Seitenvorlage integriert oder jeglicher Link auf die Homepage ersetzt:
$-- Set Bootstrap CSS--$
<!-- CMS-REGEX-PATTERN-START -->
regex-match="<\/head>"
regex-value="$CMS_IF(#global.is("PREVIEW"))$$CMS_RENDER(template: "preview_css_additions")$$CMS_END_IF$</head>"
<!-- CMS-REGEX-PATTERN-END -->
$-- Change Homepage Reference --$
<!-- CMS-REGEX-PATTERN-START -->
regex-match="href=("|').*.home[?]"
regex-value="href="$CMS_REF(pageref:"homepage")$""
<!-- CMS-REGEX-PATTERN-END -->
Wird innerhalb der eingesetzten Regex ein convert2 verwendet, ist darauf zu achten, dass alle Sonderzeichen richtig aufgelöst werden. Insbesondere im Zusammenhang mit dem Dollarzeichen ist möglicherweise eine Anpassung der Konvertierungsregel notwendig ( |
Zu beachten ist, dass die Ersetzung der URL von der neuen Storefront URL abhängig ist. Die Einstellungen dafür sind unter dem Menüpunkt |
ContentConnect Preview Language
Um die Anzeigesprache im ContentCreator anzupassen, wird das folgende Pattern im HTML-Ausgabekanal benötigt:
$-- Set Preview Language --$
<!-- CMS-PARAM-PREVIEWLANG-START -->
$CMS_VALUE(set_previewLang)$
<!-- CMS-PARAM-PREVIEWLANG-END -->
Innerhalb des Patterns ist ein Sprachkürzel anzugeben, dessen Form im Abschnitt Ermittlung der Locale näher erläutert wird. Findet der Preview Filter dieses Pattern nicht, wird der Wert default
für die Vorschausprache verwendet.
ContentConnect Preview Proxy
Treten bei der Vorschau Probleme mit Cross-Origin Requests aufgrund der Same-Origin Policy moderner Webserver auf, so können diese durch den Einsatz des im ContentConnect-Modul enthaltenen Preview Proxys behoben werden.
Im mitgelieferten Referenzprojekt ist dies beispielsweise beim Laden der Font Awesome Schriftart über eine eingebundene CSS-Datei der Fall. Ohne Verwendung des Preview Proxys wird beim Laden der Schriftart ein Cross-Origin Request ausgeführt, der durch die Same-Origin Policy blockiert wird.
Um das Laden der betroffenen Ressourcen über den Preview Proxy zu leiten und somit Cross-Origin Requests zu vermeiden, enthält die Formatvorlage Preview Generation den nachfolgenden Regex-Ausdruck. Eine Konfigurationsanpassung des ausliefernden Webservers ist dabei nicht notwendig.
Soll für den Preview Proxy nicht der vorkonfigurierte URL-Pfad |
$-- Redirect to proxy --$
<!-- CMS-REGEX-PATTERN-START -->
regex-match="[^"'(]*?\/on\/demandware\.static\/"
$CMS_IF(#global.is("WEBEDIT"))$
regex-value="/fs5webedit_$CMS_VALUE(#global.project.id)$/proxy/on/demandware.static/"
$CMS_ELSE$
regex-value="/fs5preview_$CMS_VALUE(#global.project.id)$/proxy/on/demandware.static/"
$CMS_END_IF$
<!-- CMS-REGEX-PATTERN-END -->
Fehlersuche
ContentConnect unterstützt Entwickler bei der Analyse von Problemen und Fehlern in der Vorschau, wie zum Beispiel fehlerhafte Ersetzungen oder schlechte Antwortzeiten bei der Vorschaugenerierung.
Entwickler können die URL einer Vorschauseite mit speziellen Parametern erweitern, um die Funktionsweise des Preview Filters zu beeinflussen und somit einige hilfreiche Informationen zu erhalten. Die zur Verfügung stehenden URL-Erweiterungen sind /debugTimings=true
und /debugCCFilter=true
.
Über /debugTimings=true
wird der Preview Filter angewiesen, die Ausführungszeiten seiner Verarbeitungsschritte als Kommentar ans Ende des HTML-Dokuments zu schreiben. Dazu misst er die Dauer der folgenden Aktionen:
-
Suche der zu ersetzenden Inhalte
-
Ersetzung von Slots durch die aktuellen redaktionellen Inhalte
-
Ausführung eigener Ersetzungen über spezifische Regex-Ausdrücke
-
Vollständige Verarbeitung der Seite
Bei der Angabe dieses Parameters erzeugt der Preview Filter für die Homepage des Referenzprojektes folgende Ausgabe:
<!--
*** TIMING STATS ***
LANGUAGE-DROPDOWN = 0ms
<script [^<]*?/dwux-init.js.*?</script> = 0ms
[^"'(]*/s/SiteGenesisGlobal_MF_SP/[^"')]* = 53ms
Scanning for content replacement blocks = 1ms
CUSTOM-NAVIGATION-LEFT = 0ms
[^"'(]*?/on/demandware.static/ = 113ms
(<!-- dw.+?-->) = 1ms
<iframe.*?id="DW-SFToolkit">.*?</iframe> = 1ms
LANGUAGE-DROPDOWN-MOBILE = 0ms
<a.*?sid="([^"]*?)" = 1ms
</head> = 0ms
WILL-IGNORE-FOR-PREVIEW = 0ms
HOME-CATEGORIES = 0ms
href=("|').*.home[?] = 1ms
<!-- Demandware Analytics(([sS]*)</script>) = 1ms
<!-- Demandware Active Data (([sS]*)</script>) = 0ms
HOME-MAIN = 0ms
HOME-CC-OVERRIDE = 0ms
Total time = 172ms
-->
Des Weiteren protokolliert der Preview Filter bei der Angabe des Parameters /debugTimings=true
einige Informationen im FirstSpirit-Server-Log.
Durch /debugCCFilter=true
verzichtet der Preview Filter darauf den Storefront herunterzuladen, Ersetzungen durchzuführen und das Ergebnis in der Vorschau zu präsentieren. Stattdessen wird die tatsächlich von FirstSpirit generierte Seite in der Vorschau angezeigt. Neben den redaktionallen Inhalten sind im HTML deshalb auch die Ersetzungskommentare und -spezifikationen enthalten. Im Falle der Homepage des Referenzprojektes erzeugt der Preview Filter bei der Angabe dieses Parameters deshalb folgende (gekürzte) Ausgabe:
<!-- CMS-HOME-MAIN-START -->
[...]
<!-- CMS-HOME-MAIN-END -->
<!-- CMS-HOME-CATEGORIES-START -->
[...]
<!-- CMS-HOME-CATEGORIES-END -->
[...]
<!-- CMS-REGEX-PATTERN-START -->
regex-match="href=("|').*.home[?]"
regex-value="href="/fs5webedit_90169/s=qgkM/preview/90169/site/EN_GB/current/90172/90361""
<!-- CMS-REGEX-PATTERN-END -->
[...]
Die Nutzung dieser Funktionen erfordert den Aufruf einer Vorschauseite, deren Adresse um einen der vorgestellten Parameter ergänzt wurde. Dies kann auf verschiedene Weisen erfolgen:
-
Über die Adresse des iFrames im ContentCreator
-
Über die Adresse einer Seite in der externen Vorschau
-
Über generierte Verweise in der FirstSpirit-Vorschau, wie hier am Beispiel von Links auf die Homepage:
<!-- CMS-REGEX-PATTERN-START -->
regex-match="href=("|').*.home[?]"
regex-value="href="$CMS_REF(pageref:"homepage")$/debugCCFilter=true""
<!-- CMS-REGEX-PATTERN-END -->
Aufgrund ihrer Funktionen können die Parameter |
5.2. Generierung
Zur Veröffentlichung von redaktionellen Inhalten generiert FirstSpirit zwei XML-Dateien, die Content Assets und Slot-Konfigurationen enthalten und an die Commerce Cloud übertragen werden. Der entsprechende Generierungs- und Deployment-Auftrag wurde bereits beschrieben. Dabei wurde auch darauf eingegangen, dass Vorlagen in ihren Ausgabekanälen XML-Kollektoren mit Inhalten (Content Assets) und Slot-Konfigurationen befüllen. Die Initialisierung dieser Kollektoren findet in den Projekteinstellungen statt. Es gilt, dass alle zu veröffentlichen Inhalte und Konfigurationen in die XML-Kollektoren geschrieben werden müssen. Andernfalls werden sie nicht übertragen.
Allgemein wird für jeden Absatz ein Asset und eine Slot-Konfiguration erzeugt, wodurch eine Personalisierung auf Absatzebene ermöglicht wird. Eine Ausnahme stellen lediglich Inhaltsseiten dar, für die insgesamt genau ein Content Asset und eine Slot-Konfiguration entsteht.
Dieses Kapitel erläutert, wie die Inhalte und Konfigurationen des Projektes gesammelt und die XML-Dateien generiert werden.
5.2.1. Content Assets
Die Befüllung des XML-Kollektors für Content Assets geschieht durch die folgenden Schritte:
Erzeugung einer Content Asset ID anhand einer projektweiten Konvention
Die ID eines Content Assets setzt sich im Referenzprojekt aus einem projektweiten Präfix, der ID der generierten Seitenreferenz sowie der ID des Absatzes zusammen. Diese Komponenten werden durch einen Bindestrich voneinander getrennt und etwaige Unterstriche durch Bindestriche ersetzt.
Im Falle einer Inhaltsseite setzt sich die ContentAsset-ID lediglich aus dem Präfix und der ID der Seitenreferenz zusammen. |
$CMS_SET(set_xml_id, ps_dwAssetIdPrefix + "-" + #global.node.uid + "-" + #global.section.id)$
$CMS_SET(set_xml_id, set_xml_id.replaceAll("_","-"))$
Anlegen eines neuen Content Assets im XML-Kollektor
Nach der Ermittlung der ID wird im XML-Kollektor über die Methode useOrCreateContentNode
ein neues Content Asset angelegt. Dieses Asset muss während der Vollgenerierung mit den Inhalten aller generierter Sprachen befüllt werden. Deshalb erzeugt useOrCreateContentNode
nur dann ein neues Asset, wenn noch keines mit der gegeben ID existiert. Alle folgenden Methodenaufrufe auf dem XML-Kollektor agieren dann auf diesem Asset.
$CMS_SET(void, ps_xmlCollector.useOrCreateContentNode(set_xml_id))$
Bei der Erstellung eines neuen Content Assets wird automatisch das Custom-Attribute fsGenerationTime
mit dem aktuellen Zeitstempel der Generierung hinzugefügt. Dies ist notwendig, damit die Content Bereinigung nach dem Deployment nur obsolete Content Assets aus der Commerce Cloud löscht.
Der Wert dieses Attributs darf anschließend nicht manuell verändert werden. |
Ermittlung der Locale
Einige der folgenden Operationen benötigen die Angabe einer Locale der Commerce Cloud. Die Formatvorlage language_mapping bildet dazu eine FirstSpirit-Sprache auf eine solche Locale ab und wird deshalb in jeder Seite eingebunden. In ihr werden zwei Variablen im Kontext der Seite erzeugt: set_previewLang
und set_xml_lang
. Erstere wird zur Generierung der Vorschau verwendet und hat die Form <language_COUNTRY>
. Ein möglicher Wert ist zum Beispiel fr_FR
. Auf diesen Aspekt der Vorlage geht auch das Kapitel Homepage weiter ein.
Auf die Variable set_xml_lang
wird während der Befüllung der Content Assets zurückgegriffen. Im Falle der Mastersprache ist ihr Wert x-default
, in allen anderen Fällen übernimmt sie den Wert von set_previewLang
, ersetzt den Unterstrich allerdings durch einen Bindestrich.
Da beide Variablen im Kontext der generierten Seite gesetzt werden, sind sie in allen Absätzen der Seite verfügbar und können deshalb sowohl für die Vorschauerzeugung als auch für die Befüllung der XML-Kollektoren herangezogen werden.
Die Eigenschaft display-name setzen
Für jede Sprache entspricht der Anzeigename der generierten Seitenreferenz dem Anzeigenamen des zugehörigen Content Assets, der während der Generierung über die Methode addContentAttribute
gesetzt wird. Hierzu wird die oben beschriebene Variable set_xml_lang
vorausgesetzt.
$CMS_SET(void, ps_xmlCollector.addContentAttribute({
"name":"display-name",
"value":#global.node.getDisplayName(#global.language).toString(),
"attributes":{
"xml:lang":set_xml_lang
}
}))$
Die Eigenschaft searchable-flag auf true setzen
Das Content Asset soll in den Suchindex der Commerce Cloud aufgenommen werden, weshalb das Attribut searchable-flag
auf true
gesetzt wird.
$CMS_SET(void, ps_xmlCollector.addContentAttribute({
"name":"searchable-flag",
"value":"true"
}))$
Die Eigenschaft online-flag auf true setzen
Das Asset soll außerdem im Shop verfügbar sein, weshalb auch das Attribut online-flag
auf true
gesetzt wird.
$CMS_SET(void, ps_xmlCollector.addContentAttribute({
"name":"online-flag",
"value":"true"
}))$
Die Eigenschaft body setzen
Die redaktionellen Inhalte aus FirstSpirit werden im Custom Attribute body
gespeichert. Dazu wird im Referenzprojekt zunächst die Variable set_xml_body
erstellt und in ihr die gerenderten Inhalte abgelegt. Anschließend wird sie dem XML-Kollektor übergeben. Der Kollektor bettet die Inhalte automatisch in einen CDATA-Abschnitt, sodass keine besondere Vorbereitung notwendig ist. Da die Inhalte sprachabhängig sind, wird auch in diesem Schritt die Locale in set_xml_lang
genutzt.
$CMS_SET(void, ps_xmlCollector.addCustomAttribute({
"id":"body",
"cdata":set_xml_body.toString(),
"attributes":{
"xml:lang":set_xml_lang
}
}))$
Ordner
Die Commerce Cloud erlaubt die Angabe eines Library Folders, in dem sie ein Content Asset ablegen soll. Der XML-Kollektor bietet zu diesem Zweck die Methode addFolderAttribute
, die die ID eines solchen Ordners entgegen nimmt. Im Referenzprojekt wird der Ordner aller Content Assets einer Seite im Formular der Seite selbst festgehalten. Jede Seitenvorlage überträgt den Wert des entsprechenden Formularfeldes in die Variable set_parent_id
, die wiederum die Absätze bei der Erzeugung ihrer Assets nutzen.
$CMS_SET(void, ps_xmlCollector.addFolderAttribute({
"id":set_parent_id
}))$
Die so referenzierten Ordner müssen durch entsprechende Knoten in der generierten XML-Datei der Commerce Cloud bekannt gemacht werden, sodass sie fehlende Ordner anlegen kann. Diese Aufgabe übernimmt die Vorlage XML, die einen festen Satz an Ordnern generiert.
Ohne zusätzliche Maßnahmen können im Referenzprojekt nur die IDs dieser Ordner sicher während der Generierung von Content Assets genutzt werden, da FirstSpirit nur für genau diese Ordner sicherstellt, dass sie existieren. Aus diesem Grund sind im Referenzprojekt die entsprechenden Formularelemente in den Seitenvorlagen versteckt und mit Rückgriffswerten belegt. |
5.2.2. Slot-Konfigurationen
Die Befüllung des XML-Kollektors für Slot-Konfigurationen passiert in der Verweisvorlage Slot Configuration. Sowohl Seiten als auch Absätze geben die entsprechenden Formularelemente deshalb direkt über $CMS_VALUE$
-Aufrufe aus:
$CMS_IF(!st_slotConfig.isEmpty)$
$CMS_FOR(_slotConfig,st_slotConfig)$
$CMS_VALUE(_slotConfig)$
$CMS_END_FOR$
$CMS_END_IF$
Das XML für Slot-Konfigurationen wird in der Vorlage Slot Configuration manuell zusammengebaut und über die Methode addXml
in den passenden Kollektor geschrieben:
$CMS_SET(void, ps_xmlCollectorContentSlot.addXml(null, set_slotConfig.toString(), null))$
Wie beim Anlegen des Content Assets wird einer Slot-Konfiguration automatisch das Custom Attribute fsGenerationTime
mit dem aktuellen Zeitstempel der Generierung hinzugefügt. Dies ist notwendig, damit die Content Bereinigung nach dem Deployment nur obsolete Slot-Konfigurationen aus der Commerce Cloud löscht.
Der Wert dieses Attributs darf anschließend nicht manuell verändert werden. |
5.2.3. Erzeugung der XML-Dateien
Die generierten XML-Dateien basieren beide auf der Seitenvorlage XML, welche die gesammelten Inhalte und Slot-Konfigurationen aus den XML-Kollektoren liest. Der Deployment-Auftrag führt dazu drei Generierungen durch:
-
Eine Vollgenerierung zur Befüllung der XML-Kollektoren,
-
eine Teilgenerierung zum Schreiben der Content Assets in eine XML-Datei und
-
eine Teilgenerierung zum Schreiben der Slot-Konfigurationen in eine XML-Datei.
Die Vollgenerierung muss abgeschlossen sein, bevor FirstSpirit die XML-Dateien erzeugen kann, weshalb die Generierung der XML-Vorlage in diesem Schritt abgebrochen wird. Das geschieht anhand der Auftragsvariablen dwre_xmlGeneration
, die in der Vollgenerierung den Wert false
und in den beiden Teilgenerierungen den Wert true
hat.
Da beide Dateien auf derselben Vorlage basieren, ist ein Merkmal notwendig, um zu entscheiden, welcher XML-Kollektor ausgelesen wird. Dieses Merkmal ist das Formularfeld ps_importType
, welches die Werte content_library
und content_slot
annehmen kann.
Im Falle von content_library
wird zunächst ein fester Satz an Library-Foldern in den XML-Kollektor für Content Assets geschrieben. Anschließend wird die Methode getXml
auf diesem Kollektor ausgeführt und das Ergebnis - ein XML-Dokument - über einen $CMS_VALUE$
-Aufruf ausgegeben. Wenn ps_importType
den Wert content_slot
hat, wird getXml
stattdessen auf dem Kollektor für Slot-Konfigurationen aufgerufen und das Ergebnis ebenfalls ausgegeben.
Im Inhalte-Ordner ContentConnect Technical Pages
befinden sich zwei Seiten, die auf der Vorlage XML basieren: Shop Assets
, bei der ps_importType
den Wert content_library
hat, und Shop Slot Configurations
, bei der dieses Formularfeld auf content_slot
gesetzt ist. Diese Seiten sind die Grundlage der Seitenreferenzen Shop Assets
und Shop Slot Configurations
im Strukturordner ContentConnect Export Files
, auf denen jeweils eine Teilgenerierung ausgeführt wird.
5.3. Navigation
Die Hauptnavigation des Storefronts kann in FirstSpirit genutzt werden, um durch den Shop und die FirstSpirit-seitig gepflegten Inhalte zu navigieren. Außerdem kann sie um eigene Einträge erweitert werden.
5.3.1. Hauptnavigation
Die Navigation zwischen verschiedenen Kategorieseiten innerhalb der Vorschau erfolgt in erster Linie über das Hauptmenü (vgl. Abbildung Navigation). Das Hauptmenü ist Bestandteil des während der Vorschau vom Commerce Cloud Storefront heruntergeladenen HTMLs und somit durch die Commerce Cloud vorgegeben.
Redakteurssicht
Das Hauptmenü ermöglicht dem Redakteur den Wechsel zwischen Kategorieseiten. Existiert für eine angesteuerte Kategorieseite ein Äquivalent innerhalb von FirstSpirit, so wird der Inhalt dieser Seite dargestellt. Der Redakteur hat anschließend die Möglichkeit, den aus FirstSpirit stammenden Inhalt zu editieren. Existiert innerhalb von FirstSpirit kein Äquivalent zur angesteuerten Kategorieseite, wird hingegen der originale, aus der Commerce Cloud bezogene Inhalt ausgegeben.
Entwicklersicht
Um dem Redakteur im Falle einer in FirstSpirit existierenden Kategorieseite diese anzuzeigen, werden im Referenzprojekt zunächst über einen spezifischen Regex-Ausdruck Links auf Kategorieseiten auf eine sogenannte Dispatcher-Seite umgeleitet.
$-- Change Category Reference --$
<!-- CMS-REGEX-PATTERN-START -->
regex-match="<a.*?\sdata-cgid="([^"]*?)""
regex-value="<a href="$CMS_REF(pageref:"preview_dispatcher")$/forceRefresh=1?type=category&id=$1" id="$1""
<!-- CMS-REGEX-PATTERN-END -->
Dieser Regex-Ausdruck ist neben einigen anderen spezifischen Regex-Ausdrücken Teil der Formatvorlage Preview Generation.
Bei dem in diesem Ausdruck referenzierten Preview Dispatcher handelt es sich um eine technische Seite auf Basis der gleichnamigen Seitenvorlage. Der Preview Dispatcher iteriert durch Verwendung der FirstSpirit Navigationsfunktion über den Inhalt des Struktur-Ordners category_pages.
Dieser Struktur-Ordner enstspricht dem Ordner, der während der Konfiguration der Projekt-Komponente als Zielordner für das Anlegen neuer Kategorieseiten konfiguriert wurde. |
Dabei merkt sich der Preview Dispatcher für jede vorgefundene Seite die dazugehörige Kategorie zusammen mit einer entsprechenden Referenz auf die Seite. Somit kann er anschließend bei jedem Aufruf entscheiden, ob zu der angeforderten Kategorie eine Seite innerhalb von FirstSpirit existiert, und eine entsprechende Weiterleitung vornehmen.
Konnte zur einer angeforderten Kategorie keine in FirstSpirit angelegte Seite ermittelt werden, so erfolgt eine Weiterleitung auf eine generische Kategorie-Vorschauseite.
5.3.2. Erweiterung der Navigation
Die Hauptnavigation kann durch Redakteure erweitert werden. Neue Menüpunkte werden den vorhandenen vorangestellt.
Redakteurssicht
Zur Ergänzung eines Navigationspunktes reicht es aus, eine Inhaltsseite unterhalb des Menüpunktes Left Navigation
zu platzieren. Nachdem die Seite freigegeben und an die Commerce Cloud übertragen wurde, erscheint der neue Navigationspunkt im Storefront. Wie die Abbildung Beispiel für die Erweiterung der Hauptnavigation zeigt, können auch verschachtelte Menüstrukturen erstellt werden.
Die Verschachtelung von Menüstrukturen darf maximal 4 Ebenen tief sein. |
Entwicklersicht
Salesforce-seitig wurde über die mitgelieferte Vorlage menu.isml
der neue globale Slot menu-custom-left
eingeführt und mit den Kommentaren <!-- CMS-CUSTOM-NAVIGATION-LEFT-START -->
und <!-- CMS-CUSTOM-NAVIGATION-LEFT-END -->
umrahmt. Dieser Slot kann wie jeder andere mit FirstSpirit befüllt und in der Vorschau ersetzt werden. Ein Content Asset für diesen Slot enthält das HTML für alle Elemente, um die die Navigation ergänzt werden soll.
Dieses Markup wird in FirstSpirit in der Formatvorlage custom_navigation
erzeugt. Sie enthält eine Navigationsfunktion, die alle Seitenreferenzen im Ordner Left Navigation
sucht. Anschließend generiert sie sowohl für die Vorschau als auch für den Live-Stand das benötigte HTML für alle gefundenen Seiten. Dieses ist erforderlich, um die Seiten in die Hauptnavigation einzubinden. Für die Vorschau wird das Ergebnis außerdem mit den HTML-Kommentaren <!-- CMS-CUSTOM-NAVIGATION-LEFT-START -->
und <!-- CMS-CUSTOM-NAVIGATION-LEFT-END -->
umschlossen. In beiden Fällen gibt die Vorlage das HTML für die Navigation aus.
Damit diese Navigationsfunktion in der Vorschau genutzt wird, muss jede Seitenvorlage die Formatvorlage custom_navigation
über einen Aufruf der CMS_RENDER
-Funktion einbinden.
Zur Generierung eines Content Assets existiert die Seitenvorlage Left Navigation
sowie eine Seite und eine Seitenreferenz, die auf dieser Vorlage basieren. Die Seitenreferenz ist im Strukturordner Left Navigation
abgelegt. Die Seitenvorlage bindet wie oben beschrieben die Formatvorlage custom_navigation
ein und speichert den generierten Inhalt über den XML-Kollektor in einem Content Asset.
Anders als die anderen Seitenvorlagen sieht Left Navigation
keine Absätze vor. Die Pflege einer Slot-Konfiguration, die im Generierungsfall ausgegeben wird, muss daher in ihrem Formular erfolgen. Hierzu setzt die Seitenvorlage vor der Ausgabe zwei Variablen: Zum einen contentSlotId
, da es keinen Inhaltsbereich gibt, von dem eine Slot-Id abgeleitet werden könnte. Der Wert dieser Variablen ist menu-custom-left
, da der oben erwähnte neue Slot befüllt werden soll. Zum anderen contentSlotTemplate
, die auf den Wert des Formularfeldes pt_sfccTemplate
gesetzt wird. Der Rückgriffswert dieses Feldes ist slots/content/contentAssetBody.isml
. Ohne diese Variable würde die Vorlage für Slot-Konfigurationen versuchen, die ISML-Vorlage aus dem aktuellen Absatz abzuleiten.
Die Seitenreferenz |
5.4. Homepage
Die Homepage entspricht der Startseite des mitgelieferten Referenzprojekts und wird daher initial beim Öffnen des ContentCreators angezeigt. Da sich ihr Aufbau von dem der übrigen Inhaltsseiten unterscheidet, besitzt sie eine eigene Vorlage. Diese wird im Projekt nur ein einziges Mal referenziert.
Redakteurssicht
Die Homepage bietet dem Redakteur drei Möglichkeiten zur Inhaltspflege:
-
Der Kopfbereich der Seite zeigt ein Banner, in dem entweder ein statisches Bild oder ein Slider eingebunden werden kann.
-
Im Hauptbereich der Seite können:
-
bis zu fünf Produkte in Form eines Grid Containers angezeigt werden, der sieben verschiedene Optionen für ihre Anordnung zur Verfügung stellt.
-
beliebig viele Produkte in Form von Hot Spots auf einem statischen Bild verlinkt werden.
-
Die für die Inhaltspflege notwendigen Absätze werden in den entsprechenden Unterkapiteln näher erläutert.
Entwicklersicht
Die Homepage-Vorlage definiert hauptsächlich ihre Darstellung in der FirstSpirit-Vorschau, während die Generierung der Assets vorrangig in den eingebundenen Absätzen stattfindet. Dennoch werden sowohl im Formular als auch im HTML-Kanal einige Voraussetzungen für die Generierung geschaffen. Die Entwicklersicht muss daher beide Aspekte berücksichtigen.
Vorschau
Die Commerce Cloud unterstützt verschiedene Seitentypen. Für die Darstellung der redaktionellen Inhalte in der FirstSpirit-Vorschau bzw. im ContentCreator muss FirstSpirit die richtige Storefront-URL erzeugen, um die zugehörige Seite in der Commerce Cloud abfragen zu können.
Der für die FirstSpirit-Vorschau zu verwendende Seitentyp wird im Formularfeld Preview Page Type
definiert. Da für die Homepage nur der Parameter Home
existiert, ist er als Vorgabewert gewählt und die Eingabekomponente versteckt.
Für die Ermittlung der gewünschten Storefront-URL ist darüber hinaus sicherzustellen, dass die in FirstSpirit und in der Commerce Cloud genutzten Sprachkürzel aufeinander abgestimmt sind. Diese Aufgabe erfüllt die Formatvorlage language_mapping, die im HTML-Kanal eingebunden ist. Ohne übereinstimmende Sprachkürzel ist es FirstSpirit nicht möglich, die entsprechende Seite für die Vorschau zu ermitteln.
Die Ausgabe der für die Homepage gepflegten Absätze erfolgt innerhalb eindeutiger HTML-Kommentare. Diese bestehen immer aus einem Start- und einem End-Ausdruck und kennzeichnen die einzelnen Inhaltsbereiche. Anhand der Kommentare tauscht FirstSpirit die Slots in der Vorschau gegen redaktionelle Inhalte aus.
<!-- CMS-HOME-MAIN-START -->
$CMS_RENDER(template:"mpp_body_wrapper",body:"home_main_m")$
$CMS_RENDER(template:"empty_content_slot",label:"Home Main",body:"home_main")$
<!-- CMS-HOME-MAIN-END -->
<!-- CMS-HOME-CATEGORIES-START -->
$CMS_RENDER(template:"mpp_body_wrapper",body:"home_categories_m")$
$CMS_RENDER(template:"empty_content_slot",label:"Home Categories",body:"home_categories")$
<!-- CMS-HOME-CATEGORIES-END -->
<!-- CMS-HOME-CC-OVERRIDE-START -->
$CMS_RENDER(template: "cc_createsectionwe_api")$
<!-- CMS-HOME-CC-OVERRIDE-END -->
Besitzt ein Inhaltsbereich keine Absätze, stellt FirstSpirit stattdessen in der Vorschau einen grau hinterlegten Bereich dar (vgl. Abbildung Empty Slot). Dieser zeigt den Namen des Inhaltsbereichs an und besitzt einen Button, über den sich im ContentCreator neue Absätze erzeugen lassen. Die Anzeige des grauen Bereichs steuert die Formatvorlage empty_content_slot, während die Funktionalität des Buttons in der Formatvorlage cc_createsectionwe_api realisiert ist. Sie enthält JavaScript, das lediglich einmal in die Seite eingebunden werden darf.
Sind über den Austausch der Slots hinaus weitere Ersetzungen gewünscht, können spezifische Regex-Ausdrücke definiert werden. Diese besitzen eine eigene Syntax und sind in der Formatvorlage Preview Generation zusammengefasst. Sie steuert die Erzeugung der Vorschau und wird in allen Seitenvorlagen des Referenzprojekts referenziert.
Generierung
Die während der Generierung erzeugten Assets werden Salesforce-seitig in einer Ordnerstruktur abgelegt. Im Referenzprojekt ist daher für jede Seitenvorlage ein entsprechender Ordner definiert. Das Homepage-Formular besitzt dafür das versteckte Feld SFCC Parent Folder
, dessen Wert der Variable set_parent_id
zugewiesen wird. Ihre Auswertung erfolgt in den eingebundenen Absätzen.
$CMS_SET(set_parent_id,pt_sfcc_parentFolder)$
Eine weitere Voraussetzung für die Generierung der Assets ist, dass die entsprechende Seite in FirstSpirit als übersetzt markiert ist. Ist dies nicht der Fall, wird die Generierung abgebrochen.
$CMS_IF(!#global.preview && !#global.page.isTranslated)$
$CMS_SET(#global.stopGenerate, true)$
$CMS_END_IF$
5.5. Inhaltsseiten
Die Inhaltsseiten entsprechen den Standardseiten des Projekts und werden mehrfach referenziert. Sie nehmen im Gegensatz zur Homepage sowie zu den Kategorie- und Produktseiten eine besondere Rolle ein, da sie lediglich ein Asset für die gesamte Seite generieren. In diesem Asset werden alle redaktionellen Inhalte der Inhaltsseite und der ihr hinzugefügten Absätze zusammengefasst.
Redakteurssicht
Die Inhaltsseiten bieten dem Redakteur drei Möglichkeiten zur Inhaltspflege:
-
Der Kopfbereich der Seite zeigt ein Banner, in dem entweder ein statisches Bild oder ein Slider eingebunden werden kann.
-
Der Hauptbereich der Seite ermöglicht die Anzeige
Die für die Inhaltspflege notwendigen Absätze werden in den entsprechenden Unterkapiteln näher erläutert. Da der Text-Absatz selbsterklärend ist, wird er nicht einzeln beschrieben.
Entwicklersicht
Im Gegensatz zu den übrigen Seiten werden die redaktionellen Inhalte der Inhaltsseite und ihrer Absätze in einem einzigen Asset zusammengefasst. Die Erzeugung dieses Assets erfolgt im HTML-Kanal der Seitenvorlage, der zwischen der Darstellung der Seite in der FirstSpirit-Vorschau und im Live-Stand unterscheidet. Die Entwicklersicht muss daher beide Aspekte berücksichtigen.
Vorschau
Da die Erzeugung des Assets lediglich die Generierung beeinflusst, sind die beiden Entwicklersichten der Inhaltsseite und der Homepage in Bezug auf die FirstSpirit-Vorschau nahezu identisch.
Die einzige Divergenz zwischen beiden Vorlagen besteht in der Konfiguration des verwendeten Seitentyps, der für die Inhaltsseiten ebenfalls im versteckten Formularfeld Preview Page Type
definiert wird. Im Gegensatz zur Homepage kann er theoretisch unterschiedliche Werte annehmen. Für das vorliegende Referenzprojekt wird jedoch der Parameter Page
benötigt, der als Vorgabewert ausgewählt ist.
Des Weiteren besitzt die Inhaltsseite das versteckte Formularfeld SFCC Context ID
, in dem eine Default-ContentAsset-ID gespeichert ist. Da eine Seite vor der Generierung noch keine Asset-ID besitzt, wird sie für die Erzeugung der Vorschau benötigt.
Generierung
Für die Generierung muss im ersten Schritt sichergestellt werden, dass die entsprechende Seite in FirstSpirit als übersetzt markiert ist. Nur, wenn dies der Fall ist, wird die Generierung durchgeführt und das Asset für die Inhaltsseite erzeugt.
$CMS_IF(!#global.preview && !#global.page.isTranslated)$
$CMS_SET(#global.stopGenerate, true)$
$CMS_END_IF$
Dafür wird der Variablen set_parent_id
zunächst der Wert des versteckten Feldes SFCC Parent Folder
zugewiesen. Er gibt an, wo das erzeugte Asset Salesforce-seitig in dessen Ordnerstruktur abgelegt wird.
$CMS_SET(set_parent_id,pt_sfcc_parentFolder)$
Die Auswertung der Variablen erfolgt während der Befüllung des XML-Kollektors, die im Anschluss durchgeführt wird. Dabei wird ein neuer Content Node erzeugt, dem unter anderem die redaktionellen Inhalte der Seite hinzugefügt werden.
5.6. Login-Seite
Genauso wie die Homepage nimmt die Login-Seite eine Sonderrolle ein und unterscheidet sich daher von den übrigen Inhaltsseiten. Sie dient der Anmeldung im Shop und wird nur ein einziges Mal im Projekt referenziert.
Redakteurssicht
Die Login-Seite bietet dem Redakteur verschiedene Möglichkeiten zur Inhaltspflege:
-
Der Kopfbereich der Seite zeigt ein Banner, in dem entweder ein statisches Bild oder ein Slider eingebunden werden kann.
-
Dem oberen Teil des Hauptbereichs können Text Picture-Absätze hinzugefügt werden.
-
Der untere Teil des Hauptbereichs ermöglicht die Anzeige von:
Entwicklersicht
Da sowohl das Formular als auch der Inhalt des HTML-Kanals der Login-Seite und der Homepage weitgehend übereinstimmen, sind auch die Entwicklersichten nahezu identisch. An dieser Stelle wird daher nur die Divergenz beider Vorlagen beschrieben:
Der für die FirstSpirit-Vorschau zu verwendende Seitentyp wird auch für die Login-Seiten im versteckten Formularfeld Preview Page Type
definiert. Genauso wie bei den Kategorie- und Produkt-Detailseiten wird dafür an dieser Stelle der Wert Custom
benötigt. Er ermöglicht die Implementierung von Seitentypen, die nicht defaultmäßig durch den Preview Filter
abgedeckt sind, sowie die manuelle Spezifikation des einzusetzenden Controllers. Dieser ist über das versteckte Feld pt_storefrontUrlCustomController
anzugeben und besitzt für Login-Seiten den Vorgabewert Login-Show
, durch den die Storefront-URL erweitert wird.
Ebenso wie bei der Homepage muss für die Generierung sichergestellt werden, dass die Login-Seite in FirstSpirit als übersetzt markiert ist. Nur dann wird die Generierung durchgeführt und die zugehörigen Assets erzeugt.
5.7. Kategorie- und Produktseiten
Sowohl im SiteArchitect als auch im ContentCreator stellt das ContentConnect-Modul jeweils einen Report für Produkte und Kategorien bereit. Sie dienen der Darstellung der aus Commerce Cloud stammenden Kategorie- und Produktinformationen, die für die Erstellung und Pflege redaktioneller Inhalte verwendet werden können (vgl. Abbildung Reports).
Für die Darstellung des Kategorie-Reports muss in der Projekt-Komponente die Checkbox |
Über den entsprechenden Report können sowohl Kategorie- als auch Produktseiten angelegt werden. Dafür muss in der Projekt-Komponente definiert sein, auf welchen Vorlagen diese Seiten basieren und wo sie in der Struktur einzubinden sind.
In der jeweils gewählten Seitenvorlage ist zwingend das Feld
|
Ein Objekt im Report kann bezüglich seiner Kategorie- bzw. Produktseite einen von drei Zuständen besitzen:
-
Es ist keine Kategorie- oder Produktseite vorhanden und sie kann daher angelegt werden.
-
Es ist bereits eine Kategorie- oder Produktseite vorhanden, die aufgerufen werden kann.
-
Es ist bereits eine Kategorie- oder Produktseite vorhanden, für die jedoch entweder die Seitenreferenz oder die Seite nicht gefunden werden kann.
Die drei Fälle werden unterschiedlich visualisiert und nachfolgend beschrieben.
Da die Objekte im Report nicht permanent aktualisiert werden, kann es zu Abweichungen in der Visualisierung kommen. |
Anlegen einer Kategorie- oder Produktseite
Objekte, die noch keine Kategorie- bzw. Produktseite besitzen, werden im Report durch ein graues Icon markiert (vgl. Abbildung Anlegen einer Kategorie- bzw. Produktseite). Wurde in der Projekt-Komponente eine Seitenvorlage definiert, erscheint beim Überfahren eines solchen Objekts die Schaltfläche .
Auf Kategorie-Landingpages, Kategorie-Detailseiten und Produkt-Detailseiten, die über die Navigation zu erreichen sind, wird außerdem ein Button in der FirstSpirit-Vorschau angezeigt. Er besitzt dieselbe Funktionaliät wie die Schaltfläche im Report und ist nur dann sichtbar, wenn im FirstSpirit-Projekt keine zugehörige Kategorie-Landingpage, Kategorie-Detailseite oder Produkt-Detailseite existiert.
Abbildung 26. Anlegen einer Kategorie-Landingpage, Kategorie-Detailseite oder Produkt-Detailseite
|
Per Klick auf die Schaltfläche im Report oder auf den Button einer Hauptkategorie-Seite öffnet sich ein zweigeteilter Dialog, mit dem sich für das entsprechende Objekt eine Seite anlegen lässt.
Der obere Teil des Dialogs ist der Struktur-Auswahl-Bereich
, der automatisch eingefügt wird und damit immer gleich ist. Er stellt dem Redakteur die Möglichkeit zur Verfügung, innerhalb der Struktur die Menüebene auszuwählen, in der die neue Seite erzeugt wird. Potentiell ist die entsprechende Eingabekomponente schon vorbelegt. Dann wurde im Konfigurationsdialog der Projekt-Komponente bereits ein Struktur-Ordner definiert. Es steht dem Redakteur jedoch frei, diese Auswahl anzupassen.
Unter Umständen ist der |
Im Gegensatz zum Struktur-Auswahl-Bereich
ist der untere Formular-Bereich
immer projektspezifisch. Er zeigt das Formular der in der Projekt-Komponente angegebenen Seitenvorlage. In ihm gelten außerdem die in der Vorlage definierten Regeln.
Innerhalb des Referenzprojekts werden die Formularfelder der Kategorie- bzw. Produktseiten automatisch befüllt oder besitzen entsprechende Vorgabewerte. Des Weiteren wurde in der Projekt-Komponente jeweils ein Struktur-Ordner vorderfiniert, der durch den Redakteur nicht änderbar ist. Sowohl für den Struktur-Auswahl-Bereich als auch für den Formular-Bereich besteht somit keine Notwendigkeit für Eingaben durch den Redakteur. Aus diesem Grund wird der Dialog nicht angezeigt. |
Die folgende Abbildung zeigt einen beispielhaften Dialog:
Ein Klick auf Anlegen erzeugt die Seitenreferenz der Kategorie- bzw. Produktseite in der zuvor gewählten Menüebene. Die zugehörige Seite wird in einem festem Ordner in der Inhalteverwaltung erstellt. Innerhalb dieses Ordners wird anhand von Unterordnern nochmals nach Kategorie- und Produktseiten unterschieden. Die Namen der erzeugten Seitenreferenzen und Seiten folgen dem Schema Produkt ID (Produktname)
bzw. Kategorie ID (Kategoriename)
.
Ist innerhalb der Projekt-Komponente außerdem ein Skript angegeben, so wird dieses üblicherweise vor und nach der Erzeugung der Kategorie- bzw. Produktseite ausgeführt. Das im mitgelieferten Referenzprojekt enthaltene Skript create_sfcc_item_wizard besitzt jedoch eine entsprechende Abfrage, aufgrund welcher es nur im Anschluss an die Erzeugung der Seite angestoßen wird. Es markiert die jeweils erzeugte Kategorie- bzw. Produktseite für alle Sprachen als übersetzt und speichert ihre Storefront-ID im Formular.
Es ist zu beachten, dass nur der Code aus dem HTML-Kanal des Skripts ausgeführt wird. |
Diesem Skript werden die folgenden Parameter übergeben:
Datentyp | Objektname | Beschreibung |
---|---|---|
BaseContext |
context |
Der Kontext, in dem das Skript ausgeführt wird. |
boolean |
beforeInstantiation |
|
KeyProvider |
keyProvider |
Das Objekt, für das eine Kategorie- oder Produktseite angelegt wird. Hierbei handelt es sich entweder um ein |
Eine Erläuterung der Schnittstellen |
Nach der vollständigen Erzeugung der Kategorie- bzw. Produktseite und dem Ausführen des Skriptes wird die neu erstellte Seite automatisch aufgerufen.
Aufruf einer vorhandenen Kategorie- bzw. Produktseite
Objekte, für die bereits eine Kategorie- bzw. Produktseite existiert, werden im Report durch ein grünes Icon markiert (vgl. Abbildung Produkt mit Produktseite). Sie erhalten beim Überfahren die Schaltfläche , mit der die zugehörige Kategorie- oder Produktseite aufgerufen werden kann.
Defekte Referenz auf eine Kategorie- bzw. Produktseite
Besitzt ein Objekt eine Kategorie- oder Produktseite, für die jedoch die Seitenreferenz oder die zugrunde liegende Seite nicht gefunden werden kann, so wird das Objekt im Report mit einem roten Icon markiert (vgl. Abbildung Objekt mit Defekt). Solche Objekte erhalten beim Überfahren die Schaltfläche . Ein Klick auf diese Schaltfläche öffnet einen Dialog, der weitere Informationen bereit hält.
Die in diesem Kapitel beschriebene Kennzeichnung vorhandener, defekter und nicht vorhandener Referenzen auf Kategorieseiten gilt ebenso für versteckte Kategorien. |
5.7.1. Kategorie-Landingpages
Die Kategorie-Landingpages dienen der Darstellung der aus der Commerce Cloud stammenden Produkte und bieten eine Übersicht über alle einer ausgewählten Hauptkategorie zugehörigen Produkte. Die Zusammenstellung der Produkte sowie die Anzeige der Produktinformationen erfolgt automatisch und ist nicht durch den FirstSpirit-Redakteur beeinflussbar.
Redakteurssicht
Die Kategorie-Landingpage bietet einem Redakteur unterschiedliche Möglichkeiten zur Inhaltspflege:
-
Der Kopfbereich der Seite zeigt ein Banner, in dem ein statisches Bild eingebunden werden kann.
-
Der Hauptbereich besitzt zwei Inhaltsbereiche, in denen jeweils die Verwendung:
-
eines Grid Containers,
-
eines Videos oder
-
eines Textes mit einer Überschrift
-
erlaubt ist.
Entwicklersicht
Da sowohl das Formular als auch der Inhalt des HTML-Kanals der Kategorie-Landingpage und der Homepage weitgehend übereinstimmen, sind auch die beiden Entwicklersichten nahezu identisch. An dieser Stelle wird daher nur die Divergenz beider Vorlagen beschrieben:
Der für die FirstSpirit-Vorschau zu verwendende Seitentyp wird auch für die Kategorie-Landingpages im versteckten Formularfeld Preview Page Type
definiert. Im Gegensatz zur Homepage kann er theoretisch unterschiedliche Werte annehmen. Für das vorliegende Referenzprojekt wird jedoch lediglich der Parameter Search
benötigt, der als Vorgabewert ausgewählt ist.
Darüber hinaus besitzt das Formular das Feld SFCC Context ID
. Die SFCC Context ID
entspricht der Kategorie-ID aus dem Storefront. Ist das Feld leer, existiert keine im FirstSpirit-Projekt gepflegte Kategorie-Landingpage und die Vorschau zeigt die entsprechende Storefront-Seite. Ihr wird über die Formatvorlage Create Page ein Button zur Erstellung einer Kategorie-Landingpage hinzugefügt, der dieselbe Funktionalität hat wie die Schaltfläche im Report. Bei der Erzeugung einer Kategorie-Landingpage wird die Kategorie-ID automatisch im zugehörigen Formularfeld gespeichert.
Sie wird von der Formatvorlage Preview Generation für die Bereitstellung der Vorschau aller Seiten benötigt. Sie erwartet für jede Seite deren Kategorie-ID in Form der Variablen SFCC Context ID
, die daher in jeder Seitenvorlage - mit Ausnahme der Homepage - enthalten sein muss. Ist das zugehörige Formularfeld leer oder die entsprechende Seite in FirstSpirit nicht als übersetzt markiert, wird die Generierung abgebrochen.
$CMS_IF(!#global.preview && !#global.page.isTranslated || pt_storefrontUrlContextId.isEmpty)$
$CMS_SET(#global.stopGenerate, true)$
$CMS_END_IF$
Wie oben geschildert, enthält das Formular der Kategorie-Landingpages keine Elemente, die vom Redakteur zu befüllen sind. Beim Anlegen einer solchen Seite wird deshalb kein Dialog angezeigt. Falls ein Formular ausschließlich Elemente besitzt, bei denen das Attribut hidden
den Wert yes
besitzt, entscheidet das ContentConnect-Modul selbstständig, dass das Formular nicht angezeigt werden muss. Im Referenzprojekt enthält das Formular der Kategorie-Landingpages allerdings einen FS_BUTTON
, der nur dynamisch im ContentCreator über eine Regel ausgeblendet wird. Diese Schaltfläche soll in beiden Clients nicht dazu führen, dass beim Anlegen einer Kategorie-Landingpage der Dialog angezeigt wird. Deshalb wurden dem Formular die folgenden Elemente hinzugefügt:
<CMS_INPUT_TOGGLE name="pt_hideNewPageDialogCC" hFill="yes" hidden="yes" singleLine="no">
<LANGINFOS>
<LANGINFO
lang="*"
label="Hide New Page Dialog in ContentCreator"
description="Hide the dialog in the ContentCreator when creating a new landing page."
/>
</LANGINFOS>
</CMS_INPUT_TOGGLE>
<CMS_INPUT_TOGGLE name="pt_hideNewPageDialogSA" hFill="yes" hidden="yes" singleLine="no">
<LANGINFOS>
<LANGINFO
lang="*"
label="Hide New Page Dialog in SiteArchitect"
description="Hide the dialog in the SiteArchitect when creating a new landing page."
/>
</LANGINFOS>
</CMS_INPUT_TOGGLE>
Mit ihnen wird das ContentConnect-Modul explizit angewiesen, den Dialog weder im ContentCreator noch im SiteArchitect anzuzeigen. Ihre Rückgriffswerte sind deshalb true
.
5.7.2. Kategorie-Detailseiten
Die Kategorie-Detailseiten dienen ebenso wie die Kategorie-Landingpages der Darstellung der aus der Commerce Cloud stammenden Produkte. Im Gegensatz zu ihnen bieten sie jedoch eine Übersicht über alle einer Unterkategorie zugehörigen Produkte. Die Zusammenstellung der Produkte sowie die Anzeige der Produktinformationen erfolgt automatisch und ist nicht durch den FirstSpirit-Redakteur beeinflussbar.
Redakteurssicht
Die Kategorie-Detailseite erlaubt es einem Redakteur lediglich, im Kopfbereich der Seite ein statisches Bild einzubinden. Darüber hinaus besitzt er keine Möglichkeiten zur Inhaltspflege.
Entwicklersicht
Im Gegensatz zu den übrigen Seiten, die dem Slot-basierten Ansatz folgen, setzen sowohl die Produkt- als auch die Kategorie-Detailseiten die Content Integration API (CI API)
ein. Diese ermöglicht die Salesforce-seitige Auswertung von Velocity-Fragmenten, die innerhalb der FirstSpirit-Vorlage gepflegt werden.
Für die Verwendung der CI API
ist innerhalb des Referenzprojekts im Formular der Seitenvorlage das versteckte Toggle Use velocity rendering
aktiviert und im Formularfeld Preview Page Type
der Parameter Custom
definiert. Zusätzlich ist im Formularfeld Velocity rendering controller appendix
der Wert Content-Render
eingetragen. Er definiert den Aufruf des Controllers Content
, der in der Cartridge int_espirit_sfra
mitgeliefert wird und Salesforce-seitig das Velocity Rendering übernimmt. Bei der Verwendung eines eigenen Controllers ist dieser Wert entsprechend anzupassen.
Die Möglichkeit, einen individuellen Page Type zu definieren, ist im Kapitel über die Login Seite genauer beschrieben. |
Als weiterer Gegensatz zu den übrigen Seiten generieren die Kategorie-Detailseiten genauso wie die Inhaltsseiten lediglich ein einziges Asset. Die Erzeugung dieses Assets erfolgt im HTML-Kanal der Seitenvorlage, der zwischen der Darstellung der Seite in der FirstSpirit-Vorschau und im Live-Stand unterscheidet. Die Entwicklersicht muss daher sowohl die Vorschau als auch die Generierung und den Live-Stand berücksichtigen.
Vorschau
Mithilfe der Velocity-Fragmente lassen sich Salesforce-Widgets, die durch den Controller Common
bereitgestellt werden, in eine Seite einfügen. Die Integration erfolgt durch die $include.widget()
-Funktion, die im Controller Content
definiert ist. Ihr muss jeweils das gewünschte Widget als Parameter übergeben werden.
Das nachfolgende Code-Beispiel zeigt die Einbindung des Salesforce-PageHeaders in der Kategorie-Detailseite:
<!-- CMS-VELOCITY-PAGE_HEADER-START -->
$include.widget('Common-PageHeader')
<!-- CMS-VELOCITY-PAGE_HEADER-END -->
Zusätzlich zu den allgemeinen Widgets integriert der Controller CategorySearchResult
spezifische Daten in die Kategorie-Detailseite: Im Vorschaufall ermittelt er anhand der Kategorie-ID der ausgewählten Unterkategorie die zugehörigen Produkte und stellt diese anschließend in der Vorschau dar. Im Live-Stand stehen diese Daten bereits zur Verfügung und können über die Variable $categorySearchResult
verwendet werden.
<!-- CMS-VELOCITY-SEARCH_RESULT-START -->
$CMS_IF(#global.preview)$
$include.widget('CategorySearchResult-Show', 'cgid', '$CMS_VALUE(pt_storefrontUrlContextId)$')
$CMS_ELSE$
$categorySearchResult
$CMS_END_IF$
[...]
<!-- CMS-VELOCITY-SEARCH_RESULT-END -->
Generierung
Für die Generierung muss im ersten Schritt sichergestellt werden, dass die entsprechende Seite in FirstSpirit als übersetzt markiert und das Feld SFCC Context ID
gefüllt ist. Die SFCC Context ID
entspricht der Kategorie-ID aus dem Storefront. Sie wird bei der Erzeugung einer Kategorie-Detailseite über den Report automatisch im zugehörigen Formularfeld gespeichert. Nur, wenn das Formularfeld gefüllt und die entsprechende Seite in FirstSpirit als übersetzt markiert ist, wird die Generierung durchgeführt und das Asset für die Kategorie-Detailseite erzeugt.
$CMS_IF(!#global.preview && !#global.page.isTranslated || pt_storefrontUrlContextId.isEmpty)$
$CMS_SET(#global.stopGenerate, true)$
$CMS_END_IF$
Im nächsten Schritt wird der redaktionelle Inhalt in der Variablen set_pageContent
gespeichert und der Variablen set_parent_id
der Wert des versteckten Feldes SFCC Parent Folder
zugewiesen. Er gibt an, wo das erzeugte Asset Salesforce-seitig in dessen Ordnerstruktur abgelegt wird.
$CMS_SET(set_parent_id,pt_dwre_parentFolder)$
Die Auswertung beider Variablen erfolgt während der Befüllung des XML-Kollektors, die im Anschluss durchgeführt wird. Dabei wird ein neuer Content Node erzeugt, dem unter anderem die redaktionellen Inhalte der Seite hinzugefügt werden.
Live-Stand
Für Unterkategorien existiert Salesforce-seitig bereits standardmäßig eine Kategorie-Detailseite, die für den Live-Stand verwendet wird. Die Anzeige steuert der Search-Controller, der für die Berücksichtigung der FirstSpirit-seitig erzeugten Assets erweitert wurde. Durch die Erweiterung prüft er anhand einer ihm übergebenen Kategorie-ID zunächst, ob eine mit FirstSpirit erzeugte Kategorie-Detailseite vorhanden ist. Im positiven Fall wird diese im Live-Stand mit der Velocity-Engine gerendert. Andernfalls wird die Standardseite aus Salesforce dargestellt.
5.7.3. Produkt-Detailseiten
Ebenso wie die Kategorieseiten dienen die Produktseiten der Darstellung der aus der Commerce Cloud stammenden Produkte. Im Gegensatz zu ihnen zeigen sie jedoch keine Übersicht mehrerer Produkte, sondern bieten die Detailansicht eines einzelnen Produkts. Die Produktinformationen stammen aus der Commerce Cloud und sind durch den FirstSpirit-Redakteur nicht editierbar, können von ihm jedoch ein- und ausgeblendet werden.
Redakteurssicht
Die Produkt-Detailseiten bieten dem Redakteur verschiedene Möglichkeiten zur Inhaltspflege:
-
Das Formular der Seite besitzt diverse Eingabekomponenten
-
zur Definition eines Promotion-Textes. Dieser darf maximal 1024 Zeichen umfassen.
-
zur Ein- bzw. Ausblendung der Produktinformationen.
-
-
Der Kopfbereich der Seite zeigt ein Banner, in dem ein statisches Bild eingebunden werden kann.
-
Der Hauptbereich der Seite ermöglicht die Anzeige
-
von Product Tiles.
-
eines Videos.
-
eines Textes mit einer Überschrift.
-
Die für die Inhaltspflege notwendigen Absätze werden in den entsprechenden Unterkapiteln näher erläutert. Da der Text-Absatz selbsterklärend ist, wird er nicht einzeln beschrieben.
Entwicklersicht
Genauso wie die Kategorie-Detailseiten setzen die Produkt-Detailseiten die Content Integration API (CI API)
ein, die eine Salesforce-seitige Auswertung von Velocity-Fragmenten ermöglicht. Des Weiteren generieren die Produkt-Detailseiten ebenfalls lediglich ein einziges Asset, dessen Erzeugung im HTML-Kanal der Seitenvorlage erfolgt.
Da sowohl das Formular als auch der Inhalt des HTML-Kanals der Produkt- und der Kategorie-Detailseiten in großen Teilen übereinstimmen, sind auch die beiden Entwicklersichten in diesen Punkten identisch. Aus diesem Grund wird an dieser Stelle nur die Divergenz beider Vorlagen beschrieben.
Die Salesforce-Widgets der Produkt-Detailseiten werden über den Controller Product
bereitgestellt und mithilfe der Velocity-Fragmente in die Seite eingebunden. Die Integration erfolgt auch in diesem Fall durch die $include.widget()
-Funktion des Controllers Content
, indem ihr das gewünschte Widget als Parameter übergeben wird.
Zu den versteckten Eingabekomponenten, die zur Verwendung der CI API
notwendig sind, gehört unter anderem das Feld Velocity rendering controller appendix
. Da die Produkt-Detailseiten wie die Login-Seite zur Erzeugung der Vorschau einen individuellen Controller verwenden, muss er an dieser Stelle angegeben werden. Das Feld enthält daher den Wert Content-Render
, der um eine Referenz auf das Feld SFCC Context ID
erweitert ist. Dieses entspricht der ID des anzuzeigenden Produkts und wird vom Controller benötigt. Der Preview Filter
liest dieses Feld aus und fügt den Wert an der entsprechenden Stelle ein.
Content-Render?pid={pt_storefrontUrlContextId}
Zusätzlich zu den versteckten Eingabekomponenten besitzt das Formular ein Textfeld zur Eingabe eines Promotion-Textes und verschiedene CMS_INPUT_TOGGLEs
. Die Toggles bieten dem Redakteur die Möglichkeit, die Widgets der Produkt-Detailseite einzeln ein- oder auszublenden:
$CMS_IF(!pt_hideProductInfo)$
<!-- CMS-VELOCITY-PRODUCT_INFO-START -->
$include.widget('Product-WrapProductTemplate','pid',$product.id,
'productTemplate','product/components/productInfo')
<!-- CMS-VELOCITY-PRODUCT_INFO-END -->
$CMS_END_IF$
Für die Generierung muss auch bei den Produkt-Detailseiten sichergestellt werden, dass diese als übersetzt markiert sind und das Feld SFCC Context ID
gefüllt ist. Die SFCC Context ID
entspricht in diesem Fall der Produkt-ID aus dem Storefront. Existiert keine im FirstSpirit-Projekt gepflegte Produkt-Detailseite, zeigt die Vorschau die entsprechende Storefront-Seite. Die Anzeige der Storefront-Seite basiert dabei auf der Seitenvorlage Product Detail Page Preview
. Ihr wird dann über die Formatvorlage Create Page ein Button zur Erstellung einer Produkt-Detailseite hinzugefügt, der dieselbe Funktionalität hat wie die Schaltfläche im Report. Bei der Erzeugung einer Produkt-Detailseite wird dann die Seitenvorlage Product Detail Page
verwendet und die Produkt-ID automatisch im zugehörigen Formularfeld gespeichert. Ist die Seite als übersetzt markiert und das Feld SFCC Context ID
gefüllt, wird die Generierung durchgeführt und das Asset für die Produkt-Detailseite erzeugt.
Über die Bereitstellung der Widgets hinaus steuert der Controller Product
außerdem die Anzeige der Produkt-Detailseite im Live-Stand. Er prüft anhand der Produkt-ID, ob eine mit FirstSpirit erzeugte Produkt-Detailseite vorhanden ist. Ist dies der Fall, wird sie im Live-Stand mit der Velocity-Engine gerendert. Andernfalls wird die Produkt-Detailseite dargestellt, die Salesforce-seitig bereits standardmäßig existiert.
5.8. Banner
Im Kopfbereich einer Seite lässt sich ein Banner anzeigen, in dem entweder ein statisches Bild oder ein Slider eingebunden werden kann. Beide Varianten entsprechen jeweils einem Absatz, der sowohl für die Homepage als auch für normale Inhaltsseiten, im Artikel sowie für Kategorie- und Produktseiten verfügbar ist.
Sie werden in den nachfolgenden Unterkapiteln näher beschrieben.
5.8.1. Slider
Der Slider entspricht einer Bilderliste. Alle Einträge dieser Liste entsprechen einem Slider Item und werden nacheinander im Kopfbereich einer Seite angezeigt.
Redakteurssicht
Mit dem Slider besitzt der Redakteur die Möglichkeit, eine Liste von Bildern zu erstellen, für die er jeweils einen Titel sowie einen Verweis auf eine Kategorie- oder Produktseite angeben kann. Die Bilder können dabei entweder aus der Medienverwaltung ausgewählt oder mithilfe der Eingabekomponente hochgeladen werden.
Die Angabe eines Links auf eine Kategorie- oder Produktseite erfolgt über die Angabe eines Linktextes und der zugehörigen Produkt- oder Kategorie-ID. Beide Felder werden bei der Übernahme eines Produkts oder einer Kategorie aus einem der beiden Reports heraus automatisch befüllt. Da der Link sich auf das gesamte Banner bezieht, wird sein Linktext nur als Tooltip verwendet und nicht als klickbarer Verweis dargestellt.
Die selektierten Bilder werden in Form eines Sliders im Kopf der entsprechenden Seite dargestellt und lassen sich mithilfe der entsprechenden FirstSpirit-Funktionalität einzeln zuschneiden.
Entwicklersicht
Der Slider basiert auf dem Bootstrap-Karussell und bindet die Liste der vom Redakteur selektierten Bilder ein. Die Auswahl der Bilder erfolgt über eine FS_CATALOG
-Eingabekomponente, deren einzelne Einträge die Vorlage für das Slider Item verwenden. Die Eingabekomponte besitzt den Parameter upload=yes
, der dem Redakteur das Hochladen neuer Bilder ermöglicht.
Für den Zuschnitt der Bilder wird die Auflösung SLIDE
benötigt, die bereits in den Projekt-Eigenschaften des Referenzprojekts angelegt ist und im HTML-Kanal angegeben werden muss:
$CMS_RENDER(template:"media_link",mediaref: st_picture,res:"SLIDE")$
Der gesamte Slider wird der Variablen set_sectionContent
zugewiesen, die während der Generierung der Homepage bzw. einer Kategorie- oder Produktseite für die Befüllung der entsprechenden XML-Datei benötigt wird. Im Fall einer Inhaltsseite wird die Variable hingegen lediglich ausgegeben.
Da der Slider keine Inhalte aus der Commerce Cloud verwendet, muss er nicht durch HTML-Tags gekennzeichnet sein und wird ohne Ersetzung in der Vorschau angezeigt.
5.8.2. Banner Image
Das Banner Image entspricht einem statischen Bild, das im Kopfbereich einer Seite angezeigt wird.
Redakteurssicht
Die Auswahl des statischen Banner-Bildes erfolgt entweder über die Medienverwaltung oder durch das Hochladen eines neuen Bildes. Es lässt sich mithilfe der gewohnten FirstSpirit-Funktionalität auf einen gewünschten Bildausschnitt zuschneiden.
Darüber hinaus stehen dem Redakteur mit dem Absatz folgende weitere Konfigurarionsmöglichkeiten zur Verfügung:
-
Pflege eines einzeiligen Titels
-
Angabe eines Links auf eine Kategorie- oder Produktseite
-
Definition der Größe und der Darstellung des Banners
Ein eingegebener Titel wird blau hinterlegt und lässt sich rechts, links oder mittig auf dem Banner-Bild positionieren. Dabei ist festzulegen, ob die blaue Hinterlegung in der rechten bzw. linken Position nur als schmaler Streifen oder über die gesamte Höhe des Banners angezeigt wird. In der mittleren Position verläuft sie grundsätzlich über die gesamte Höhe. Die Eingabekomponente für die Positionierung wird erst mit der Eingabe des Titels sichtbar und ist ansonsten ausgeblendet.
Die Angabe eines Links auf eine Kategorie- oder Produktseite erfolgt über die Angabe eines Linktextes und der zugehörigen Produkt- oder Kategorie-ID. Beide Felder werden bei der Übernahme eines Produkts oder einer Kategorie aus einem der beiden Reports heraus automatisch befüllt. Da der Link sich auf das gesamte Banner-Bild bezieht, wird sein Linktext nur als Tooltip verwendet und nicht als klickbarer Verweis dargestellt.
Für die Definition der Größe des Banners stehen dem Redakteur die Optionen Small
und Big
zur Auswahl.
Die Option Small
minimiert die Höhe des Banners und stellt ihn nur als schmalen Streifen dar. Dies hat zur Folge, dass ein selektiertes Bild potentiell unten abgeschnitten wird.
Die Option Big
zeigt den Banner ohne eine Einschränkung der Höhe und befähigt den Redakteur darüber hinaus eine Decoration zu bestimmen.
Für die Decoration existieren die Optionen None
, Top
und Bottom
. Die Option none
nimmt keinerlei Veränderung am Banner vor, während ihm bei den anderen beiden Optionen eine weiße Überlagerung in der linken oberen bzw. in der rechten unteren Ecke hinzugefügt wird.
Entwicklersicht
Der HTML-Kanal referenziert das ausgewählte Bild und gibt es unter Berücksichtigung des vom Redakteur definierten Bildausschnitts und Layouts zusammen mit dem konfigurierten Titel und Verweis aus. Für den Zuschnitt des Bildes wird die Auflösung BANNER
benötigt, die bereits in den Projekt-Eigenschaften des Referenzprojekts angelegt ist und im HTML angegeben werden muss:
$CMS_RENDER(template:"media_link",mediaref:st_picture,res:"BANNER")$
Die Eingabekomponente st_picture besitzt den Parameter upload=yes
, der dem Redakteur zusätzlich zur Auswahl eines bestehenden Bildes aus der Medienverwaltung das Hochladen neuer Bilder ermöglicht.
Der gesamte Inhalt wird der Variablen set_sectionContent
zugewiesen, die während der Generierung der Homepage bzw. einer Kategorie- oder Produktseite für die Befüllung der entsprechenden XML-Datei benötigt wird. Im Fall einer Inhaltsseite wird die Variable hingegen lediglich ausgegeben.
Da das Bild aus der Medienverwaltung des FirstSpirit-Projekts referenziert wird und somit keine Ersetzung von Salesforce-Inhalten erfolgt, muss es nicht durch HTML-Tags gekennzeichnet sein.
5.9. Grid Container
Im Gegensatz zu schlichten Inhaltsseiten besitzen die Homepage und Kategorie-Landingpages die Möglichkeit , über den Grid Container eine Gruppe von drei bis fünf Bildern anzuzeigen, die alle einem Grid Container Element entsprechen.
Redakteurssicht
Mit dem Grid Container besitzt der Redakteur die Möglichkeit, eine Liste von Bildern zu erstellen, für die er jeweils einen Titel sowie einen Verweis auf eine Produkt-, Kategorie- oder Inhaltsseite angeben kann. Aus dieser Liste werden je nach Konfiguration drei bis fünf Bilder dargestellt, die sich einzeln auf einen gewünschten Bildausschnitt zuschneiden lassen. Die Bilder können entweder aus der Medienverwaltung stammen oder mithilfe der Eingabekomponente hochgeladen werden.
Die Anordnung der Bilder erfolgt nach einem bestimmten Layout, das der Redakteur zuvor bestimmt. Dafür stehen ihm die folgenden sieben Optionen zur Verfügung.
Enthält die vom Redakteur erstellte Liste mehr Einträge als das Layout vorsieht, berücksichtigt dieses nur die ersten Einträge. Überzählige Elemente werden vom Layout ignoriert. Der Redakteur erhält diesbezüglich eine entsprechende Anzeige im Formular. Enthält die vom Redakteur erstellte Liste weniger Einträge als das Layout vorsieht oder selektiert er für ein Element kein Bild, werden stattdessen Platzhalter angezeigt. In beiden Fällen lässt sich die Seite bis zur Vervollständigung des Layouts nicht freigeben. |
Entwicklersicht
Innerhalb des HTML-Kanals werden in Abhängigkeit des vom Redakteur gewählten Bildausschnitts und Layouts die ausgewählten Bilder referenziert und die für sie konfigurierten Titel und Verweise ausgegeben. Dabei wird lediglich die dem Layout entsprechende Anzahl Bilder berücksichtigt und jeder weitere Eintrag ignoriert.
Für den Zuschnitt der Bilder werden die Auflösungen GRID_ELEMENT_SQUARE
, GRID_ELEMENT_HIGH
und GRID_ELEMENT_WIDE
benötigt. Sie sind bereits in den Projekt-Eigenschaften des Referenzprojekts angelegt und müssen im HTML angegeben werden:
$CMS_REF(st_picture, resolution:"GRID_ELEMENT_SQUARE")$
$CMS_REF(st_picture, resolution:"GRID_ELEMENT_HIGH")$
$CMS_REF(st_picture, resolution:"GRID_ELEMENT_WIDE")$
Die Eingabekomponente st_picture besitzt den Parameter upload=yes
, der dem Redakteur zusätzlich zur Auswahl eines bestehenden Bildes aus der Medienverwaltung das Hochladen neuer Bilder ermöglicht.
Der Inhalt wird der Variablen set_sectionContent
zugewiesen, die während der Generierung der Homepage oder einer Kategorie-Landingpage für die Befüllung der entsprechenden XML-Datei benötigt wird.
Da die Bilder aus der FirstSpirit-Medienverwaltung referenziert werden und keine Ersetzung von Salesforce-Inhalten stattfindet, müssen sie nicht durch HTML-Tags gekennzeichnet sein und werden wie gewohnt in der Vorschau dargestellt.
5.10. Hot Spots
Zusätzlich zum Grid Container können Produkte in Form sogenannter Hot Spots auf einer Seite dargestellt werden. Jeder Hot Spot entspricht einem Produktlink, der parallel zu den anderen Hot Spots auf einem einzigen statischen Bild definiert ist. Per Klick öffnet sich pro Hot Spot ein Flyout, das den Namen, ein Bild und eine Beschreibung des entsprechenden Produkts enthält.
Die Auswahl des statischen Bildes und die Definition der Hot Spots erfolgt mithilfe der Absatzvorlage Shop the look, die nur der Homepage sowie Inhaltsseiten hinzugefügt werden kann.
Redakteurssicht
Neben dem statischen Bild kann der Redakteur einen aus maximal zwanzig Zeichen bestehenden Titel angeben, der sich links, rechts oder mittig auf dem Bild positionieren lässt. Das Bild kann entweder aus der Medienverwaltung ausgewählt oder per Drag & Drop auf den im Formular verfügbaren Button Upload a picture hochgeladen werden. Es lässt sich mithilfe der bekannten FirstSpirit-Funktionalität zuschneiden.
Wird der Absatz innerhalb eines Blog-Artikels verwendet, lässt sich das auszuwählende Bild nicht zuschneiden. Diese Funktionalität steht nur dann zur Verfügung, wenn der Absatz direkt in einer Seite eingebunden ist. |
Auf dem Bild kann der Redakteur eine beliebige Anzahl von Hot Spots erstellen, indem er einen Bildausschnitt wählt und für diesen einen Produktlink definiert. Der Link erwartet einen Linktext und eine Produkt-ID. Beide Felder werden bei der Übernahme eines Produkts aus dem Produkte-Report heraus automatisch befüllt. Nach dem Speichern des Formulars werden die erzeugten Hot Spots an der entsprechenden Stelle auf dem Bild dargestellt, wobei der gewählte Linktext dem dargestellten Produktname entspricht.
Entwicklersicht
Der HTML-Kanal referenziert zunächst das ausgewählte Bild und gibt es zusammen mit dem Titel aus. Anschließend erfolgt die Ermittlung und Positionierung der Hot Spots anhand der vom Redakteur festgelegten Bildausschnitte. Für jeden Hot Spot wird außerdem das ihm zugehörige Flyout erzeugt, das bei einem Klick auf ihn erscheint und automatisch die entsprechenden Produktinformationen anzeigt.
Der gesamte Inhalt wird der Variablen set_sectionContent
zugewiesen, die während der Generierung der Homepage für die Befüllung der entsprechenden XML-Datei benötigt wird. Im Fall einer Inhaltsseite wird die Variable hingegen lediglich ausgegeben.
Da das Bild aus der Medienverwaltung des FirstSpirit-Projekts referenziert wird und somit keine Ersetzung von Salesforce-Inhalten erfolgt, muss der Inhalt nicht durch HTML-Tags gekennzeichnet sein.
Da die Imagemap in FirstSpirit standardmäßig keine Möglichkeit zum Hochladen und Zuschneiden eines Bildes bereitstellt, wurden dem Referenzprojekt die beiden Skript cc_crop und cc_upload hinzugefügt. Sie stellen dem Redakteur beide Funktionalitäten zur Verfügung. |
5.11. Blog
Im Gegensatz zur Homepage und zu Kategorie- und Produktseiten besitzen Inhaltsseiten die Möglichkeit, Blog-Artikel darzustellen. Jeder Blog-Artikel entspricht einem Datensatz der Datenquelle Article und muss zunächst vom Redakteur erzeugt werden.
Mithilfe zweier Tabellenvorlagen kann die Darstellung entweder in Form einer Übersicht aller verfügbaren Blog-Artikel oder als Detailansicht eines einzigen Artikels erfolgen. Beide Optionen werden in den nachfolgenden Unterkapiteln beschrieben.
5.11.1. Artikel-Übersicht
Die Artikel-Übersicht stellt alle im Projekt enthaltenen Blog-Artikel sortiert nach ihrem Erstellungsdatum dar. Die Anzeige beschränkt sich dabei jeweils auf die Überschrift eines Artikels sowie den Teaser und das Teaserbild.
Das Teaserbild muss mit der Auflösung des |
Redakteurssicht
Da die Übersicht automatisch erzeugt wird, kann der Redakteur lediglich die Anzahl der anzuzeigenden Blog-Artikel sowie ihre Verteilung auf eine oder mehrere Seiten definieren. Die Konfiguration erfolgt entsprechend der bekannten FirstSpirit-Funktionalität im Daten
-Tab der zugehörigen Seitenreferenz.
Davon abgesehen besitzt der Redakteur keine über die Einbindung der Tabellenvorlage hinausgehenden Zugriff auf die Funktionalität.
Entwicklersicht
Der HTML-Kanal der Tabellenvorlage ermittelt die Datensätze der Datenquelle Article und gibt nacheinander jeweils die Überschrift, den Teaser und das Teaserbild aller Blog-Artikel aus. Die einzelnen Artikel sind dabei durch eine horizontale Linie getrennt und ihre Überschrift entspricht dem Link auf die zugehörige Detailseite.
Für die Verlinkung der Detailseite muss ihr Referenzname der Übersichtsseite bekannt sein. Im Referenzprojekt wurde der Referenzname der zugehörigen Seitenreferenz (magazine_article) daher fest in die Vorlage der Übersichtsseite übernommen. In individuellen Szenarien ist sie daher entsprechend anzupassen. |
Des Weiteren ist an erster Stelle vor der Liste der Blog-Artikel eine Navigationsfunktion eingefügt, die - bei einer Verteilung der Blog-Artikel auf mehrere Seiten - das Durchblättern ermöglicht. Werden alle Blog-Artikel auf einer einzigen Seite dargestellt, ist die Navigation ausgeblendet.
5.11.2. Artikel
Jeder Blog-Artikel entspricht einem Datensatz der Datenquelle Article und stellt dem Redakteur verschiedene Eingabemöglichkeiten zur Verfügung.
Redakteurssicht
Zur Erstellung eines Blog-Artikels muss der Redakteur zunächst eine Überschrift sowie einen Teasertext eintragen und ein Teaserbild auswählen. Ergänzend ist das Erstellungsdatum sowie ein Autor anzugeben. Dem Redakteur steht ebenfalls die Möglichkeit zur Verfügung, einen Banner oder einen Slider für den Artikel festzulegen. Das Anlegen dieser Absätze erfolgt, wie im Kapitel Banner beschrieben.
Für die Erfassung der redaktionellen Inhalte stehen dem Redakteur darüber hinaus die folgenden Absätze zur Verfügung. Der Absatz Article Tiles lässt sich nur innerhalb der Blog-Artikel verwenden und ist in der Absatzauswahl der Seitenvorlagen nicht enthalten.
-
Shop the look
Der Absatz ermöglicht die Darstellung von Produkten in Form sogenannter Hot Spots. Er entspricht dem gleichnamigen Absatz, der sich der Homepage und Inhaltsseiten hinzufügen lässt und bereits im vorhergehenden Kapitel beschrieben ist.Wird der Absatz innerhalb eines Blog-Artikels verwendet, lässt sich das auszuwählende Bild nicht zuschneiden. Diese Funktionalität steht nur dann zur Verfügung, wenn der Absatz direkt in einer Seite eingebunden ist.
-
Article Tiles
Mithilfe dieses Absatzes lassen sich nebeneinander in einer Spaltenansicht drei Blog-Artikel abbilden. Die Darstellung umfasst dabei jeweils die Überschrift, das Teaserbild und den Teasertext sowie den Autor und das Erstellungsdatum des Artikels. Per Klick auf die Überschrift wird die Detailseite des entsprechenden Blog-Artikels aufgerufen.Für den Absatz lässt sich eine Überschrift angeben, die links, mittig oder rechts über den Blog-Artikeln angezeigt wird.
Abbildung 37. Article TilesFür die Verlinkung der Detailseite wurde der Referenzname der zugehörigen Seitenreferenz (magazine_article) fest in die Vorlage des Absatzes übernommen. In individuellen Szenarien muss er entsprechend angepasst werden.
-
Product Tiles
Dieser Absatz ist für Blog-Artikel und Produkt-Detailseiten verfügbar und ist im gleichnamigen Kapitel beschrieben. Er zeigt äquivalent zu den Article Tiles drei Produkte nebeneinander in einer Spaltenansicht.Abbildung 38. Product Tiles
-
Text Picture
Der Absatz bietet fünf Möglichkeiten, Text und/oder Bilder zu pflegen. Er entspricht dem gleichnamigen Absatz, der sich Login-Seiten und Blog-Artikeln hinzufügen lässt und im entsprechenden Kapitel beschrieben ist.
Entwicklersicht
Der HTML-Kanal gibt zunächst die Überschrift des Blog-Artikels zusammen mit dem Namen des Autors und dem Erstellungsdatum aus. Anschließend ermittelt er die vom Redakteur erzeugten Absätze und stellt diese nacheinander dar.
Aufgrund der fehlenden Ersetzung von Salesforce-Inhalten ist eine Kennzeichnung der Blog-Inhalte durch HTML-Tags nicht notwendig.
5.12. Text Picture
Seinem Namen entsprechend können mit diesem Absatz Texte und/oder Bilder gepflegt werden. Er ist nur innerhalb von Blog-Artikeln und Login-Seiten erlaubt.
Redakteurssicht
Für die Inhaltspflege stehen dem Redakteur mit diesem Absatz fünf verschiedene Optionen zur Verfügung, die innerhalb des Formulars auswählbar sind:
- Option 1 - only text
-
Mit der ersten Option lässt sich lediglich Text hinzufügen.
- Option 2 - 1 picture
-
Die zweite Option ermöglicht das Hinzufügen eines einzigen Bilds.
- Option 3 - 2 pictures side by side
-
Ergänzend zur zweiten Option kann der Redakteur mit der dritten Option zwei Bilder hinzufügen, die nebeneinander angezeigt werden.
- Option 4 - picture left, text right
-
Diese Option ermöglicht die gleichzeitige Darstellung von Bild und Text. Das Bild wird dabei links neben dem Text angezeigt.
- Option 5 - text left, picture right
-
Die vierte und fünfte Option sind äquivalent zueinander. Allerdings wird in diesem Fall das Bild rechts neben dem Text dargestellt.
Entwicklersicht
Innerhalb des HTML-Kanals werden in Abhängigkeit der vom Redakteur gewählten Option die von ihm gepflegten Inhalte ausgegeben und entsprechend positioniert. Da die Inhalte nicht aus der Commerce Cloud stammen, müssen sie nicht durch HTML-Tags gekennzeichnet sein. Sie werden ohne Ersetzung in der Vorschau angezeigt.
5.13. Product Tiles
Äquivalent zu den Article Tiles, die lediglich in Blog-Artikeln verwendet werden können, zeigt dieser Absatz drei Produkte nebeneinander in einer Spaltenansicht. Er ist nur innerhalb eines Blog-Artikels oder in einer Produkt-Detailseite erlaubt und zeigt pro Produkt dessen Namen, Bild und Beschreibung. Ein Klick auf den Produktnamen öffnet die entsprechende Produkt-Detailseite.
Redakteurssicht
Neben den drei auszuwählenden Produkten kann der Redakteur optional einen bis zu fünfzig Zeichen langen Titel angeben, der sich links, rechts oder mittig über den Product Tiles positionieren lässt. Die Produkte können per Drag & Drop im Formular referenziert werden, wobei der Produktname als Linktext übernommen wird. Dieser ist im Gegensatz zu den Produktinformationen editierbar.
Enthält die vom Redakteur erstellte Auswahl weniger als drei Produkte, lässt sich die Seite nicht freigeben. Eine Auswahl von mehr als drei Produkten ist nicht möglich. |
Entwicklersicht
Innerhalb des HTML-Kanals werden die vom Redakteur gewählten Produkte referenziert und der Titel positioniert. Für jedes Produkt wird dabei dessen Name, Bild und Beschreibung ermittelt und ausgegeben. Da die Informationen ohne Ersetzung aus Salesforce übernommen werden, ist eine Kennzeichnung durch HTML-Tags nicht notwendig.
5.14. Video
Neben rein textuellen Informationen kann eine Seite im Referenzprojekt auch Videos enthalten. Jedes Video entspricht einem Absatz, der verschiedene Konfigurationsmöglichkeiten bereitstellt. Die zugehörige Absatzvorlage kann sowohl Inhaltsseiten als auch Kategorie-Landingpages, jedoch nicht der Homepage hinzugefügt werden.
Redakteurssicht
Für die Referenzierung von Videos stehen einem Redakteur die Plattformen Youtube und Vimeo zur Auswahl. Beide Anbieter verwenden eine eindeutige ID, die jeweils Bestandteil der Video-URL ist:
-
Youtube: https://www.youtube.com/watch?v=<VIDEO ID>
-
Vimeo: https://vimeo.com/<VIDEO ID>
Anhand dieser ID lässt sich das entsprechende Video der Seite hinzufügen. Es wird standardmäßig im Format 16:9
angezeigt. Für Youtube-Videos sind zusätzlich jedoch die Optionen 21:9
, 4:3
oder 1:1
verfügbar. Darüber hinaus kann der Redakteur definieren, ob die Wiedergabe automatisch startet und ob die Anzeige des Videos im Vollbild zulässig ist.
Entwicklersicht
Innerhalb des HTML-Kanals wird zunächst in Abhängigkeit der definierten Video-Plattform das ausgewählte Video referenziert. Dabei werden entsprechend der Konfiguration des Redakteurs im Formular das Darstellungsformat sowie die verschiedenen URL-Parameter gesetzt und letztendlich die richtige Video-URL erzeugt.
Dieser Inhalt wird der Variablen set_sectionContent
zugewiesen, die während der Generierung einer Kategorie-Landingpage für die Befüllung der entsprechenden XML-Datei benötigt wird. Im Fall einer Inhaltsseite wird die Variable hingegen lediglich ausgegeben.
Da das eingebundene Video nicht aus der Commerce Cloud stammt, muss es nicht durch HTML-Tags gekennzeichnet sein. Es wird ohne Ersetzung in der Vorschau angezeigt.
5.15. Social Media
Redakteure können im Referenzprojekt Inhalte aus Facebook, Twitter und Instagram nutzen und diese in einer Inhaltsseite einbetten. Darüber hinaus haben sie die Möglichkeit, Schaltflächen auf einer Seite zu platzieren, über die Besucher den Link der Webseite auf verschiedenen Plattformen teilen können.
5.15.1. Einbettung von Inhalten
Inhalte aus sozialen Netzwerken können in eine Webseite eingebettet werden.
Redakteurssicht
Zur Einbettung von Inhalten aus sozialen Netzwerken dient die Absatzvorlage Social Media Embedding. Sie erfordert die Auswahl einer der zur Verfügung stehenden Plattformen Facebook, Twitter oder Instagram innerhalb des Formulars des Absatzes.
Wird Facebook als Plattform genutzt, muss außerdem die Art des einzubettenden Beitrags festgelegt werden. Zur Auswahl stehen Posts, Kommentare und Videos. In jedem Fall muss anschließend die URL des Beitrags in das enstprechende Formularfeld eingetragen werden. Abhängig vom Typ des Beitrags stehen außerdem noch weitere Optionen zur Verfügung, die die Darstellung beeinflussen.
Auch für Twitter stehen Redakteuren verschiedene Möglichkeiten zur Verfügung: Im Formular kann er zwischen List, Profile und Collection Timelines wählen, um diese in die Seite einzubetten. Dafür muss er den Namen des Twitter Accounts, dessen Timeline genutzt werden soll, in das Formularfeld Screen Name
eintragen. List und Collection Timelines benötigen zusätzlich die Kennung der Timeline im Feld ID
.
Zur Einbettung eines Instagram-Beitrags wird lediglich die URL des Beitrags im Formular erwartet.
Außerdem ist für alle Seitenvorlagen - mit Ausnahme der Inhaltsseite - eine Slot-Konfiguration anzugeben.
Entwicklersicht
Die Absatzvorlage nutzt abhängig von der gewählten Plattform verschiedenene Mechanismen, um den gepflegten Beitrag in die Seite einzubetten. Das resultierende HTML-Markup speichert sie in der Variablen set_sectionContent
, die sie im Fall der FirstSpirit-Vorschau lediglich ausgibt. Während einer Generierung einer Inhaltsseite wird der Wert der Variablen ebenfalls ausgegeben, so dass er in das Content Asset der Inhaltsseite aufgenommen wird. Auf anderen Seiten wird stattdessen ein neues Asset erzeugt und der Wert von set_sectionContent
in diesem Asset hinterlegt.
5.15.2. Teilen der Seite
Webseitenbesuchern kann die Möglichkeit geboten werden, die Seite auf verschiedenen sozialen Netzwerken zu teilen. Für jede unterstützte Plattform kann dazu eine Schaltfläche auf der Seite platziert werden.
Redakteurssicht
Zur Nutzung dieser Funktion dient die Absatzvorlage Social Media Share. In ihr wählen Redakteure zunächst eine oder mehrere soziale Netzwerke aus, für die sie Schaltflächen in ihre Seite einfügen möchten. Die Position und die Größe der Schaltflächen kann einmalig für alle gewählten Plattformen festgelegt werden. Unterstützt werden die Plattformen Facebook und Twitter.
Für Facebook ist es möglich die Schaltfläche optional mit einem individuellen Text zu versehen, der im Formular des Absatzes gepflegt wird. Für Twitter können Redakteure hingegen optional den Text des Tweets und Hashtags hinterlegen.
Außerdem ist für alle Seitenvorlagen - mit Ausnahme der Inhaltsseite - eine Slot-Konfiguration anzugeben.
Entwicklersicht
In Abhängigkeit der gewählten Netzwerke erzeugt diese Vorlage ebenfalls unterschiedliches HTML für die Realisierung der Schaltflächen. Im Gegensatz zu den Inhaltsseiten, die das Markup lediglich ausgeben, speichern die anderen Seiten es in einem Content Asset. Im Vorschau-Fall wird das Markup nur angezeigt.
5.16. Sprachwechsel
Das mitgelieferte Referenzprojekt verwendet als Mastersprache Englisch. Darüber hinaus besitzt es die Projektsprachen Italienisch, Französisch, Japanisch und Chinesisch. Um die Ansicht einer Seite auf eine dieser Sprachen umschalten zu können, bietet das Projekt in der Vorschau einen Sprachwechsel an. Dieser wird in Abhängigkeit der verwendeten Bildschirmgröße entweder in Form eines Dropdowns oder innerhalb eines Menüs angezeigt.
Redakteurssicht
Der Sprachwechsel wird innerhalb der Vorschau des Referenzprojekts sowohl auf der Homepage als auch auf Inhaltsseiten sowie auf Kategorie- und Produktseiten angezeigt. Auf diese Weise erhält der Redakteur auf jeder Seite die Möglichkeit, redaktionelle Inhalte für alle im Projekt bestehenden Sprachen zu pflegen.
Da die zur Auswahl stehenden Sprachen automatisch auf Basis der Projektsprachen ermittelt werden und die Darstellung ebenfalls nicht beeinflussbar ist, besitzt der Redakteur keinen über die reine Verwendung hinausgehenden Zugriff auf die Funktionalität.
Entwicklersicht
Der Sprachwechsel wird durch die Formatvorlage Language Dropdown erzeugt und mit der Formatvorlage Preview Generation in der Vorschau bereitgestellt. Dabei wird er in Abhängigkeit der Bildschirmgröße entweder in Form eines Dropdowns oder innerhalb eines Menüs angezeigt (vgl. Abbildung Sprachwechsel).
Beide Varianten referenzieren die Formatvorlage Language Dropdown, welche die Anzeige der Varianten über den zu übergebenden Parameter showInMenu
steuert. Da der Sprachwechsel jeweils den entsprechenden Salesforce-Inhalt ersetzt, müssen beide Varianten durch eindeutige HTML-Kommentare gekennzeichnet sein.
$-- Preview Language Switch --$
<!-- CMS-LANGUAGE-DROPDOWN-START -->
$CMS_RENDER(template:"sfcc_language_dropdown", mobile:false)$
<!-- CMS-LANGUAGE-DROPDOWN-END -->
<!-- CMS-LANGUAGE-DROPDOWN-MOBILE-START -->
$CMS_RENDER(template:"sfcc_language_dropdown", mobile:true)$
<!-- CMS-LANGUAGE-DROPDOWN-MOBILE-END -->
Die Formatvorlage Language Dropdown ermittelt zunächst die aktuell in der Vorschau dargestellte Sprache und zeigt diese zusammen mit dem entsprechenden Icon als ersten Eintrag des Dropdowns bzw. des Sprachmenüs an. Im Anschluss wird die Liste aller im Projekt bestehenden Sprachen abgefragt und mit Ausnahme der zuvor ermittelten Sprache als weitere Auswahlmöglichkeiten bereitgestellt.
5.17. Links
Die FirstSpirit-seitig gepflegten, redaktionellen Inhalte beinhalten Verweise, mit denen sie sich untereinander verknüpfen lassen. Des Weiteren können mithilfe der Verweise Dokumente zum Download bereitgestellt oder Kontaktmöglichkeiten angeboten werden.
Sie basieren auf verschiedenen Verweisvorlagen, die in den nachfolgenden Unterkapiteln näher beschrieben werden.
Alle Verweisvorlagen - mit Ausnahme des Article Links - besitzen die versteckte Toogle-Komponente Add link tags. Sie steuert, dass der entsprechende Link
Add link tags
|
5.17.1. Category Link und Product Link
Der Category Link und der Product Link ermöglichen den Verweis auf Kategorie- beziehungsweise Produktseiten. Sie sind nahezu äquivalent zueinander und werden daher in diesem Kapitel gemeinsam beschrieben.
Redakteurssicht
Die Angabe eines Links auf eine Kategorie- oder Produktseite erfolgt über die Angabe eines Linktextes und der zugehörigen Produkt- oder Kategorie-ID. Beide Felder werden bei der Übernahme eines Produkts oder einer Kategorie aus einem der beiden Reports heraus automatisch befüllt. Während die ID nicht änderbar ist, ist der Linktext beliebig durch den Redakteur anpassbar. Löscht der Redakteur den Linktext oder bleibt das Formularfeld aus anderen Gründen leer, wird stattdessen der Begriff Product
beziehungsweise Category
verwendet.
Category Links erlauben darüber hinaus die Auswahl einer Sorting Rule. Sorting Rules ermöglichen die Sortierung der auf einer Kategorieseite angezeigten Produkte nach vordefinierten Kriterien. Trifft der Redakteur keine Auswahl, basiert die Sortierung der Produkte auf der dargestellten Kategorieseite standardmäßig der Sorting Rule Best Matches
.
Entwicklersicht
Innerhalb des HTML-Kanals beider Vorlagen wird für die Erstellung des Links zwischen der Vorschau und dem generierten Stand unterschieden. Im Fall des generierten Stands wird eine Anweisung erzeugt, die Salesforce-seitig die Ermittlung der richtigen URL veranlasst. Diese Aufgabe übernimmt für den Vorschaufall der in der Strukturverwaltung enthaltene Dispatcher: Er prüft zunächst, ob für die übergebene Produkt- bzw. Kategorie-ID eine FirstSpirit-Seitenreferenz vorhanden ist. Existiert keine solche Seitenreferenz, ermittelt er stattdessen die zugehörige Seite aus dem Storefront und zeigt diese in der Vorschau an. Die URL eines Category Links wird darüber hinaus durch einen entsprechenden URL-Parameter ergänzt, wenn für ihn eine Sorting Rule ausgewählt ist. Hat der Redakteur keine Auswahl getroffen, zeigt eine Kategorieseite standardmäßig die Best Matches
an.
Verweise auf Produktvariationen können durch den Dispatcher aktuell noch nicht korrekt einer FirstSpirit-Seitenreferenz zugordnet werden. Daher wird bei Verweisen auf Produktvariationen immer die zugehörige Seite aus dem Storefront angezeigt. |
Die Verwendung der Sorting Rules ist ausschließlich im Live-Stand möglich. Innerhalb der Vorschau erfolgt keinerlei Sortierung. Sie stellt immer nur die |
5.17.2. FS Content Link
Der FS Content Link dient der Verlinkung von Seitenreferenzen innerhalb von FirstSpirit.
Redakteurssicht
Für die Erzeugung eines Content-Links wählt der Redakteur eine Seitenreferenz aus der Strukturverwaltung und legt einen beliebigen Linktext fest. Im Gegensatz zum Linktext handelt es sich bei der Auswahl der Seitenreferenz um ein Pflichtfeld. Bleibt das Feld für den Linktext leer, wird stattdessen der Begriff Link
verwendet.
Ist ein Verweis auf eine ausschließlich im Storefront existierende Seite gewünscht, muss statt des Content-Links der External Link verwendet werden. |
Entwicklersicht
Da es sich bei dem FS Content Link um einen Projekt-internen Verweis handelt, kann die vom Redakteur gewählte Seitenreferenz für die Vorschau direkt referenziert werden. Im Gegensatz dazu wird für den generierten Stand eine Anweisung erzeugt, die Salesforce-seitig die Ermittlung der richtigen URL veranlasst. Dafür wird die Asset-ID, die zuvor innerhalb der Linkvorlage berechnet wird, als URL-Parameter übergeben
5.17.3. Article Link
Der Article Link ermöglicht die Verlinkung von einzelnen Blog-Artikeln innerhalb eines Fließtextes. Er ist aus diesem Grund nur innerhalb des Text- bzw. Text Picture-Absatzes verwendbar.
Redakteurssicht
Der Article Link ist äquivalent zum FS Content Link. Der Unterschied besteht im Verweisziel, das im Fall des Article Links einem Blog-Artikel entspricht. Er erwartet daher zusätzlich zum Linktext die Referenzierung eines Datensatzes aus der Datenquelle Article. Während es sich bei der Auswahl des Blog-Artikels um ein Pflichtfeld handelt, ist der Linktext optional. Bleibt des Feld leer, wird zunächst die Überschrift des Blog-Artikels herangezogen. Ist diese ebenfalls nicht angegeben, wird stattdessen der Begriff Article Link
verwendet.
Entwicklersicht
Bei dem Article Link handelt es sich ebenso wie beim Content Link um einen Projekt-internen Verweis. Aus diesem Grund kann der gewählte Blog-Artikel in der Vorschau direkt anhand seiner FS-ID referenziert werden. Für den generierten Stand wird stattdessen eine Anweisung erzeugt, die Salesforce-seitig die Ermittlung der richtigen URL veranlasst. Ihr wird dafür ebenfalls die Asset-ID als URL-Parameter übergeben.
Für die Verlinkung des Blog-Artikels wurde der Referenzname der zugehörigen Seitenreferenz (magazine_article) fest in die Link-Vorlage übernommen. In individuellen Szenarien muss er entsprechend angepasst werden. |
5.17.4. External Link
Ein Verweis auf fremde Webseiten erfolgt über den External Link.
Redakteurssicht
Der External Link funktioniert ähnlich wie der Content Link. Im Gegensatz zu diesem verweist er jedoch auf externe Inhalte und erwartet daher zusätzlich zum Linktext eine URL, statt einer Seitenreferenz. Während es sich bei der URL um ein Pflichtfeld handelt, ist der Linktext optional. Bleibt das Feld für ihn leer, wird stattdessen der Begriff Link
verwendet.
Durch die Angabe der entsprechenden Storefront-URL kann der External-Link auch für Verweise auf Inhalte in der Commerce Cloud verwendet werden. |
Entwicklersicht
Innerhalb des HTML-Kanals wird lediglich der vom Redakteur definierte externe Verweis erzeugt. Ebenso wie beim Content Link ist die Verwendung des Dispatchers nicht nötig.
5.17.5. Download Link
Der Download Link dient der Bereitstellung von Dokumenten auf der Webseite. Sie können vom Webseiten-Besucher heruntergeladen werden und diesem somit weiterführende Informationen zur Verfügung stellen.
Redakteurssicht
Um ein Dokument auf der Webseite zum Download anzubieten, wählt der Redakteur dieses aus der Medienverwaltung aus und gibt zusätzlich einen beliebigen Linktext an. Während die Auswahl eines Dokuments ein Pflichtfeld darstellt, kann das Feld für den Linktext auch leer bleiben. In diesem Fall wird der Begriff Download
verwendet.
Entwicklersicht
Anhand der vom Redakteur getätigten Eingaben wird im HTML-Kanal der Download-Link erzeugt. Für den generierten Stand wird ihm dabei der Parameter $staticlink
hinzugefügt, der Salesforce-seitig die Erzeugung der richtigen URL veranlasst. Darüber hinaus enthält der Ausgabekanal keinen weiteren Inhalt.
Weitere Informationen zur Verlinkung statischer Inhalte in Salesforce sind in dem Kapitel Merchandising Your Site ➔ Content Assets ➔ Content Assets for Developers ➔ Using Content Link Functions ➔ Linking to Another Site URL enthalten.
5.17.6. E-Mail Link
Der E-Mail Link stellt die Möglichkeit einer Kontaktaufnahme per E-Mail bereit.
Redakteurssicht
Das Formular des E-Mail-Links besteht lediglich aus zwei Textfeldern. In diesen gibt der Redakteur einen beliebigen Linktext sowie eine E-Mail-Adresse an, deren Validität mittels eines Regex-Ausdrucks im Regeln-Tab geprüft wird. Die Angabe eines Linktext ist im Gegensatz zur E-Mail-Adresse optional. Bleibt das Feld für ihn leer, wird stattdessen der Begriff E-Mail
verwendet.
Entwicklersicht
Aus den vom Redakteur getätigten Angaben wird im HTML-Kanal ein mailto-Verweis erzeugt und ausgegeben. Darüber hinaus enthält der Ausgabekanal keinen weiteren Inhalt.
5.18. Slot-Konfigurationen
Innerhalb des mitgelieferten Referenzprojekts ContentConnect Reference Project werden Assets durch Absätze repräsentiert. Sie besitzen je nach Anwendungsfall eine Slot-Konfiguration, die eine zielgruppenspezifische und individuell auf den Kunden zugeschnittene Auslieferung redaktioneller Inhalte ermöglicht.
Redakteurssicht
Die Möglichkeit zur Konfiguration eines Slots wird einem Redakteur im Referenzprojekt in Form einer Eingabekomponente bereitgestellt. Sie ist in den für ihn verfügbaren Absätzen enthalten und darf eine unlimitierte Anzahl an Slot-Konfigurationen enthalten. Außerdem ist in allen verfügbaren Absätzen eine Slot-Konfiguration als Vorgabewert für die Eingabekomponente definiert.
Die vorkonfigurierte Slot-Konfiguration ist aktiviert und als Default-Konfiguration für den zugehörigen Slot ausgewählt. Falls dieses Verhalten nicht gewünscht ist, müssen diese Eigenschaften manuell geändert werden. |
Im Gegensatz zur Homepage, zur Login-Seite und zu den Kategorie-Landingpages erzeugen die Inhaltsseite, die Kategorie-Detailseite und die Produkt-Detailseiten lediglich ein einziges Asset und fassen in diesem alle ihnen hinzugefügten Absätze zusammen. Aus diesem Grund ist die Definition einer Slot-Konfiguration pro Absatz in diesem Fall nicht möglich. Die entsprechende Eingabekomponente wird daher für alle Absätze einer Inhaltsseite, einer Kategorie-Detailseite oder einer Produkt-Detailseite ausgeblendet. |
Die Slot-Konfiguration kann durch den Redakteur de-/aktiviert sowie als Default-Konfiguration für den zugehörigen Slot ausgewählt werden. Darüber hinaus ermöglicht sie die Definition der aus Salesforce bekannten Schedule-Parameter. Durch das Hinzufügen mehrerer Absätze desselben Typs (z.B. mehrere Slider), die jedoch unterschiedliche Slot-Konfigurationen besitzen, lassen sich auf diese Weise unterschiedliche Inhaltsvarianten realisieren.
Einer der zu definieren Schedule-Parameter ist der |
Entwicklersicht
Eine einzelne Slot-Konfiguration wird durch die Verweisvorlage SFCC Slot Configuration repräsentiert, die innerhalb der folgenden Absätze von der Eingabekomponente Slot Configuration verwendet wird:
-
Banner Image
-
Slider
-
Grid Container
-
Shop the look
-
Text
-
Video
-
Product Tiles
-
Social Media Share
-
Social Media Embedding
Innerhalb des HTML-Kanals der Verweisvorlage wird in Abhängigkeit der vom Redakteur definierten Konfiguration das von der Commerce Cloud erwartete XML erzeugt und in den vorgesehenen Collector geschrieben. Die Übertragung des XMLs in die Commerce Cloud erfolgt durch ein Deployment.
5.18.1. Varianten
Slot-Konfigurationen ermöglichen die Realisierung unterschiedlicher Inhaltsvarianten und damit die Auslieferung zielgruppenspezifischer und auf den Kunden zugeschnittener redaktioneller Inhalte. Zur Erzeugung dieser Inhaltsvarianten müssen:
-
entweder für einen Absatz mehrere Slot-Konfigurationen
-
oder mehrere Absätze desselben Typs (z.B. mehrere Slider) mit unterschiedlichen Slot-Konfigurationen in einem Inhaltsbereich
angelegt werden.
Da im zweiten Fall standardmäßig alle Varianten in der Vorschau angezeigt werden würden, besitzt das Referenzprojekt für die Homepage, die Login-Seite und für Kategorie-Landingpages eine Variantenselektion (vgl. Abbildung Variantenselektion). Sobald ein Inhaltsbereich mehr als einen Absatz beinhaltet, wird die Variantenselektion sichtbar und lediglich der in ihr selektierte Absatz in der Vorschau eingeblendet.
Besitzt ein Absatz mehrere Slot-Konfigurationen, berücksichtigt die Variantenselektion lediglich die erste. |
Jeder Eintrag der Variantenselektion zeigt den Titel der entsprechend Slot-Konfiguration sowie die für sie definierten Parameter, wobei die Default-Option in Form eines Haus-Icons und der Rang als Doppelpfeil visualisiert wird. Fehlt der Titel einer Slot-Konfiguration, stellt die Variantenselektion stattdessen den Absatztyp dar. Darüber hinaus erhalten deaktivierte Slot-Konfigurationen einen grauen Hintergrund und ein entsprechendes Label.
Zusätzlich zu den einzelnen Einträgen verfügt die Variantenselektion über die Schaltfläche Create a new variant, die der Erzeugung neuer Absätze in dem zugehörigen Inhaltsbereich dient. Sie besitzt dieselbe Funktion wie der Easy-Edit-Button an bestehenden Absätzen.
Die Integration der Variantenselektion erfolgt über sogenannte Wrapper, die in Form der Formatvorlagen MPP Body Wrapper und MPP Section Wrapper in die Seiten- bzw. Absatzvorlagen eingebunden werden. Der Aufruf des MPP Section Wrappers ersetzt in Absätzen die Ausgabe der Variablen set_sectionContent
, der im Referenzprojekt alle redaktionellen Inhalte eines Absatzes zugewiesen werden. Äquivalent dazu ersetzt der MPP Body Wrapper in Seitenvorlagen die Ausgabe des jeweiligen Inhaltsbereich, der dem Wrapper stattdessen übergeben werden muss.
<!-- CMS-HOME-MAIN-START -->
$CMS_RENDER(template:"mpp_body_wrapper",body:"home_main_m")$
$CMS_RENDER(template:"empty_content_slot",label:"Home Main",body:"home_main_m")$
<!-- CMS-HOME-MAIN-END -->
5.19. Freigabe, Löschung & Veröffentlichung
Die Freigabe, das Löschen und die Veröffentlichung von Inhalten erfolgt innerhalb des mitgelieferten Referenzprojekts ContentConnect Reference Project über Arbeitsabläufe. Es enthält aus diesem Grund einen Publish-Arbeitsablauf sowie die BasicWorkflows.
Redakteurssicht
Die BasicWorkflows bieten einem Redakteur die Möglichkeit, geänderte Inhalte freizugeben bzw. FirstSpirit-Elemente sowohl aus dem Current- als auch aus dem Freigabestand zu entfernen. Beide Arbeitsabläufe basieren auf dem Vier-Augen-Prinzip und werden immer im Kontext einer Seite ausgeführt. Tritt während der Ausführung eines Arbeitsablaufs ein Konflikt auf, kann er nach dessen Behebung fortgesetzt werden.
Für die Salesforce-seitige Synchronisierung der im FirstSpirit-Projekt durchgeführten Änderungen steht einem Redakteur der Publish-Arbeitsablauf zur Verfügung. Er stößt den Deployment-Auftrag an und wird somit kontextlos ausgeführt. Aus diesem Grund wird er im ContentCreator über das Aktionen
-Menü und im SiteArchitect über die Aufgabenliste
gestartet. Der Deployment-Auftrag überträgt alle freigegebenen Inhalte in die Commerce Cloud und veranlasst die Salesforce-seitige Löschung von Assets und Slot-Konfigurationen, die in FirstSpirit entfernt wurden.
Entwicklersicht
Der Freigabe- und der Lösch-Arbeitsablauf entsprechen denen des BasicWorkflows-Moduls und wurden nicht verändert. Der Freigabe-Arbeitsablauf orientiert sich an der administrativen Direktfreigabe und stellt deren Funktionalität dem Redakteur bereit. Der Lösch-Arbeitsablauf ermöglicht die Entfernung von Elementen aus dem Current- und dem Freigabestand.
Zur Übertragung der im FirstSpirit-Projekt vorgenommenen Änderungen, wurde dem Referenzprojekt zusätzlich der Publish-Arbeitsablauf hinzugefügt. Dieser ermittelt anhand des Skripts SFCC Release Deployment den Deployment-Auftrag und führt ihn aus. Im Gegensatz zu den anderen beiden Arbeitsabläufen bezieht er sich somit explizit nicht auf eine einzige Seite. Aus diesem Grund ist in seinen Eigenschaften
die Option Arbeitsablauf ohne Kontext ausführbar
aktiviert.
Um im FirstSpirit-Projekt gelöschte Assets und Slot-Konfigurationen auch Salesforce-seitig zu entfernen, ist die Durchführung des Publish-Arbeitsablaufs notwendig. |
6. Rechtliche Hinweise
ContentConnect ist ein Produkt der Crownpeak Technology GmbH, Dortmund, Germany.
Für die Verwendung des Modules gilt gegenüber dem Anwender nur die mit der Crownpeak Technology GmbH vereinbarte Lizenz.
Details zu möglicherweise fremden, nicht von der Crownpeak Technology GmbH hergestellten, eingesetzten Software-Produkten, deren eigenen Lizenzen und gegebenenfalls Aktualisierungsinformationen, finden Sie in der Datei THIRD-PARTY.txt
, die mit dem Modul ausgeliefert wird.
7. Hilfe
Der Technical Support der Crownpeak Technology GmbH bietet qualifizierte technische Unterstützung zu allen Themen, die FirstSpirit™ als Produkt betreffen. Weitere Hilfe zu vielen relevanten Themen erhalten und finden Sie in auch in unserer Community.