FirstSpirit dient der Erstellung vielseitiger und projektspezifischer Inhalte. Mit dem Modul FirstSpirit Connect for Spryker Commerce OS wurde die Möglichkeit geschaffen, diese Inhalte in das E-Commerce-Shopsystem Spryker Commerce OS zu übertragen und dort zu nutzen.
Im restlichen Dokument wird anstelle von "Spryker Commerce OS" die Kurzform "Spryker" benutzt. Des Weiteren ist die gesamte Dokumentation auf die Anbindung des Spryker B2C Demo Shops in der Version 202108.0 ausgerichtet. Die Erwähnung des Shops bezieht sich somit ausschließlich auf den B2C Demo Shop. |
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:
Ein Bestandteil der Auslieferung des FirstSpirit Connect for Spryker Commerce OS-Moduls ist das Referenzprojekt FirstSpirit Connect Reference Project, das in Form eines GitHub-Repositories zur Verfügung steht. 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.
Das vorliegende Dokument richtet sich sowohl an Spryker- als auch an FirstSpirit-Entwickler, die mithilfe der Dokumentation die Integration durchführen können sollen. Es wird vorausgesetzt, dass der Leser sicher in der Verwendung FirstSpirits und Sprykers sowie des CaaS und des Omnichannel Managers ist. |
FirstSpirit Connect stellt Redakteuren die folgenden Möglichkeiten zur Verfügung:
Die entsprechenden Funktionalitäten werden mit der Installation und Konfiguration des Moduls 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 Spryker im Rahmen eines Deployments zum Import bereitgestellt. Spryker integriert die Informationen in den Shop.
Für Spryker 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 Spryker nicht.
Die Verbindung von FirstSpirit und Spryker wird über eine Architektur aus verschiedenen Komponenten realisiert (vgl. Abbildung Architektur).
Diese Komponenten sind:
die auf dem FirstSpirit-Server installierten Module:
Das Zusammenspiel der einzelnen Komponenten erfolgt immer nach dem folgenden Schema:
Spryker stellt somit die Hauptkomponente dieser Architektur dar. Neben der Bereitstellung sämtlicher Shop-Funktionalitäten importiert es die in FirstSpirit erstellten bzw. gepflegten Inhalte aus dem Online CaaS und integriert sie in den Shop. Zwischen FirstSpirit und Spryker existiert lediglich eine lose Kopplung. Die beiden Systeme arbeiten hauptsächlich parallel zueinander.
Das FirstSpirit Connect-Modul bietet die Möglichkeit, redaktionelle Inhalte FirstSpirit-seitig zu pflegen und diese anschließend per Deployment an Spryker 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.
Ähnlich wie in FirstSpirit basieren Seiten in Spryker 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 FirstSpirit Connect Reference Project werden die CMS Slots aus Spryker durch die Inhaltsbereiche einer Seitenvorlage in FirstSpirit repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils einem CMS Block entsprechen.
Mit FirstSpirit lassen sich somit CMS Blöcke generieren, die über CMS Slots in einer Seite dargestellt werden.
Die mit dem FirstSpirit Connect-Modul realisierte Integration sieht FirstSpirit-seitig lediglich die Erzeugung und Pflege der redaktionellen Inhalte sowie ihre Publizierung in Form von CMS Blöcken vor. Spryker bestimmt jedoch weiterhin das Rahmenwerk einer Seite, deren CMS Slots die generierten Blöcke einbinden.
Für die Darstellung der Vorschau einer Seite ermittelt FirstSpirit daher ihre aktuelle Ansicht in der Storefront. Diese fragt ihrerseits die redaktionellen Inhalte aus dem Preview CaaS ab und ersetzt die entsprechenden CMS Blöcke. FirstSpirit stellt das Resultat mithilfe des Omnichannel Managers im ContentCreator dar.
Die Übertragung der FirstSpirit-seitig erstellten Inhalte in den Live-Stand erfolgt durch Spryker. Dafür müssen die Inhalte bereitgestellt werden, was in Form des Online CaaS geschieht. Aus ihm importiert Spryker die redaktionellen Inhalte und persistiert sie in seinem Datensystem.
Für den Einsatz des FirstSpirit Connect-Moduls müssen die folgenden technischen Voraussetzungen erfüllt sein:
die Module FirstSpirit Connect, Content as a Service und Omnichannel Manager in der jeweils aktuellen Version
Category CMS Blocks
und Product CMS Blocks
Bei der Verwendung des mitgelieferten Referenzprojekts FirstSpirit Connect Reference Project ist außerdem das BasicWorkflows-Modul in der jeweils aktuellen Version erforderlich.
Dieses Kapitel enthält Hinweise, die bei der Verwendung des FirstSpirit Connect-Moduls zu beachten sind.
Die in FirstSpirit gepflegten Inhalte werden während eines Deployments mithilfe des Importers aus dem Online CaaS abgefragt. Der Importer überträgt die Daten nach Spryker und persistiert sie Backend-seitig in dessen Datensystem.
Da der Online CaaS potentiell eine große Datenmenge enthält, erfordert die Übertragung der Inhalte eine gewisse Zeitspanne. Frühzeitige Timeouts während des Imports sind daher zu vermeiden. Aus diesem Grund ist der Webserver der Glue-API so zu konfigurieren, dass er http-Requests für eine Dauer von mindestens 60 Sekunden erlaubt. Zusätzlich ist FirstSpirit-seitig der Socket-Timeout bei der Kommunikation mit der Glue-API entsprechend anzupassen (siehe Kapitel Konfiguration der Projekt-Komponente).
Die CaaS-Generierungen setzen voraus, dass im FirstSpirit-Projekt eine Vorlage für die Projekteinstellungen gepflegt ist. Andernfalls bricht der Generierungsauftrag frühzeitig ab und meldet den folgenden Fehler in den Auftragslogs:
Exception bei fehlender Einstellungsseite.
error during script execution : java.lang.IllegalStateException: Invalid value for key 'usedCaasProjects' - Value is not a HashMap (null). This can happen when a deployment does not include a single PageRef (blue), which is not supported (e.g. remote-media-project).
Aus diesem Grund muss im Projekt eine entsprechende Vorlage existieren und diese in den Projektoptionen im ServerManager
konfiguriert sein, selbst wenn sie keinen Inhalt besitzt.
Wie zuvor erwähnt ist die gesamte Dokumentation auf die Anbindung des Spryker B2C Demo Shops ausgerichtet. Bei dessen Verwendung können einige Schwierigkeiten auftreten, deren Ursache weder das FirstSpirit Connect-Modul noch die Integration ist. Dennoch werden sie nachfolgend aufgelistet und eine mögliche Lösung skizziert.
Vorschauseite wird im ContentCreator nicht gefunden
Kann der ContentCreator die Vorschauseite nicht finden, ist das Zertifikat der Seite ungültig oder nicht vorhanden. In diesem Fall muss die Seite in einem separaten Browser-Tab geöffnet werden, um das SSL-Zertifikat zu erneuern und die Anzeige der Seite zu erlauben. Anschließend ist die Vorschauseite im ContentCreator wieder sichtbar.
Fehlender RAM bei Composer-Aufrufen
Für PHP existiert standardmäßig ein RAM-Limit, das für die Ausführung von Composer-Aktionen jedoch zu niedrig ist.
Aus diesem Grund muss das Limit, das in der Konfigurationsdatei php.ini
im Verzeichnis etc/php/7.2/cli
definiert ist, deaktiviert werden:
Deaktivierung des RAM-Limits.
[...] set memory_limit=-1 [...]
FirstSpirit dient der Erstellung und Pflege redaktioneller Daten, die in den CaaS übertragen und von diesem persistiert werden.
Um die Daten zu integrieren, benötigt Spryker eine Zugriffsmöglichkeit auf den CaaS.
Diese wird durch die Spryker-Module firstspirit-preview
und firstspirit-caas
bereitgestellt, die eine Spryker-seitige Installation und Konfiguration erfordern.
Das Modul firstspirit-preview
ermöglicht die Darstellung der Storefront im ContentCreator.
Die Abfrage der Inhalte aus dem CaaS erfolgt mithilfe des Moduls firstspirit-caas
.
Die nachfolgenden Kapitel beschreiben alle notwendigen Schritte für die Installation und die Konfiguration sowie zusätzlich erforderliche Spryker-seitige Erweiterungen.
Sowohl die Abfrage der CaaS-Inhalte durch Spryker als auch ihre Darstellung und Bearbeitung im ContentCreator erfolgt mithilfe verschiedener Spryker-Module. Diese erfordern eine Spryker-seitige Installation sowie eine Erweiterung der Konfiguration. Des Weiteren benötigen sie verschiedene JavaScript- und CSS-Dateien, die Spryker-seitig einzubinden sind.
Die nachfolgenden Kapitel beschreiben die Durchführung der notwendigen Schritte.
Die Pflege von Shop-Inhalten im ContentCreator erfordert die Installation mehrerer Spryker-Module, die in Form von zip-Dateien in der Auslieferung enthalten sind.
Sie müssen in einem beliebigen Verzeichnis unterhalb des Spryker-Projektverzeichnisses gespeichert werden, das Composer als weiteres Repository bekannt zu machen ist.
Dies geschieht über den im Projektverzeichnis auszuführenden Befehl, der die composer.json
-Datei des Spryker-Servers entsprechend erweitert.
Erweiterung der composer.json-Datei.
composer config repo.espirit artifact ./PATH-TO-DIRECTORY
Die zu installierenden Spryker-Module nutzen den Namespace ESpirit
, der Spryker bekannt zu machen ist.
Dafür ist in der Environment-unabhängigen Datei config_default.php
im Verzeichnis config/Shared
eine Erweiterung der KernelConstants
erforderlich:
Erweiterung der KernelConstants.
$config[KernelConstants::CORE_NAMESPACES] = [ 'SprykerShop', 'SprykerEco', 'Spryker', 'Generated', 'ESpirit' ];
Die Session Konstante für die Same Site Cookies muss nach der $config[KernelConstants::CORE_NAMESPACES]
gesetzt sein:
Session Konstante.
$config[SessionConstants::YVES_SESSION_COOKIE_SAMESITE] = 'None';
Darüber hinaus muss die Domäne zur Whitelist-Konfiguration hinzugefügt werden:
Erweiterung der KernelConstants.
$config[KernelConstants::DOMAIN_WHITELIST] = array_merge($trustedHosts, [ ... 'demo-spryker.e-spirit.hosting', ]);
Aktivieren Sie SSL in der yaml Datei deploy.dev.yml
:
Aktivierung von SSL.
docker: ssl: enabled: true redirect: true
Die Installation der Spryker-Module erfolgt anschließend über die nachfolgenden Befehle, die ebenfalls im Spryker-Projektverzeichnis in der angegebenen Reihenfolge auszuführen sind.
Installationsbefehle.
composer require e-spirit/firstspirit-caas composer require e-spirit/firstspirit-preview composer require e-spirit/firstspirit-preview-navigation composer require e-spirit/firstspirit-data-state-writer composer require e-spirit/firstspirit-data-cleanup composer require e-spirit/firstspirit-data-import composer require e-spirit/firstspirit-data-inconsistency-check composer require e-spirit/firstspirit-data-rest-api composer require e-spirit/firstspirit-cms-data-connector composer require e-spirit/firstspirit-cms-data-storage
Die Befehle laden die Module aus dem erstellten Repository und installieren sie automatisch.
Der letzte Schritt der Installation entspricht der Generierung der Transfer-Objekte des Data Import-Moduls sowie der Erzeugung des Datenbankschemas, das im CMS Block Data Connector-Modul enthalten ist:
Generierung der Transfer-Objekte und Erzeugung des Datenbankschemas.
vendor/bin/console transfer:generate vendor/bin/console propel:install
Das FirstSpirit Connect-Modul stellt unterschiedliche Möglichkeiten bereit, auf Shop-Inhalte aus Spryker zuzugreifen und diese in FirstSpirit zu verwenden. Diese Möglichkeiten werden im weiteren Verlauf dieser Dokumentation anhand des mitgelieferten Referenzprojekts in Form von Anwendungsfällen beschrieben.
Besteht der Wunsch, die im Referenzprojekt enthaltenen Absatz- und Seitenvorlagen zu verwenden, setzt dies Spryker-seitig unterschiedliche Twig-Templates voraus.
Die Absätze entsprechen Spryker-seitig verschiedenen Molekülen, Atomen und Organismen, die im Ordner FirstSpiritReferenceComponents
zusammengefasst sind.
Dieser ist ein Bestandteil der Auslieferung und wird in Form eines weiteren Spryker-Moduls bereitgestellt, das über den folgenden Befehl zu installieren ist:
Installationsbefehl.
composer require e-spirit/firstspirit-reference-components
Damit die mit dem Modul zur Verfügung gestellten Komponenten Spryker-seitig einsetzbar sind, muss der ihnen zugehörige Pfad in Spryker bekannt gemacht werden.
Dies erfolgt über die Anpassung der Dateien settings.js
und tsconfig.json
.
Innerhalb der settings.js
-Datei im Verzeichnis Spryker-Verzeichnis/frontend
ist eine Erweiterung des Kontextes notwendig:
Anpassung der settings.js-Datei.
[...] dirs: [ join(globalSettings.context, paths.core), join(globalSettings.context, './vendor/e-spirit'), join(globalSettings.context, paths.eco), join(globalSettings.context, paths.project) ],
Der tsconfig.json
-Datei im Spryker-Verzeichnis
ist ein weiterer Include hinzuzufügen:
Anpassung der tsconfig.json-Datei.
[...] "include": [ "./vendor/spryker-shop/**/*", "./vendor/spryker-eco/**/*", "./src/Pyz/Yves/**/*", "./vendor/e-spirit/**/*" ],
Das generische Twig-Template fs_molecule_block.twig
steuert die Ausgabe der mitgelieferten Moleküle.
Es ist ein Bestandteil der in der Auslieferung enthaltenen zip-Datei b2c-demo-shop-extensions-<VERSION>.zip
und muss Spryker-seitig unter dem Pfad src/Pyz/Shared/CmsBlock/Theme/default/template
abgelegt werden.
Die Spryker-seitige Einbindung der Twig-Templates erfolgt über den nachfolgenden Befehl, der abschließend im Spryker-Projektverzeichnis auszuführen ist.
Einbindung der Twig-Templates.
npm run yves
Die FirstSpirit-Vorlagen ermöglichen die Erweiterung bestehender statischer Seiten, Produkt- und Kategorieseiten
sowie die Erzeugung dynamischer Inhaltsseiten oder eines Magazins.
Das Referenzprojekt enthält dafür die Seitenvorlagen homepage
, productpage
, categorypage
, contentpage
und magazine_detail_page
.
Gleichzeitig müssen Spryker-seitig die folgenden Twig-Templates existieren:
Das Twig-Template home.twig
, das unter dem Pfad src/Pyz/Yves/HomePage/Theme/default/views/home
zu finden ist, benötigt einige Anpassungen.
Diese sind in der Beschreibung statischer Seiten erläutert.
Dasselbe gilt für die Twig-Templates pdp.twig
, page-layout-catalog.twig
und catalog-with-cms-slot.twig
, die für die Bearbeitung von Produkt- und Kategorieseite erforderlich sind.
Sie sind in Spryker unter den folgenden Pfaden gespeichert:
src/Pyz/Yves/ProductDetailPage/Theme/default/views/pdp
src/Pyz/Yves/CatalogPage/Theme/default/templates/page-layout-catalog
src/Pyz/Yves/CatalogPage/Theme/default/views/catalog-with-cms-slot
Die übrigen Twig-Templates sind ein Bestandteil der in der Auslieferung enthaltenen zip-Datei und unter den folgenden Pfaden abzulegen:
src/Pyz/Yves/CmsBlockWidget/Theme/default/components/molecules/product-cms-block
src/Pyz/Shared/Cms/Theme/default/templates/fs-content-page
Sowohl in Spryker als auch in FirstSpirit basieren Seiten auf einer Struktur unterschiedlicher Komponenten. Zu diesen zählen Spryker-seitig die CMS Slots, die in FirstSpirit durch die Inhaltsbereiche einer Seitenvorlage repräsentiert werden. Die Slots binden CMS Blöcke ein, die jeweils einem FirstSpirit-Absatz entsprechen.
Das Twig-Template home.twig
stellt Spryker-seitig eine statische Seite dar und wird im mitgelieferten Referenzprojekt durch die Seitenvorlage homepage
abgebildet.
Diese besitzt die Inhaltsbereiche fs_slt_2
und fs_slt_3
, für die in Spryker die zugehörigen Slots existieren müssen.
Der Import der Slots erfolgt mithilfe der Datei cms_slot.csv
, die in Spryker im Verzeichnis /data/import/common/common
gespeichert ist.
Sie muss durch die gleichnamige Datei aus der Auslieferung ersetzt werden, die zusätzlich die folgenden beiden Zeilen enthält:
Import-Datei cms_slot.csv.
template_path,slot_key,content_provider,name,description,is_active [...] @HomePage/views/home/home.twig,fs-slt-2,FirstSpiritCmsSlotBlock,Banner,Banner content section for the homepage.,1 @HomePage/views/home/home.twig,fs-slt-3,FirstSpiritCmsSlotBlock,Homepage Content,Homepage main content section.,1
Die Übernahme der neuen Slots erfolgt anschließend über den nachfolgenden Befehl, der im Spryker-Projektverzeichnis auszuführen ist.
Importbefehl.
vendor/bin/console data:import cms-slot
Die Erstellung und Bearbeitung redaktioneller Inhalte findet FirstSpirit-seitig im ContentCreator statt. In diesem ist mithilfe des Omnichannel Manager die Storefront eingebettet.
Um die Darstellung der Shop-Inhalte aus Spryker im ContentCreator zu ermöglichen, ist eine Erweiterung der umgebungsspezifischen Konfiguration erforderlich.
Dafür muss in der Datei config_default-[environment].php
im Verzeichnis config/Shared
die Definition eines Tokens sowie die Angabe des Hosts und Ports der FirstSpirit-Startseite erfolgen.
Außerdem erfordert der Betrieb des CaaS die Angabe einiger Parameter.
Diese Parameter sind sowohl für den Produktivbetrieb als auch für den Einsatz des CaaS für die Vorschau notwendig.
Erweiterung der Konfiguration.
// ----------- FirstSpirit Preview Configurations $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_AUTHENTICATION_INIT_TOKEN] = '<ADD TOKEN>'; $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_WEB_HOST] = '<ADD FS PREVIEW HOST>'; $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_CAAS_CONTENT_PAGE_COLLECTION] = '<CAAS COLLECTION>'; $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_CAAS_CATEGORY_PAGE_COLLECTION] = '<CAAS COLLECTION>'; $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_CAAS_PRODUCT_PAGE_COLLECTION] = '<CAAS COLLECTION>'; $config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_DISPLAY_BLOCK_RENDER_ERRORS] = true; // ----------- FirstSpirit Data Import Configurations $config[FirstSpiritDataImportConstants::FIRSTSPIRIT_DATA_IMPORT_BLOCK_DATA_CAAS_PATH] = '/_aggrs/blocks'; $config[FirstSpiritDataImportConstants::FIRSTSPIRIT_CAAS_REQUEST_PAGESIZE] = <VALUE>; $config[FirstSpiritDataImportConstants::FIRSTSPIRIT_DATA_IMPORT_URL_TEMPLATE] = '/{locale}/{url}'; // ----------- FirstSpirit CaaS Configurations $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_HOSTNAME_PREVIEW] = '<ADD CAAS HOST>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_PORT_PREVIEW] = '<ADD CAAS PORT>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_SCHEME_PREVIEW] = '<ADD CAAS SCHEME>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_APIKEY_PREVIEW] = '<ADD APIKEY>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_DATABASE_PREVIEW] = '<ADD CAAS DATABASE>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_HOSTNAME_ONLINE] = '<ADD CAAS HOST>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_PORT_ONLINE] = '<ADD CAAS PORT>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_SCHEME_ONLINE] = '<ADD CAAS SCHEME>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_APIKEY_ONLINE] = '<ADD APIKEY>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_DATABASE_ONLINE] = '<ADD CAAS DATABASE>';
Die config_default-[environment]_[storename].php
Dateien können angepasst werden, um verschiedene Konfigurationen für verschiedene Stores zu erstellen:
Erweiterung der Konfiguration für einen spezifischen Store.
<?php use ESpirit\Shared\FirstSpiritCaaS\FirstSpiritCaaSConstants; use ESpirit\Shared\FirstSpiritDataImport\FirstSpiritDataImportConstants; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_DATABASE_PREVIEW] = '<ADD CAAS DATABASE FOR SPECIFIC STORE>'; $config[FirstSpiritCaaSConstants::FIRSTSPIRIT_CAAS_DATABASE_ONLINE] = '<ADD CAAS DATABASE FOR SPECIFIC STORE>'; $config[FirstSpiritDataImportConstants::FIRSTSPIRIT_DATA_IMPORT_URL_TEMPLATE] = '/{locale}/{store}/{url}';
Die Konfiguration FirstSpiritDataImportConstants::FIRSTSPIRIT_DATA_IMPORT_URL_TEMPLATE
legt fest, wie die URLs für Inhaltsseiten aus FirstSpirit in Spryker generiert werden. Der Standard ist hierbei /{locale}/{url}
, wobei locale
die Sprache der Seite und url
die von dem Editor in FirstSpirit hinterlegte URL abbildet. Zusätzlich kann die Variable store
verwendet werden, welche das Kürzel für den verwendeten Store beinhaltet.
Die Anpassungen an der URL-Struktur müssen im Ausgabekanal der Seitenvorlage für Inhaltsseiten wiedergespiegelt werden.
Der Token dient der Authentifizierung und ist während der FirstSpirit-seitig durchzuführenden Konfiguration als Query-Parameter der externen Vorschau-URL in den ContentCreator-Einstellungen anzugeben. Er kann beliebig definiert werden.
Die Angabe des vollqualifizierten Hosts der FirstSpirit-Startseite (z. B. http://localhost:8000
) ist eine Anforderung des noch zu installierenden FsCookieEventDispatcherPlugin.
Es nutzt die Information, um die Vorschauanzeige im ContentCreator zu erlauben.
Die Nennungen der CaaS Collections für Inhalts-, Kategorie-, und Produktseiten ermöglichen den Zugriff auf die im Preview CaaS gespeicherten redaktionellen Inhalte und ihre Darstellung im ContentCreator.
Der Error-Parameter ermöglicht die Anzeige von Fehlerausgaben in der Seite.
Die Verwendung des Werts true
ist daher nur für Dev- und QA-Instanzen sinnvoll.
Der Pfad dient der Abfrage und Persistierung der im Online CaaS gespeicherten Block-Daten.
Er wird vom FsDataImportConsole
-Befehl benötigt, der bei einer FirstSpirit-Veröffentlichung den Importer anstößt.
Mithilfe der Pagesize lässt sich die Anzahl der Dokumente definieren, die der CaaS bei einem Request zurückgibt.
Der Parameter ist optional und darf einen Wert von 1
bis 100
besitzen.
Standardmäßig ist für ihn der Maximalwert von 100
definiert.
Der CaaS-Host, der zugehörige Port und das zu verwendende Scheme (http
oder https
) ermöglichen Spryker die Verbindung zum CaaS.
Der Zugriff auf die in ihm gespeicherten Daten setzt einen gültigen API Key voraus, der das Leserecht auf das entsprechende Projekt benötigt.
Der Name des im CaaS gespeicherten Projekts ist in der Konfigurationsdatei als Wert des Database-Parameters anzugeben.
Weitere Informationen zur Verwendung des CaaS sind in der Content as a Service-Dokumentation enthalten. |
Damit die verwendete Klassen FirstSpiritPreviewConstants
, FirstSpiritDataImportConstants
und FirstSpiritCaaSConstants
gefunden werden, sind sie per use-Statement in die Konfigurationsdatei einzubinden:
Einbindung der Klassen.
use ESpirit\Shared\FirstSpiritPreview\FirstSpiritPreviewConstants; use ESpirit\Shared\FirstSpiritDataImport\FirstSpiritDataImportConstants; use ESpirit\Shared\FirstSpiritCaaS\FirstSpiritCaaSConstants;
Der Omnichannel Manager ermöglicht die Darstellung und Bearbeitung externer Inhalte im ContentCreator, wofür er einige vorschauspezifische Data-Attribute benötigt. Darüber hinaus setzt er Spryker-seitig eine vorschauspezifische JavaScript-Datei voraus, die das FirstSpiritPreview-Modul einbindet.
Die JavaScript-Datei ist dem Twig-Template hinzuzufügen, das für das Basis-Layout aller Shopseiten verantwortlich ist.
Im Standardfall handelt es sich dabei um das page-blank.twig
-Template, das unter dem Pfad src/Pyz/Yves/ShopUi/Theme/default/templates/page-blank
abgelegt ist.
In demselben Template muss außerdem die Ermittlung der Data-Attribute durch die Twig-Funktion fsIncludeDataAttributes
stattfinden.
Die Anpassung des Twig-Templates erfolgt über den Aufruf der Twig-Funktionen fsIncludeDataAttributes
und fsIncludeOcmScript
sowie über die Erweiterung der Template-Daten.
Der Twig-Funktion fsIncludeOcmScript
kann als optionaler Parameter die URL zu einer lokalen Kopie der JavaScript-Datei übergeben werden.
Standardmäßig ermittelt sie die Datei aus dem CDN.
Anpassung des Twig-Templates.
{% extends template('page-blank', '@SprykerShop:ShopUi') %} {% block attributes %} {{ fsIncludeDataAttributes() }} {% endblock %} {% block template %} {% set isNewFrontendBuildSupported = true %} [...] {% block footerScripts %} {% include molecule('check-touch') only %} {{ fsIncludeOcmScript() }} {{ parent() }} {% endblock %}
Es sind weitere Anpassungen erforderlich, die im folgenden Abschnitt beschrieben werden.
Alle CMS-bezogenen Typen müssen der Datei DataImportConfig
im Verzeichnis src/Pyz/Zed/DataImport
hinzugefügt werden, um Probleme mit der Aggregationsschleife zu vermeiden.
Erweiterung der DataImportConfig.
[...] public const IMPORT_TYPE_CMS_BLOCK_STORE = 'cms-block-store'; public const IMPORT_TYPE_CMS_BLOCK_CATEGORY_POSITION = 'cms-block-category-position'; public const IMPORT_TYPE_DISCOUNT = 'discount'; [...] $customImportTypes = [ StockAddressDataImportConfig::IMPORT_TYPE_STOCK_ADDRESS, static::IMPORT_TYPE_CMS_PAGE, static::IMPORT_TYPE_CMS_BLOCK, static::IMPORT_TYPE_NAVIGATION, ]; [...]
Deaktivieren Sie das Anhängen von Präfixen für CMS-Seiten-URLs, indem Sie die Datei CmsConfig
im Verzeichnis src/Pyz/Zed/Cms
anpassen.
Anpassung der CmsConfig.
[...] public function appendPrefixToCmsPageUrl(): bool { return false; } [...]
Erstellen Sie eine PHP-Datei mit dem Namen CmsSlotGuiCommunicationFactory
im neu anzulegenden Verzeichnis src/Pyz/Zed/CmsSlotGui/Communication
und eine weitere PHP-Datei mit dem Namen PyzSlotTable
im neu anzulegenden Verzeichnis src/Pyz/Zed/CmsSlotGui/Communication/Table
mit folgendem Inhalt, um die Backoffice-Tabelle überschreiben zu können.
CmsSlotGuiCommunicationFactory.
<?php /** * Copyright © 2016-present Spryker Systems GmbH. All rights reserved. * Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file. */ namespace Pyz\Zed\CmsSlotGui\Communication; use Pyz\Zed\CmsSlotGui\Communication\Table\PyzSlotTable; use Spryker\Zed\CmsSlotGui\Communication\Table\SlotTable; use Spryker\Zed\CmsSlotGui\Communication\CmsSlotGuiCommunicationFactory as SprykerCmsSlotGuiCommunicationFactory; class CmsSlotGuiCommunicationFactory extends SprykerCmsSlotGuiCommunicationFactory { /** * @param int|null $idSlotTemplate * * @return \Spryker\Zed\CmsSlotGui\Communication\Table\SlotTable */ public function createSlotListTable(?int $idSlotTemplate = null): SlotTable { return new PyzSlotTable( $this->getCmsSlotQuery(), $this->getTranslatorFacade(), $idSlotTemplate ); } }
PyzSlotTable.
<?php /** * Copyright © 2016-present Spryker Systems GmbH. All rights reserved. * Use of this software requires acceptance of the Evaluation License Agreement. See LICENSE file. */ namespace Pyz\Zed\CmsSlotGui\Communication\Table; use Spryker\Zed\CmsSlotGui\Communication\Table\SlotTable as SprykerSlotTable; class PyzSlotTable extends SprykerSlotTable { /** * @return bool */ protected function isContentProviderColumnVisible(): bool { if ($this->contentProviderTypesNumber === null) { $this->contentProviderTypesNumber = (clone $this->cmsSlotQuery) ->select(static::COL_CONTENT_PROVIDER) ->distinct() ->count(); } return $this->contentProviderTypesNumber > 1; } }
Zusätzlich zur Installation der Spryker-Module ist die Einbindung folgender Plugins erforderlich:
FsCookieEventDispatcherPlugin
FsTwigExtensionPlugin
FirstSpiritPreviewSlotBlockWidgetCmsSlotContentPlugin
FirstSpiritDataImportsResourceRoutePlugin
FirstSpiritDataCleanupsResourceRoutePlugin
FirstSpiritCmsPagesResourceRoutePlugin
Das FsCookieEventDispatcherPlugin
nutzt den in der Konfigurationsdatei config_default-[environment].php
angegebenen Hosts der FirstSpirit-Startseite, um die Anzeige der Storefront im ContentCreator zu erlauben.
Dafür prüft es, ob Storefront-Abfragen den ebenfalls in der Konfigurationsdatei definierten Token enthalten bzw. ob ein eingeloggter Benutzer existiert.
Trifft eine der beiden Optionen zu, setzt das Plugin den Content Security Policy Header und erweitert die Cookie Header.
Das FsTwigExtensionPlugin
ermöglicht die FirstSpirit-seitige Pflege von CMS Placeholdern und CMS Blöcken.
Dafür greift es auf Informationen zu, die der noch zu installierende CmsController bereitstellt.
Die Informationen werden für das Mapping zwischen den in FirstSpirit und den in Spryker gespeicherten Daten benötigt.
Die Einbindung der beiden Plugins erfolgt mithilfe des folgenden Codes, der dem EventDispatcherDependencyProvider
im Verzeichnis src/Pyz/Yves/EventDispatcher/EventDispatcherDependencyProvider
und dem ShopApplicationDependencyProvider
im Verzeichnis src/Pyz/Yves/ShopApplication
hinzuzufügen ist.
Erweiterung des EventDispatcherDependencyProvider.
use ESpirit\Yves\FirstSpiritPreview\Plugin\EventDispatcher\FsCookieEventDispatcherPlugin; [...] protected function getEventDispatcherPlugins(): array { return [ [...] new FsCookieEventDispatcherPlugin(), ]; }
Erweiterung des ShopApplicationDependencyProviders.
use ESpirit\Yves\FirstSpiritPreview\Plugin\FsTwigExtensionPlugin; use ESpirit\Yves\FirstSpiritPreview\Plugin\HeadersSecurityExtensionPlugin; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritCategoryLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritContentLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritExternalLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductFlyoutWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductLinkWidget; [...] protected function getGlobalWidgets(): array { return [ [...] FirstSpiritCategoryLinkWidget::class, FirstSpiritProductLinkWidget::class, FirstSpiritContentLinkWidget::class, FirstSpiritExternalLinkWidget::class, FirstSpiritProductFlyoutWidget::class, ]; } [...] protected function getApplicationPlugins(): array { return [ [...] new FsTwigExtensionPlugin() ]; }
Das FirstSpiritPreviewSlotBlockWidgetCmsSlotContentPlugin
ermöglicht die Ausgabe aller in einem Slot enthaltenen Blöcke.
Im Gegensatz zu dem in Spryker enthaltenen CmsSlotBlockWidget
, das sich auf die Ausgabe der Spryker-Daten beschränkt, berücksichtigt das Plugin ausschließlich die Informationen aus dem CaaS.
Die Einbindung des Plugins erfordert eine Erweiterung des ShopCmsSlotDependencyProviders
im Verzeichnis src/Pyz/Yves/ShopCmsSlot
.
Erweiterung des ShopCmsSlotDependencyProviders.
<?php namespace Pyz\Yves\ShopCmsSlot; use ESpirit\Yves\FirstSpiritPreviewSlotBlockWidget\FirstSpiritPreviewSlotBlockWidgetConfig; use ESpirit\Yves\FirstSpiritPreviewSlotBlockWidget\Plugin\FirstSpiritPreviewSlotBlockWidget\ FirstSpiritPreviewSlotBlockWidgetCmsSlotContentPlugin; [...] class ShopCmsSlotDependencyProvider extends SprykerShopShopCmsSlotDependencyProvider { protected function getCmsSlotContentPlugins(): array { return [ CmsSlotBlockConfig::CMS_SLOT_CONTENT_PROVIDER_TYPE => new CmsSlotBlockWidgetCmsSlotContentPlugin(), FirstSpiritPreviewSlotBlockWidgetConfig::FS_CMS_SLOT_CONTENT_PROVIDER_TYPE => new FirstSpiritPreviewSlotBlockWidgetCmsSlotContentPlugin(), ]; } }
Das FirstSpiritDataImportsResourceRoutePlugin
und das FirstSpiritDataCleanupsResourceRoutePlugin
stellen jeweils einen API-Endpunkt bereit.
Mithilfe dieses Endpunkts kann der FirstSpirit-seitige Deployment-Auftrag den Importer ansprechen.
Das FirstSpiritDataImportsResourceRoutePlugin
steuert auf diesem Weg die Übertragung der redaktionellen Inhalte aus dem Online CaaS nach Spryker und ihre dortige Persistierung.
Im Gegensatz dazu dient das FirstSpiritDataCleanupsResourceRoutePlugin
der Ermittlung und Löschung veralteter Daten in Spryker.
Beide Plugins und das nachfolgende FirstSpiritCmsPagesResourceRoutePlugin
sind dem GlueApplicationDependencyProvider
hinzuzufügen.
Wird innerhalb des ContentCreators eine neue Seite angelegt, ist parallel die Erzeugung einer CMS Page in Spryker erforderlich. Da der ContentCreator die Storefront anzeigt, wäre die neu erstellte Seite andernfalls nicht in der Vorschau sichtbar. Stattdessen wäre sie bereits gleichzeitig im Live-Stand verfügbar, würde sie erst mit einem Deployment Spryker-seitig erstellt.
Das FirstSpiritCmsPagesResourceRoutePlugin
dient der Erzeugung der neuen Seite.
Dieses Plugin und die zuvor beschriebenen anderen beiden ResourceRoutePlugins sind dem GlueApplicationDependencyProvider
im Verzeichnis src/Pyz/Glue/GlueApplication
hinzuzufügen:
Erweiterung des GlueApplicationDependencyProviders.
use ESpirit\Glue\FirstSpiritDataRestApi\Plugin\FirstSpiritDataImportsResourceRoutePlugin; use ESpirit\Glue\FirstSpiritDataRestApi\Plugin\FirstSpiritDataCleanupsResourceRoutePlugin; use ESpirit\Glue\FirstSpiritDataRestApi\Plugin\FirstSpiritCmsPagesResourceRoutePlugin; [...] protected function getResourceRoutePlugins(): array { return [ [...] new FirstSpiritDataImportsResourceRoutePlugin(), new FirstSpiritDataCleanupsResourceRoutePlugin(), new FirstSpiritCmsPagesResourceRoutePlugin(), new FirstSpiritDataStateWriterResourceRoutePlugin(), new FirstSpiritDataInconsistencyCheckResourceRoutePlugin(), ]; }
Neben den Spryker-Modulen und den Plugins enthält die Auslieferung die nachfolgenden Widgets. Sie ermöglichen die Erweiterbarkeit der im Shop enthaltenen Navigationen sowie den Einsatz der im Referenzprojekt enthaltenen DOM-Verweise und des Shoppable Images. Ausschließlich bei der Verwendung dieser Elemente ist eine Registrierung der Widgets erforderlich.
FirstSpiritPreviewContentNavigationWidget
FirstSpiritCategoryLinkWidget
FirstSpiritProductLinkWidget
FirstSpiritContentLinkWidget
FirstSpiritExternalLinkWidget
FirstSpiritProductFlyoutWidget
FirstSpiritPreviewContentNavigationWidget
Das FirstSpiritPreviewContentNavigationWidget
schafft die Möglichkeit, die im Shop enthaltenen Navigationen mit FirstSpirit zu pflegen und um weitere Menüpunkte zu ergänzen.
Es ersetzt das bestehende ContentNavigationWidget
in Spryker und stellt verschiedene Attribute zur Verfügung, die für die Darstellung der entsprechenden Navigation in der Vorschau erforderlich sind.
Dafür ist das in Spryker existierende ContentNavigationWidget
unter dem Pfad /src/Pyz/Yves
gegen das in der Auslieferung enthaltene FirstSpiritPreviewContentNavigationWidget
auszutauschen.
Für die Nutzung des FirstSpiritPreviewContentNavigationWidgets
ist abschließend eine Registrierung notwendig.
Diese erfolgt durch eine Anpassung des TwigDependencyProviders
im Verzeichnis /src/Pyz/Yves/Twig/
,
in dem das ContentNavigationTwigPlugin
gegen das FirstSpiritPreviewNavigationWidgetTwigPlugin
zu ersetzen ist.
Eine Erweiterung des ShopApplicationDependencyProviders
wie bei den nachfolgenden Widgets ist für das FirstSpiritPreviewContentNavigationWidget
nicht erforderlich.
Anpassung des TwigDependencyProviders.
<?php namespace Pyz\Yves\Twig; use ESpirit\Yves\FirstSpiritPreviewNavigationWidget\Plugin\Twig\FirstSpiritPreviewNavigationWidgetTwigPlugin; [...] class TwigDependencyProvider extends SprykerTwigDependencyProvider { [...] protected function getTwigPlugins(): array { return [ [...] // new ContentNavigationTwigPlugin(), new FirstSpiritPreviewNavigationWidgetTwigPlugin(), ]; } [...] }
FirstSpiritCategoryLinkWidget und FirstSpiritProductLinkWidget
Die Widgets FirstSpiritCategoryLinkWidget
und FirstSpiritProductLinkWidget
dienen der Darstellung redaktioneller DOM-Verweise auf Kategorie- bzw. Produkt-Detailseiten.
In beiden Fällen ermittelt das Widget dafür die entsprechende Kategorie bzw. das Produkt anhand eines eindeutigen Identifiers und übergibt das Ergebnis dem Twig-Template, das die Spryker-seitige Darstellung des jeweiligen Verweises steuert.
Jedes der beiden Widgets referenziert das ihm zugehörige Twig-Template.
Die Twig-Templates werden durch das zuvor installierte FirstSpiritPreview-Modul bereitgestellt.
FirstSpiritContentLinkWidget und FirstSpiritExternalLinkWidget
Das FirstSpiritContentLinkWidget
und das FirstSpiritExternalLinkWidget
ermöglichen DOM-Verweise auf redaktionelle Inhalte, wobei sich die Art dieser Inhalte jeweils unterscheidet.
Das FirstSpiritExternalLinkWidget
erlaubt ausschließlich die Referenzierung externer Inhalte.
Im Gegensatz dazu dient das FirstSpiritContentLinkWidget
der Darstellung interner DOM-Verweise auf dynamische Inhaltsseiten bzw. Magazinartikel, die innerhalb des FirstSpirit-Projekts gepflegt sind.
Ein wichtiger Aspekt dabei ist, dass die Ziel-URL interner Verweise auf dynamische Inhaltsseiten von der Ausgabe abhängig sind:
Während sich der Verweis im Live-Stand auf die veröffentlichte CMS Page bezieht, muss in der Vorschau die zugehörige Vorschau-URL verwendet werden.
Das Widget steuert in beiden Fällen die Ermittlung der jeweils benötigten URL.
FirstSpiritProductFlyoutWidgets
Die Registrierung des FirstSpiritProductFlyoutWidgets
ist nur dann erforderlich, wenn das mit der Auslieferung bereitgestellte Shoppable Image im Projekt verwendet wird.
Das Widget steuert die Darstellung der Flyouts für die auf dem Shoppable Image verlinkten Produkte.
Registrierung
Die Registrierung der vier Link- sowie des FlyoutWidgets erfolgt mithilfe des folgenden Codes, der dem ShopApplicationDependencyProvider
im Verzeichnis src/Pyz/Yves/ShopApplication
hinzuzufügen ist.
Erweiterung des ShopApplicationDependencyProviders.
use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritCategoryLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritContentLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritExternalLinkWidget; use ESpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductFlyoutWidget; [...] protected function getGlobalWidgets(): array { return [ [...] FirstSpiritCategoryLinkWidget::class, FirstSpiritProductLinkWidget::class, FirstSpiritContentLinkWidget::class, FirstSpiritExternalLinkWidget::class, FirstSpiritProductFlyoutWidget::class ]; }
Das zuvor installierte CmsBlockTwigFunctionPlugin
ermöglicht das Mapping zwischen den in FirstSpirit und den in Spryker gespeicherten Inhalten.
Dafür setzt es voraus, dass die View-Daten einer Page deren Id und Typ enthalten.
Diese Informationen stellen die Controller von Spryker standardmäßig jedoch nicht bereit.
Aus diesem Grund ist sowohl für Inhalts- und Kategorieseiten als auch im Fall der Homepage, die einer statischen Seite entspricht, eine Überschreibung der folgenden Controller notwendig:
Die Überschreibung erfolgt durch das Anlegen der zugehörigen Klassen, die alle ein Bestandteil der in der Auslieferung enthaltenen zip-Datei b2c-demo-shop-extensions-<VERSION>.zip
sind.
Sie müssen in das jeweils zu erzeugende Verzeichnis Controller
unterhalb von src/Pyz/Yves/HomePage|CatalogPage|CmsPage
kopiert werden.
Existieren die Klassen bereits unter dem für sie genannten Pfad, werden die Controller bereits projektspezifisch überschrieben. In diesem Fall ist jeweils sicherzustellen, dass die View-Parameter entsprechend erweitert werden. |
Im Gegensatz zu den übrigen Seiten ist für die Produktseiten die Anpassung des Spryker-seitig bereits existierenden ProductControllers erforderlich.
Er ist im Verzeichnis src/Pyz/Yves/ProductDetailPage/Controller/ProductController
enthalten und muss um die Definition des Seitentyps und der Product SKU ergänzt werden.
Der folgende Code-Ausschnitt zeigt die durchzuführenden Änderungen:
Erweiterung des ProductControllers.
<?php namespace Pyz\Yves\ProductDetailPage\Controller; [...] use ESpirit\Shared\FirstSpiritPreview\FirstSpiritPreviewConstants; class ProductController extends SprykerShopProductController { protected function executeDetailAction(array $productData, Request $request): array { [...] $viewData['cart'] = $quoteTransfer; $viewData[FirstSpiritPreviewConstants::VIEW_DATA_PAGE_TYPE_KEY] = FirstSpiritPreviewConstants::PRODUCT_PAGE_TYPE; $viewData[FirstSpiritPreviewConstants::VIEW_DATA_PAGE_ID_KEY] = $productData['sku']; return $viewData; } }
Zusätzlich zu den genannten Controllern enthält die Auslieferung weitere RenderController, mit denen die Aktualisierung einzelner CMS-Elemente in der Vorschau möglich ist.
Sie werden vom FirstSpiritPreviewRoutePlugin
angesprochen, das initial nicht in Spryker existiert und daher eine Registrierung in der RouterDependencyProvider
-Datei im Verzeichnis Pyz/Yves/Router
erfordert.
Innerhalb der Datei ist die Methode getRouteProvider
wie folgt zu erweitern.
Erweiterung der Methode getRouteProvider.
use ESpirit\Yves\FirstSpiritPreview\Plugin\Route\FirstSpiritPreviewRoutePlugin; [...] protected function getRouteProvider(): array { return [ [...] new FirstSpiritPreviewRoutePlugin() ]; }
Für die Aktivierung von Gateway-Routing, ist eine Anpassung der Datei RouterConfig
im Verzeichnis src/Pyz/Zed/Router
erforderlich.
RouterConfig.
public function getControllerDirectories(): array { [...] $controllerDirectories[] = sprintf('%s/e-spirit/*/src/*/Zed/*/Communication/Controller/', APPLICATION_VENDOR_DIR); return array_filter($controllerDirectories, 'glob'); }
Das zuvor installierte Cms Block Data Connector-Modul erzeugt eine Zed-Tabelle. In dieser Tabelle werden während des Imports die aus dem Online CaaS ermittelten redaktionellen Inhalte gespeichert. Die Persistierung der CMS Blöcke erfolgt in einer weiteren Tabelle.
Da die CMS Blöcke keine Placeholder enthalten, werden sie von Spryker standardmäßig nicht publiziert.
Aus diesem Grund ist es notwendig, den CmsBlockStorageQueryContainer
zu überschreiben und damit das Spryker-seitige Standardverhalten zur Publizierung von CMS Blöcken anzupassen.
Die Überschreibung des Query Containers erfolgt durch das Anlegen der Klasse CmsBlockStorageQueryContainer.php
.
Sie ist ein Bestandteil der in der Auslieferung enthaltenen zip-Datei b2c-demo-shop-extensions-<VERSION>.zip
und ist in das zu erzeugenden Verzeichnis src/Pyz/Zed/CmsBlockStorage/Persistence
zu kopieren.
Die mit dem FirstSpirit Connect-Modul realisierte Integration sieht FirstSpirit-seitig lediglich die Erzeugung und Pflege der redaktionellen Inhalte sowie ihre Publizierung in Form von JSON-Objekten vor. Die Einbindung dieser Inhalte und die Erzeugung der Vorschau findet jedoch weiterhin Spryker-seitig statt.
Im Vorschaufall ermittelt FirstSpirit die aktuelle Ansicht einer Seite in der Storefront und zeigt sie mithilfe des Omnichannel Managers im ContentCreator an. Für die Integration der redaktionellen Inhalte in den Shop, importiert Spryker sie aus dem Online CaaS und persistiert sie in seinem internen Datensystem.
Da sowohl die Vorschau als auch der Importprozess per Authentifizierung geschützt ist, muss in der Projekt-Komponente des FirstSpirit Connect-Moduls ein technischer Benutzer angegeben werden.
Dieser entspricht einem Customer, der wiederum einem Zed-User zugewiesen ist.
Die Zuweisung lässt sich im Menü →
über den Button durchführen.
Eine genauere Beschreibung der für die Zuweisung notwendigen Schritte ist in den Kapiteln Assigning Customers und Previewing a Page der Spryker-Dokumentation enthalten. |
Die Integration der FirstSpirit-seitig erstellten bzw. gepflegten Inhalte in den Shop erfolgt durch Spryker. Dafür importiert Spryker die Daten aus dem Online CaaS und persistiert sie in seinem Datensystem. Die Übertragung der Informationen muss bei jeder FirstSpirit-Veröffentlichung stattfinden, die aus diesem Grund jedes Mal einen Spryker-seitigen Import-Befehl anstößt.
Der Befehl weist den Importer an, die im Online CaaS gespeicherten Block-Daten zu importieren.
Dabei nutzt er den in der Konfigurationsdatei config_default-[environment].php
angegebenen FirstSpirit Data Import Block CaaS Path
.
Mithilfe dieses Pfads greift der Importer auf die CaaS-Aggregation zu, die während der FirstSpirit-Veröffentlichung erzeugt wird.
Die Import-Befehle müssen Spryker-seitig in den getConsoleCommands
registriert werden.
Dafür ist die folgende Erweiterung der ConsoleDependencyProvider.php
-Datei im Verzeichnis src/Pyz/Zed/Console
erforderlich:
Erweiterung der getConsoleCommands.
use ESpirit\Zed\FirstSpiritDataImport\Communication\Console\FsDataImportConsole; use ESpirit\Zed\FirstSpiritDataImport\Communication\Console\FsStoreDataImportConsole; [...] $commands = [ // Default commands [...] new DataImportConsole(DataImportConsole::DEFAULT_NAME . ':' . DataImportConfig::IMPORT_TYPE_CMS_BLOCK_STORE), new DataImportConsole(DataImportConsole::DEFAULT_NAME . ':' . DataImportConfig::IMPORT_TYPE_CMS_BLOCK_CATEGORY_POSITION), new DataImportConsole(DataImportConsole::DEFAULT_NAME . ':' . DataImportConfig::IMPORT_TYPE_DISCOUNT), [...] // FirstSpirit Data importers new FsDataImportConsole(FsDataImportConsole::DEFAULT_NAME), new FsStoreDataImportConsole(FsStoreDataImportConsole::DEFAULT_NAME), ];
Damit die Blöcke für Kategorieseiten importiert werden können, muss der Inalt der DataImportBusinessFactory.php
-Dateo im Verzeichnis src/Pyz/Zed/DataImport/Business
angepasst werden:
Erweiterung der DataImportBusinessFactory.
[...] use Pyz\Zed\DataImport\Business\Model\CmsBlock\CmsBlockWriterStep; use Pyz\Zed\DataImport\Business\Model\CmsBlockCategoryPosition\CmsBlockCategoryPositionWriterStep; use Pyz\Zed\DataImport\Business\Model\CmsBlockStore\CmsBlockStoreWriterStep; [...] public function getDataImporterByType(DataImportConfigurationActionTransfer $dataImportConfigurationActionTransfer): ?DataImporterInterface { switch ($dataImportConfigurationActionTransfer->getDataEntity()) { [...] case DataImportConfig::IMPORT_TYPE_CMS_BLOCK_STORE: return $this->createCmsBlockStoreImporter($dataImportConfigurationActionTransfer); case DataImportConfig::IMPORT_TYPE_CMS_BLOCK_CATEGORY_POSITION: return $this->createCmsBlockCategoryPositionImporter($dataImportConfigurationActionTransfer); case DataImportConfig::IMPORT_TYPE_DISCOUNT_AMOUNT: return $this->createDiscountAmountImporter($dataImportConfigurationActionTransfer); [...] } } [...] /** * @param \Generated\Shared\Transfer\DataImportConfigurationActionTransfer $dataImportConfigurationActionTransfer * * @return \Spryker\Zed\DataImport\Business\Model\DataImporterInterface|\Spryker\Zed\DataImport\Business\Model\DataSet\DataSetStepBrokerAwareInterface */ protected function createCmsBlockCategoryPositionImporter(DataImportConfigurationActionTransfer $dataImportConfigurationActionTransfer) { $dataImporter = $this->getCsvDataImporterFromConfig( $this->getConfig()->buildImporterConfigurationByDataImportConfigAction($dataImportConfigurationActionTransfer) ); $dataSetStepBroker = $this->createTransactionAwareDataSetStepBroker(CmsBlockCategoryPositionWriterStep::BULK_SIZE); $dataSetStepBroker->addStep(new CmsBlockCategoryPositionWriterStep()); $dataImporter->addDataSetStepBroker($dataSetStepBroker); return $dataImporter; } [...]
Die in FirstSpirit gepflegten redaktionellen Inhalte werden während des Deployments mithilfe des Importers aus dem Online CaaS abgefragt. Der Importer überträgt die Daten nach Spryker und persistiert sie Backend-seitig in dessen Datensystem. Die Anzeige der Daten im Live-Stand erfordert zusätzlich ihre Übertragung nach Yves. Die Übertragung der Daten erfordert die Registrierung eines Event Subscribers, verschiedener Queues und eines Message Processors.
Nähere Informationen sind im Kapitel Publish and Synchronization der Spryker Dokumentation enthalten. |
Die Registrierung des EventSubscribers erfolgt mithilfe des folgenden Codes, der dem EventDependencyProvider
im Verzeichnis Pyz/Zed/Event
hinzuzufügen ist.
EventDependencyProvider.
use ESpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Event\Subscriber\FirstSpiritCmsDataStorageEventSubscriber; [...] class EventDependencyProvider extends SprykerEventDependencyProvider { [...] public function getEventSubscriberCollection() { $eventSubscriberCollection = parent::getEventSubscriberCollection(); /** * Storage Events */ [...] $eventSubscriberCollection->add(new FirstSpiritCmsDataStorageEventSubscriber()); /** * Search Events */ [...] return $eventSubscriberCollection; } }
Die Registrierung der Queues setzt die folgende Anpassung der RabbitMqConfig
-Datei im Verzeichnis src/Pyz/Client/RabbitMq
voraus:
RabbitMqConfig.
<?php namespace Pyz\Client\RabbitMq; use ESpirit\Shared\FirstSpiritCmsDataStorage\FirstSpiritCmsDataStorageConfig; [...] class RabbitMqConfig extends SprykerRabbitMqConfig { [...] protected function getPublishQueueConfiguration(): array { return [ PublisherConfig::PUBLISH_QUEUE => [ [...] ], [...] FirstSpiritCmsDataStorageConfig::PUBLISH_CMS_PAGE_DATA_CONNECTOR, FirstSpiritCmsDataStorageConfig::PUBLISH_CMS_BLOCK_DATA_CONNECTOR ]; } protected function getSynchronizationQueueConfiguration(): array { return [ [...] FirstSpiritCmsDataStorageConfig::CMS_PAGE_DATA_CONNECTOR_SYNC_STORAGE_QUEUE, FirstSpiritCmsDataStorageConfig::CMS_BLOCK_DATA_CONNECTOR_SYNC_STORAGE_QUEUE ]; } [...] }
Das Trigger-Plugin muss der Datei EventBehaviorDependencyProvider
im Verzeichnis src/Pyz/Zed/EventBehavior
hinzugefügt werden.
EventBehaviorDependencyProvider.
<?php namespace Pyz\Zed\EventBehavior; use ESpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Event\FirstSpiritCmsBlockDataEventResourceQueryContainerPlugin; use ESpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Event\FirstSpiritCmsDataEventResourceQueryContainerPlugin; [...] class EventBehaviorDependencyProvider extends SprykerEventBehaviorDependencyProvider { protected function getEventTriggerResourcePlugins() { return [ [...] new FirstSpiritCmsDataEventResourceQueryContainerPlugin(), new FirstSpiritCmsBlockDataEventResourceQueryContainerPlugin(), ]; } }
Um das Auslösen von Ereignissen aus der GLUE-Anwendung heraus zu ermöglichen, muss das Dispatcher-Plugin der Datei EventDispatcherDependencyProvider
im Verzeichnis src/Pyz/Zed/EventDispatcher
hinzugefügt werden.
EventDispatcherDependencyProvider.
[...] protected function getBackendGatewayEventDispatcherPlugins(): array { return [ [...] new EventBehaviorEventDispatcherPlugin(), ]; }
Das Sync-Plugin muss der Datei SynchronizationDependencyProvider
im Verzeichnis src/Pyz/Zed/Synchronization
hinzugefügt werden.
SynchronizationDependencyProvider.
<?php namespace Pyz\Zed\Synchronization; use ESpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Synchronization\FirstSpiritCmsBlockDataSynchronizationDataBulkPlugin; use ESpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Synchronization\FirstSpiritCmsDataSynchronizationDataBulkPlugin; [...] class SynchronizationDependencyProvider extends SprykerSynchronizationDependencyProvider { protected function getSynchronizationDataPlugins(): array { return [ [...] new FirstSpiritCmsDataSynchronizationDataBulkPlugin(), new FirstSpiritCmsBlockDataSynchronizationDataBulkPlugin(), ]; } [...] }
Die Registrierung des für die Queues notwendigen Event Subscribers macht eine Anpassung des QueueDependencyProviders
im Verzeichnis Pyz/Zed/Queue
erforderlich:
QueueDependencyProvider.
<?php namespace Pyz\Zed\Queue; use ESpirit\Shared\FirstSpiritCmsDataStorage\FirstSpiritCmsDataStorageConfig; [...] class QueueDependencyProvider extends SprykerDependencyProvider { protected function getProcessorMessagePlugins(Container $container) { return [ [...] FirstSpiritCmsDataStorageConfig::PUBLISH_CMS_PAGE_DATA_CONNECTOR => new EventQueueMessageProcessorPlugin(), FirstSpiritCmsDataStorageConfig::PUBLISH_CMS_BLOCK_DATA_CONNECTOR => new EventQueueMessageProcessorPlugin(), FirstSpiritCmsDataStorageConfig::CMS_PAGE_DATA_CONNECTOR_SYNC_STORAGE_QUEUE => new SynchronizationStorageQueueMessageProcessorPlugin(), FirstSpiritCmsDataStorageConfig::CMS_BLOCK_DATA_CONNECTOR_SYNC_STORAGE_QUEUE => new SynchronizationStorageQueueMessageProcessorPlugin(), ]; } }
Für die Verwendung der Funktionalitäten des FirstSpirit Connect-Moduls ist FirstSpirit-seitig die Installation und Konfiguration unterschiedlicher Komponenten erforderlich. Die folgenden Unterkapitel erläutern die dafür notwendigen Schritte.
Für den Einsatz des FirstSpirit Connect-Moduls ist eine projektspezifische Konfiguration notwendig. Diese wird über die Projekt-Komponente vorgenommen, die dem mitgelieferten Referenzprojekt bereits hinzugefügt ist.
Zur Nutzung des FirstSpirit Connect-Moduls muss außerdem das Content as a Service-Modul konfiguriert werden. Die dafür notwendigen Schritte sind in der Content as a Service-Dokumentation beschrieben. Innerhalb des Referenzprojekts ist in der Projekt-Komponente des CaaS für die Mediennutzung die Generierung der Medien in den CaaS definiert. Diese Konfiguration ist explizit nicht im Produktivbetrieb einzusetzen. Für den Produktivbetrieb muss die Mediennutzung auf die Verwendung eines CDNs umgestellt werden. |
Öffnen Sie für die Konfiguration der Projekt-Komponente den ServerManager
und wählen Sie den Bereich →
.
Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen.
Selektieren Sie den Eintrag FirstSpirit Connect for FirstSpirit Commerce OS Project Configuration
und öffnen Sie den zugehörigen Konfigurationsdialog über .
Der Dialog gliedert sich in die Tabs Allgemein
, Vorschau
, Veröffentlichung
und YouTube
:
Allgemein
Innerhalb des Reiters Allgemein
sind die Storefront Basis URL
und die Glue-API Basis URL
anzugeben.
Sie müssen dem FirstSpirit-Server bekannt sein, um eine Verbindung zu Spryker herstellen und Daten abfragen zu können.
Außerdem besteht die Möglichkeit, benutzerdefinierte Werte für den Connection-Timeout und den Socket-Timeout anzugeben. Ohne Angabe von Werten werden bei der Kommunikation mit der Glue-API die Defaultwerte von 60 Sekunden für den Socket-Timeout und 10 Sekunden für den Connection-Timeout verwendet.
Vorschau
Innerhalb des Reiters Vorschau
wird zunächst der Login-Pfad benötigt.
Das entsprechende Feld enthält vorausgefüllt den Default-Wert /firstspirit_login_check
, der sich bei Bedarf anpassen lässt.
Des Weiteren sind in diesem Reiter die Login-Daten eines technischen Benutzers einzutragen. Dieser muss dem Customer entsprechen, der während der Spryker-seitig auszuführenden Schritte definiert wurde. Er dient der Spryker-seitigen Abfrage der Storefront, die mithilfe des Omnichannel Managers im ContentCreator eingebunden wird.
Veröffentlichung
Der Reiter Veröffentlichung
enthält jeweils eine Liste aller im Projekt verfügbaren Gruppen und Voll-Deployment-Aufträge.
Er ermöglicht die Bereitstellung des selektierten Deployment-Auftrags im Aktionen
-Menü des ContentCreators für die im Reiter aktivierten Gruppen.
Das Aktionen
-Menü enthält für die Ausführung des Auftrags den Menüpunkt Veröffentlichung
.
Für Gruppen, denen die Ausführung des Auftrags nicht erlaubt ist, ist der Eintrag sichtbar, aber deaktiviert.
Innerhalb des mitgelieferten Referenzprojekts kann dem ChiefEditor auf diesem Weg beispielsweise die Ausführung des Voll-Deployments ermöglicht werden.
Darüber hinaus verwenden der Freigabe- und der Lösch-Arbeitsablauf den an dieser Stelle selektierten Auftrag, wenn zusätzlich zur Freigabe bzw. Löschung einer Seite die Publikation des gesamten Projekts angestoßen werden soll.
Für Server- und Projektadministratoren ist die Ausführung des Voll-Deployments standardmäßig erlaubt, unabhängig von der Konfiguration innerhalb des Reiters. |
YouTube
Das bereitgestellte Referenzprojekt enthält einen Shoppable Video-Absatz.
Dieser ermöglicht die Anzeige und Referenzierung von Produkten zu definierten Zeitpunkten in einem YouTube-Video.
Die Verwendung des Absatzes setzt einen Google API Key
voraus, der an dieser Stelle einzutragen ist.
Darüber hinaus lassen sich kommasepariert ein oder mehrere Channel-Ids
angeben.
Sobald das Feld eine Id enthält, zeigt die Video-Auswahl ein Dropdown an.
Dieses erlaubt die Referenzierung eines YouTube-Videos aus einem spezifischen Channel.
Für den ContentCreator wird eine Web-Komponente benötigt, die dem mitgelieferten Referenzprojekt bereits hinzugefügt ist.
Sie ist standardmäßig global im ServerManager
im Bereich →
installiert.
In diesem Fall sind alle für die Web-Komponente erforderlichen Installations- und Konfigurationsschritte bereits seitens der e-Spirit AG durchgeführt.
Alternativ ist jedoch auch eine Installation der Web-Komponente in den Projekt-Eigenschaften
möglich.
Ausschließlich in diesem Fall muss sie noch auf einem aktiven Webserver installiert werden.
Öffnen Sie hierfür den ServerManager
und wählen Sie den Bereich →
.
Innerhalb des Hauptpanels sind verschiedene Registerkarten zu sehen, in denen jeweils eine Liste der bereits vorhandenen Web-Komponenten sichtbar ist.
Diese Liste enthält für die Vorschau
und den ContentCreator
die FirstSpirit Connect for Spryker Commerce OS Web App
.
Im ContentCreator
-Tab ist darüber hinaus die FirstSpirit ThirdPartyPreview WebApp
und optional die BasicWorkflows_ContentCreator_Library
hinzugefügt (vgl. Abbildung Web-Komponenten in den Projekt-Eigenschaften).
Die Web-Komponente der BasicWorkflows ist ausschließlich bei der Nutzung der Arbeitsabläufe erforderlich.
Selektieren Sie in beiden Registerkarten einen Webserver über die Auswahlbox und starten Sie die Installation jeweils über den Button
. 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.