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)

architecture
Abbildung 1. Architektur

Das Zusammenspiel der einzelnen Komponenten erfolgt immer nach dem folgenden Schema:

  1. 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 die OC API-Schnittstelle der Commerce Cloud Staging Instanz. Diese Schnittstelle wird außerdem genutzt, um verschiedene Aktionen in der Commerce Cloud zu starten.

  2. 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 verschiedenen WebDAV-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.

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

salesforce
Abbildung 2. Page Rendering

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.

languages
Abbildung 3. Sprachen

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

1.5. Wichtige Hinweise

Dieses Kapitel enthält Hinweise, die bei der Verwendung des ContentConnect-Moduls zu beachten sind.

1.5.1. Content Asset ID

Content Assets, die in FirstSpirit angelegt werden, bekommen von FirstSpirit eine eindeutige ID. Wird in der Commerce Cloud ein Content Asset mit exakt derselben ID angelegt, wird dieses beim Veröffentlichen von FirstSpirit überschrieben.

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 Cartridge int_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 Controllers RenderTemplate.

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 Administration  Site Development  Site Import & Export 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 Administration  Operations  Jobs 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 zum IMPEX-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 Wert fs_import_library.xml und für den Job Step ImportContentSlots den Wert fs_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:

  1. Import der benutzerdefinierten System-Objekt-Attribute

  2. Optional: Anlegen weiterer Custom-Attributes für Assets

  3. Erzeugung von Search-Refinements für Assets

  4. Anpassung der OC API Settings

  5. Einrichtung des Deployment-Auftrags

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 Server-Eigenschaften  Module.

modules
Abbildung 4. Modulverwaltung in den Server-Eigenschaften

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 PKCS12- oder JKS-Datei.

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 firstspirit5  conf ihres FirstSpirit-Servers und fügen Sie die folgenden Zeilen der Datei firstspirit5  conf  fs-wrapper.conf 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 firstspirit5  conf  fs-wrapper.conf 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 Projekt  Importieren 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).

importedproject
Abbildung 5. Importiertes Projekt im ServerManager

Neben den Standardgruppen Everyone und Administrators existieren im Referenzprojekt vier weitere Benutzergruppen: Editors, ChiefEditors, Developers und ProjectAdmins. Diese Gruppen besitzen verschiedene Rechte, die entsprechend der Aufgaben der jeweiligen Gruppe gewählt wurden. Benutzer außerhalb dieser Gruppen sind standardmäßig nicht berechtigt das Referenzprojekt zu verwenden.

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 Projekt-Eigenschaften  Projekt-Komponenten. 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.
config
Abbildung 6. Konfigurationsdialog der Projekt-Komponente
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 konfigurierten Base URL unterscheidet. In diesem Fall ist hier der Hostname inklusive Protokoll der Storefront 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 der Open Commerce Shop API benötigt.

Die Client ID und die Base URL sind für die Verbindung zwischen der Commerce Cloud und FirstSpirit zwingend erforderlich. Ist eine der beiden Angaben fehlerhaft oder nicht vorhanden, wird der jeweilige Report für die Produktsuche in beiden FirstSpirit-Clients ausgeblendet.
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:

  • cgid=new-arrivals|electronics

  • price=(0..100)

Die Filterung nach einer Kategorie geschieht ebenfalls über ein Refinement, weshalb zwei Sonderfälle zu beachten sind:

Im ersten Fall

  • wird in der Produktsuche nach einer Kategorie gefiltert und

  • die Konfiguration enthält neun Refinement-Definitionen,

  • von denen keine das Kategorie-Refinement cgid ist.

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

  • wird in der Produktsuche ebenfalls nach einer Kategorie gefiltert und

  • die Konfiguration enthält das Kategorie-Refinement cgid.

In diesem Fall gibt es eine doppelte Definition für das Kategorie-Refinement cgid: eine aus der Modulkonfiguration und eine aus der Produktsuche, wobei letztere verwendet wird. Der Wert aus der Konfiguration dient dann als Default-Wert und kann vom Redakteur überschrieben werden.
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 Parameter locale 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 Default Folder (Product Pages) und die Checkbox Editable Folder (Product Pages) werden ignoriert, wenn das Feld Product Page Template Mapping leer ist. Ist jedoch ein Mapping definiert, muss zwingend der Referenzname eines Struktur-Ordners angegeben oder die Checkbox aktiviert sein. Andernfalls ist die Erstellung neuer Produktseiten aufgrund der fehlenden Zuordnung zu einer Menüebene nicht möglich und es treten Fehler auf.
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]

Kategorien können innerhalb der Commerce Cloud als offline markiert werden. Diese Offline-Kategorien werden über den Storefront nicht ausgeliefert, wodurch für sie auch keine Vorschau erzeugt werden kann. Damit es dennoch möglich ist, über den FirstSpirit-Report auch Kategorieseiten für Offline-Kategorien zu pflegen, müssen für die dazugehörigen ISML-Templates Fallback-Kategorien angegeben werden. Innerhalb der Vorschau einer Seite einer Offline-Kategorie wird diese dann durch die konfigurierte Fallback-Kategorie ersetzt.

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 Feld Default 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 Default Folder (Category Pages) und die Checkbox Editable Folder (Category Pages) werden ignoriert, wenn das Feld Category Page Template Mappings leer ist. Ist jedoch ein Mapping definiert, muss zwingend der Referenzname eines Struktur-Ordners angegeben oder die Checkbox aktiviert sein. Andernfalls ist die Erstellung neuer Kategorieseiten aufgrund der fehlenden Zuordnung zu einer Menüebene nicht möglich und es treten Fehler auf.
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 Form http[s]://<image server host name> anzugeben. Produktbilder werden dann über den Image Service abgerufen.

Die Angabe der Image Service Base URL ist optional. Wird das Feld jedoch mit einer URL gefüllt, so muss diese Eingabe fehlerfrei sein. Andernfalls wird der jeweilige Report für die Produktsuche in beiden FirstSpirit-Clients ausgeblendet. Dies gilt auch dann, wenn die Client ID und die Base URL korrekt sind (siehe oben).

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.

category report
Abbildung 7. Kategorie-Report
Test Configuration

Über den Button Test Configuration lassen sich die eingetragenen Eingaben überprüfen. Dabei werden neben der Client ID, der Base URL und - wenn vorhanden - der Image 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 Projekt-Eigenschaften  Web-Komponenten.

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.

webcomponents
Abbildung 8. Web-Komponenten in den Projekt-Eigenschaften

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:

Beispielhafte web.xml 
<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 web.xml der im Tab Vorschau hinzugefügten Web-Komponente erfordert die Anpassung des Parameters dispatcher. Standardmäßig besitzt die web.xml den Wert FORWARD für diesen Parameter. Im Fall der Vorschau im SiteArchitect benötigt er jedoch den Wert REQUEST und ist entsprechend zu ersetzen.

Anpassung in der web.xml für die Vorschau im SiteArchitect 
<filter-mapping>
   <filter-name>ContentConnectPreviewFilter</filter-name>
   <url-pattern>/*</url-pattern>
   <dispatcher>REQUEST</dispatcher>
</filter-mapping>

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 ps_storefrontUrlBaseUrl darf innerhalb der Projekteinstellungen lediglich der Teil bis zur Locale und nicht die gesamte URL angegeben werden.

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.
Der Fallback-Wert beträgt 100.

storefront.downloader.socketTimeout

ps_storefrontDownloaderSocketTimeout

Die Eingabekomponente in den Projekteinstellungen zur Angabe der Zeitspanne (in Millisekunden), in der eine Antwort vom Storefront erwartet wird.
Der Fallback-Wert beträgt 10000.

storefront.downloader.retryCount

ps_storefrontDownloaderRetryCount

Die Eingabekomponente in den Projekteinstellungen zur Angabe der maximalen Anzahl der Verbindungsversuche.
Der Fallback-Wert beträgt 3.

Die Verwendung der folgenden beiden Parameter wird nur in Ausnahmefällen empfohlen, da diese die Zertifikatsprüfung für https-Anfragen umgehen. Dies kann notwendig sein, wenn Zertifikatsfehler eine Anzeige der Vorschau verhindern und das Problem nicht serverseitig behoben werden kann.
Parameter Defaultwert Beschreibung

storefront.downloader.certificatesCheck

true

Das Setzen dieses Parameters auf false deaktiviert Zertifikatsprüfungen für https-Anfragen. Dies hat zur Folge, dass zunächst alle https-Anfragen zur Anzeige der Vorschau blockiert werden. Um Anfragen gegen einzelne Seiten zu erlauben, ist der Hostname der entsprechenden Seiten in die sslWhitelist einzutragen.

storefront.downloader.sslWhitelist

leer

Über die sslWhitelist werden bei deaktivierter Zertifikatsprüfung die Hostnamen gepflegt, die von der Blockierung ausgenommen werden sollen. Mehrere Hostnamen sind als kommaseparierte Liste einzutragen.

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.
Der Fallback-Wert beträgt 500.

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.
Der Fallback-Wert beträgt 1.
Wenn ein Eintrag als veraltet markiert ist, wird er bei der nächsten Anfrage asynchron neu von der Commerce Cloud bezogen. Bis dieser Vorgang abgeschlossen ist, liefert der Cache den veralteten Eintrag, so dass keine Verzögerung entsteht.

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.
Der Fallback-Wert beträgt 24.
Wenn ein Eintrag als entfernbar markiert ist, kann er von neuen Elementen aus dem Cache verdrängt werden. Wird ein Element nach seiner Verdrängung erneut angefragt, muss es neu von der Commerce Cloud bezogen werden.

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.
Der Fallback-Wert ist eine leere Liste.
Jedes Element der Listenkomponente muss zwingend ein Textfeld mit dem Namen st_storefrontCacheExcludePattern besitzen, welches den regulären Ausdruck enthält.

Beispiel

Ein beispielhafter Ausschnitt aus der web.xml, in der zwei Parameter des Preview Filters konfiguriert sind, könnte wie folgt aussehen:

Beispielhafte web.xml 
<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.

Angabe der Auflösung 
$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 Projekt-Eigenschaften  Auflösungen angelegt und an den entsprechenden Stellen in den Absätzen angegeben.

resolutions
Abbildung 9. Auflösungen

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.

actions
Abbildung 10. Aktionen des Generierungsauftrags

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:

sfcc initializer
Abbildung 11. Auftragsaktion

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 Default URLs ausgewählt, der an dieser Stelle zwingend notwendig ist.

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.

content preparation
Abbildung 12. Aktion Content Preparation

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.

content libary
Abbildung 13. Teilgenerierung

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:

wdparameter
Abbildung 14. Eigenschaften
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.
Des Weiteren muss das Präfix dem Präfix für absolute Pfade der Vollgenerierung entsprechen.
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. Die mediaurl besitzt immer die folgende Struktur:

https://<SUBDOMAIN INSTANCE>.demandware.net/on/demandware.servlet/webdav/Sites/Libraries/<SITE ID|LIBRARY ID>/default/<PREFIX>

Die mediaurl muss auf ein existierendes Verzeichnis zeigen.
Wie schon bei der URL muss das Präfix der mediaurl dem Präfix für absolute Pfade der Vollgenerierung entsprechen.

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 oder false besitzen. Der Wert true bewirkt, dass alle Dateien und Verzeichnisse unterhalb der angegebenen URL vor dem Start der Übertragung gelöscht werden. Besitzt der Parameter den Wert false oder keinen Wert, bleiben alle bestehenden Dateien und Verzeichnisse unterhalb der angegebenen URL 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:

sfcc task
Abbildung 15. Auftragsaktion

Die Aktion stellt einen Konfigurationsdialog bereit, in dem neben einem frei zu vergebenen Namen zwei Parameter zu definieren sind:

import schedule task
Abbildung 16. Parameter der Auftragsaktion
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 Salesforce Commerce Cloud Importer ein erfolgreiches WebDAV-Deployment voraussetzt, darf auch dieser nicht im Fehlerfall ausgeführt werden.

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:

sfcc cleanup
Abbildung 17. Auftragsaktion

Neben einem frei zu vergebenden Namen für diese Auftragsaktion enthält der dazugehörige Konfigurationsdialog folgende Parameter:

cleanup schedule task
Abbildung 18. Parameter der Auftragsaktion
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.

Content asset cleanup  Enabled

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.
Slot configuration cleanup  Enabled

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 Salesforce Commerce Cloud Cleanup der letzten Aktion des Auftrags entsprechen. Aus demselben Grund setzt die Content-Bereinigung voraus, dass mit dieser Aktion ausschließlich Vollgenerierungen ausgeführt werden. Des Weiteren wird während der Ausführung des Cleanups von Replikationen innerhalb der Commerce Cloud abgeraten.

Da der Salesforce Commerce Cloud Cleanup eine erfolgreiche Ausführung des Job Schedules und somit den Import des Contents voraussetzt, darf auch dieser im Fehlerfall nicht ausgeführt werden.

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 Projekt-Eigenschaften  ContentCreator innerhalb des ServerManagers. Im Referenzprojekt ContentConnect Reference Project ist diese Einstellung bereits vorgenommen (vgl. Abbildung Element Status Provider).

statusprovider
Abbildung 19. Element Status Provider

Des Weiteren ist im Bereich Projekt-Eigenschaften  Optionen 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 scheduleName entsprechend anzupassen.

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 Extras  Rechte ändern 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 Everyone. Falls dies nicht gewünscht ist, muss eine manuelle Anpassung der Rechte erfolgen.

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.
p settings
Abbildung 20. Projekteinstellungen
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:
https://www.mystore.com/on/demandware.store/​Sites-YourShopHere-Site/
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 User storefront angegeben werden. Durch die Aktivierung des Toggles werden die Felder User und Password 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 <!-- [OPENING_PREFIX]<IDENTIFIER>[OPENING_SUFFIX] --> bzw. <!-- [CLOSING_PREFIX]<IDENTIFIER>[CLOSING_SUFFIX] -->.

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 Feld ps_storefrontUrlControllerFormField konfiguriert werden, in das bei Bedarf der Name des auszulesenden Formularfeldes einzutragen ist.

Innerhalb des Referenzprojekts besitzen alle Seitenvorlagen standardmäßig die Eingabekomponente pt_storefrontUrlController. Aus diesem Grund ist das Feld zur Konfiguration ihres Namens nicht in der Vorlage der Projekteinstellungen enthalten.
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 Komponente pt_storefrontUrlContextId aus.

Innerhalb des Referenzprojekts besitzen alle Seitenvorlagen standardmäßig die Eingabekomponente pt_storefrontUrlContextId. Aus diesem Grund ist das Feld zur Konfiguration ihres Namens nicht in der Vorlage der Projekteinstellungen enthalten.

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 XmlCollectorFactoryExecutable angepasst werden. Die dafür notwendigen Informationen sind im Javadoc der Klasse enthalten.

Informationen zum Aufruf des Produkt-Managers sind im Javadoc der Klasse ManagerFactoryExecutable enthalten.

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:

Syntax 
<!-- 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:

Formatvorlage 
$-- 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 (ServerManager  Server-Eigenschaften  Konvertierungs-Regeln).

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 Merchant Tools  Site Preferences  Storefront URL zu finden.

ContentConnect Preview Language

Um die Anzeigesprache im ContentCreator anzupassen, wird das folgende Pattern im HTML-Ausgabekanal benötigt:

Pattern 
$-- 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 /proxy benutzt werden, muss er sowohl in der Formatvorlage als auch in der web.xml angepasst werden. Das Kapitel Konfiguration der Web-Komponente enthält eine nähere Beschreibung zu den Konfigurationsmöglichkeiten über die web.xml.
Einbindung des Proxys 
$-- 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:

Ausgabe des Preview Filters für die Homepage mit /debugTimings=true 
<!--
*** TIMING STATS ***

LANGUAGE-DROPDOWN = 0ms
&lt;script [^&lt;]*?/dwux-init.js.*?&lt;/script&gt; = 0ms
[^&quot;'(]*/s/SiteGenesisGlobal_MF_SP/[^&quot;')]* = 53ms
Scanning for content replacement blocks = 1ms
CUSTOM-NAVIGATION-LEFT = 0ms
[^&quot;'(]*?/on/demandware.static/ = 113ms
(&lt;!-- dw.+?--&gt;) = 1ms
&lt;iframe.*?id=&quot;DW-SFToolkit&quot;&gt;.*?&lt;/iframe&gt; = 1ms
LANGUAGE-DROPDOWN-MOBILE = 0ms
&lt;a.*?sid=&quot;([^&quot;]*?)&quot; = 1ms
&lt;/head&gt; = 0ms
WILL-IGNORE-FOR-PREVIEW = 0ms
HOME-CATEGORIES = 0ms
href=(&quot;|').*.home[?] = 1ms
&lt;!-- Demandware Analytics(([sS]*)&lt;/script&gt;) = 1ms
&lt;!-- Demandware Active Data (([sS]*)&lt;/script&gt;) = 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:

Ausgabe des Preview Filters für die Homepage mit /debugCCFilter=true 
<!-- 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:

  1. Über die Adresse des iFrames im ContentCreator

  2. Über die Adresse einer Seite in der externen Vorschau

  3. Ü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 /debugTimings=true und /debugCCFilter=true nicht gemeinsam genutzt werden.

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:

  1. Eine Vollgenerierung zur Befüllung der XML-Kollektoren,

  2. eine Teilgenerierung zum Schreiben der Content Assets in eine XML-Datei und

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

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.

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.

Umleitung der Navigationslinks 
$-- 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.

custom navigation
Abbildung 22. Beispiel für die Erweiterung der Hauptnavigation

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 Left Navigation sowie die zugehörige Seite müssen einmalig manuell freigegeben werden.

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:

  1. Der Kopfbereich der Seite zeigt ein Banner, in dem entweder ein statisches Bild oder ein Slider eingebunden werden kann.

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

empty slot hp
Abbildung 23. Empty Slot

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

    • von Hot Spots.

    • eines einzelnen Blog-Artikels oder einer Übersicht aller Blog-Artikel.

    • 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
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:

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 Show Category Report aktiviert sein.
reports
Abbildung 24. Reports

Ü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 SFCC Context ID erforderlich, um die ID des referenzierten Objektes zu speichern. Das Feld darf versteckt sein. Sollte dieses Feld aus projektspezifischen Gründen einen abweichenden Bezeichner haben, so muss dieser innerhalb der Projekteinstellungen angegeben werden.

<CMS_INPUT_TEXT name="pt_storefrontUrlContextId" hidden="yes" useLanguages="no">
  <LANGINFOS>
    <LANGINFO lang="*" label="SFCC Context ID"/>
  </LANGINFOS>
</CMS_INPUT_TEXT>

Ein Objekt im Report kann bezüglich seiner Kategorie- bzw. Produktseite einen von drei Zuständen besitzen:

  1. Es ist keine Kategorie- oder Produktseite vorhanden und sie kann daher angelegt werden.

  2. Es ist bereits eine Kategorie- oder Produktseite vorhanden, die aufgerufen werden kann.

  3. 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 Seite anlegen.

report create normal
Abbildung 25. Anlegen einer Kategorie- bzw. Produktseite

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.

landingpagebutton
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 Struktur-Auswahl-Bereich im Dialog ausgeblendet. In diesem Fall ist in der Projekt-Komponente ebenfalls bereits ein Struktur-Ordner vordefiniert. Gleichzeitig wurde jedoch festgelegt, dass der Redakteur diese Vorbelegung nicht ändern können soll.

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:

report dialog newpage
Abbildung 27. Dialog zum Anlegen einer Kategorie- bzw. Produktseite

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

true, falls die Ausführung vor der Seitenerstellung durchgeführt wird, ansonsten false.

KeyProvider

keyProvider

Das Objekt, für das eine Kategorie- oder Produktseite angelegt wird. Hierbei handelt es sich entweder um ein Product oder um eine Category.

Eine Erläuterung der Schnittstellen KeyProvider, Product und Category findet sich in der mitgelieferten Javadoc-Dokumentation.

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 report jump icon, mit der die zugehörige Kategorie- oder Produktseite aufgerufen werden kann.

report jump to
Abbildung 28. Produkt mit Produktseite

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 Broken Reference. Ein Klick auf diese Schaltfläche öffnet einen Dialog, der weitere Informationen bereit hält.

report ref broken
Abbildung 29. Objekt mit Defekt

Versteckte Kategorien
Beim Aufruf des Kategorie-Reports werden standardmäßig sowohl sichtbare als auch versteckte Kategorien angezeigt. Durch das Entfernen des Hakens Include hidden categories kann die Ergebnisliste auf sichtbare Kategorien eingeschränkt werden:

category report hidden excluded
Abbildung 30. Ausblenden versteckter Kategorien

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:

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:

Formular 
<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:

Einbindung des PageHeaders 
<!-- 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.

Einbindung der Produkte der Unterkategorie 
<!-- 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

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.

Vorgabewert des Formularfeldes Velocity rendering controller appendix 
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:

Einbindung per CMS_INPUT_TOGGLE 
$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.

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.

slider
Abbildung 31. Slider

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:

Angabe der Auflösung 
$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.

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.

bannerimage
Abbildung 32. Banner Image mit der Decoration 'Top'

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:

Angabe der Auflösung 
$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.

grid
Abbildung 33. Grid Container

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.
grid opt
Abbildung 34. Grid Container - Layoutoptionen

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:

Angabe der Auflösung 
$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.

hotspot
Abbildung 35. Hot Spots

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.

article overview
Abbildung 36. Artikel-Übersicht

Das Teaserbild muss mit der Auflösung des ARTICLE_TEASER_IMAGE angelegt werden.

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.

    article tiles
    Abbildung 37. Article Tiles

    Fü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.

    product tiles
    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.

product tiles
Abbildung 39. Product Tiles

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.

langs
Abbildung 40. Sprachwechsel

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.

Sprachwechsel in der Formatvorlage Preview Generation 
$-- 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.

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 <a>-Tags erhält, sobald die zugehörige Verweisvorlage innerhalb eines CMS_INPUT_DOMs verwendet wird. Wird sie im Kontext eines CMS_INPUT_LINKs genutzt, erhält der Link keine <a>-Tags. Die Aktivierung des Toggles erfolgt über eine Regel.

Add link tags 
$CMS_IF(lt_linkTags)$
   <a href="$CMS_VALUE(lt_url)$"
    $CMS_IF(!lt_linktext.isEmpty)$ title="$CMS_VALUE(lt_linktext)$"$CMS_END_IF$
    target="_blank">
      $CMS_VALUE(lt_linktext, default: "Link")$
   </a>
$CMS_ELSE$
   href="$CMS_VALUE(lt_url)$"
   $CMS_IF(!lt_linktext.isEmpty)$ title="$CMS_VALUE(lt_linktext)$"$CMS_END_IF$
   target="_blank"
$CMS_END_IF$

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 Best Matches dar - unabhängig von einer ausgewählten Sorting Rule.

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.

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.

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.

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 Schedule Type, für den unter anderem der Wert Default gewählt werden kann. In diesem Fall ist zwingend auch ein Rank anzugeben, da andernfalls Salesforce-seitige Fehler auftreten. Ohne diese Angabe ist eine Freigabe der zugehörigen Seite nicht möglich.

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:

  1. entweder für einen Absatz mehrere Slot-Konfigurationen

  2. 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.
variants
Abbildung 41. Variantenselektion

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.

Aufruf des MPP Body Wrappers für den Main-Bereich der Homepage 
<!-- 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.

publish wf
Abbildung 42. Publish-Arbeitsablauf im ContentCreator

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.

wf options
Abbildung 43. Optionen des Publish-Arbeitsablaufs

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.