ContentConnect

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

Abbildung 1. Architektur

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. Wird der FirstSpirit-Server beispielsweise aufgrund von Wartungsarbeiten heruntergefahren, beeinflusst dies Spryker nicht.

Das ContentConnect-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.

1.3.1. Seiten

Ä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 ContentConnect Reference Project werden die CMS Placeholder 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.

Abbildung 2. Page Rendering

Mit FirstSpirit lassen sich somit CMS Blöcke generieren, die über CMS Placeholder in einer Seite dargestellt werden.

Für den Einsatz des ContentConnect-Moduls müssen die folgenden technischen Voraussetzungen erfüllt sein:

Bei der Verwendung des mitgelieferten Referenzprojekts ContentConnect Reference Project ist außerdem das BasicWorkflows-Modul in der jeweils aktuellen Version erforderlich.

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

1.5.2. Konfiguration der FirstSpirit-Einstellungsseite

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.

Abbildung 3. Konfiguration der Einstellungsseite in den Projektoptionen

vagrant up --provider=virtualbox

[...]
set memory_limit=-1
[...]

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.

composer config repo.espirit artifact ./PATH-TO-DIRECTORY

$config[KernelConstants::CORE_NAMESPACES] = [
   'SprykerShop',
   'SprykerEco',
   'Spryker',
   'FirstSpirit'
];

composer require firstspirit/firstspirit-caas
composer require firstspirit/firstspirit-preview
composer require firstspirit/firstspirit-data-state-writer
composer require firstspirit/firstspirit-data-cleanup
composer require firstspirit/firstspirit-data-import
composer require firstspirit/firstspirit-data-inconsistency-check
composer require firstspirit/firstspirit-data-rest-api
composer require firstspirit/firstspirit-cms-data-connector
composer require firstspirit/firstspirit-cms-data-storage

vendor/bin/console transfer:generate
vendor/bin/console propel:install

composer require firstspirit/firstspirit-reference-components

[...]

dirs: [
   join(globalSettings.context, paths.core),
   join(globalSettings.context, './vendor/firstspirit'),
   join(globalSettings.context, paths.eco),
   join(globalSettings.context, paths.project)
],

[...]

"include": [
   "./vendor/spryker-shop/**/*",
   "./vendor/spryker-eco/**/*",
   "./src/Pyz/Yves/**/*",
   "./vendor/firstspirit/**/*"
],

 npm install swiper

npm run yves

// ----------- 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_TECHNICAL_PAGE_COLLECTION] = '<CAAS COLLECTION>';
$config[FirstSpiritPreviewConstants::FIRSTSPIRIT_PREVIEW_CAAS_NAVIGATION_DOCUMENT] = '<NAVIGATION DOCUMENT>';
$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>;

// ----------- 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>';

use FirstSpirit\Shared\FirstSpiritPreview\FirstSpiritPreviewConstants;
use FirstSpirit\Shared\FirstSpiritDataImport\FirstSpiritDataImportConstants;
use FirstSpirit\Shared\FirstSpiritCaaS\FirstSpiritCaaSConstants;

{% block headStyles %}
   <link rel="stylesheet" href="{{publicPath('css/yves_default.app.css')}}" />
   {{ fsIncludeOcmFiles(identifier='css') }}
{% endblock %}

<body [..] {{ fsIncludeDataAttributes() }}>

   [..]

   {% block footerScripts %}
      <script src="{{publicPath('js/yves_default.es6-polyfill.js')}}"></script>
      <script src="{{publicPath('js/yves_default.vendor.js')}}"></script>
      <script src="{{publicPath('js/yves_default.app.js')}}"></script>
      {{ fsIncludeOcmFiles(identifier='js') }}
   {% endblock %}

</body>

Zusätzlich zur Installation der Spryker-Module ist die Einbindung folgender Plugins erforderlich:

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.

Die ersten beiden Widgets 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.

Das FirstSpiritContentLinkWidget, das FirstSpiritMagazineLinkWidget 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 dienen das FirstSpiritContentLinkWidget sowie das FirstSpiritMagazineLinkWidget 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.

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.

Das ExtendedNavigationWidget schafft die Möglichkeit, die im Shop enthaltenen Navigationen mit FirstSpirit zu pflegen und um weitere Menüpunkte zu ergänzen. Es erweitert das bestehende NavigationWidget in Spryker und stellt verschiedene Attribute zur Verfügung, die für die Darstellung der entsprechenden Navigation in der Vorschau erforderlich sind.

Die Registrierung der Widgets erfolgt mithilfe des folgenden Codes, der dem ShopApplicationDependencyProvider im src → Pyz → Yves → ShopApplication hinzuzufügen ist.

Erweiterung des ShopApplicationDependencyProviders. 

use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritCategoryLinkWidget;
use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductLinkWidget;
use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritContentLinkWidget;
use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritMagazineLinkWidget;
use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritExternalLinkWidget;
use FirstSpirit\Yves\FirstSpiritPreview\Widget\FirstSpiritProductFlyoutWidget;
use Pyz\Yves\NavigationWidget\Widget\ExtendedNavigationWidget;

[...]

protected function getGlobalWidgets(): array
{
   return [
      [...]
      FirstSpiritCategoryLinkWidget::class,
      FirstSpiritProductLinkWidget::class,
      FirstSpiritContentLinkWidget::class,
      FirstSpiritMagazineLinkWidget::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.

Zusätzlich zu den genannten Controllern enthält die Auslieferung den CmsBlockRenderController, der die Aktualisierung eines einzelnen CMS Blocks in der Vorschau ermöglicht. Er existiert initial nicht in Spryker und erfordert daher eine Registrierung in der YvesBootstrap-Datei im Verzeichnis Pyz → Yves → ShopApplication. Innerhalb der Datei ist die Methode getControllerProviderStack wie folgt zu erweitern.

Erweiterung der Methode getControllerProviderStack. 

use FirstSpirit\Yves\FirstSpiritPreview\Plugin\Provider\CmsBlockRenderControllerProvider;

[...]
protected function getControllerProviderStack($isSsl)
{
   return [
      [...]
      new CmsBlockRenderControllerProvider($isSsl)
   ];
}

Der Spryker B2C Demo Shop enthält standardmäßig unterschiedliche Navigationen, die sich Spryker-seitig erzeugen und bearbeiten lassen. Die mit dem ContentConnect-Modul realisierte Integration bietet die Möglichkeit, diese Navigationen auch mit FirstSpirit zu pflegen und um weitere Menüpunkte zu ergänzen.

Innerhalb des Referenzprojekts ist die Funktionalität exemplarisch für die Hauptnavigation sowohl in der Desktop- als auch in der mobilen Version umgesetzt. Ihre Verwendung setzt die Referenzierung des ExtendedNavigationWidgets, die Erzeugung eines Platzhalters sowie die Ergänzung einer Preview ID voraus.

Das ExtendedNavigationWidget erweitert das bestehende NavigationWidget und stellt verschiedene Attribute für die Vorschaudarstellung der Navigation bereit. Es muss daher anstelle des NavigationWidgets referenziert werden. Für die Desktopversion ist dafür die Anpassung der header.twig-Datei im Verzeichnis src → Pyz → Yves → ShopUi → Theme → default → components → organisms → header erforderlich:

Anpassung der header.twig-Datei. 

[..]
   {% widget 'ExtendedNavigationWidget' args ['MAIN_NAVIGATION_DESKTOP', 'navigation-header'] %}
   {% endwidget %}
[..]

Die Referenzierung des ExtendedNavigationWidgets für die mobile Hauptnavigation erfolgt in der side-drawer.twig-Datei im Verzeichnis src → Pyz → Yves → ShopUi → Theme → default → components → organisms → side-drawer:

Anpassung der side-drawer.twig-Datei. 

[..]
   {% widget 'ExtendedNavigationWidget' args ['MAIN_NAVIGATION', 'navigation-header-mobile'] %}
   {% endwidget %}
[..]

Die Darstellung der Navigation in der Vorschau erfordert die Erzeugung eines weiteren Menüpunkts, der als Platzhalter dient. Dieser ist für die Desktopversion in der navigation-header.twig-Datei im Verzeichnis src → Pyz → Yves → ShopUi → Theme → default → components → molecules → navigation-header hinzuzufügen:

Anpassung der navigation-header.twig-Datei. 

[..]
<ul class="menu {{ menuClass }} grid grid--center grid--no-wrap">
   {% for node in data.nodes %}
      [..]
   {% endfor %}

   {% if isFsPreview() %}
      <li class="fs-navigation-extension"
         style="padding-left: 1rem; transform: translate(0,15% );">
      </li>
   {% endif %}
</ul>
[..]

Die Ergänzung des Platzhalters in der mobilen Hauptnavigation erfolgt über eine Änderung der navigation-header-mobile.twig-Datei im Verzeichnis src → Pyz → Yves → NavigationWidget → Theme → default → components → molecules → navigation-header-mobile:

Anpassung der navigation-header-mobile.twig-Datei. 

[...]
{% block body %}
   [...]
   {% include molecule('toggler-accordion') with {
      attributes: {
         trigger: '.js-navigation-multilevel-node__trigger',
         'class-to-toggle': 'navigation-multilevel-node__menu--hidden',
         activeClass: 'navigation-multilevel-node__icon--active'
      }
   } only %}
   {% if isFsPreview() %}
      <li class="fs-navigation-extension"></li>
   {% endif %}
{% endblock %}
[...]

Für die Darstellung der Hauptnavigation in der Vorschau ist darüber hinaus eine Preview ID erforderlich. Ihre Definition erfolgt in der navigation-multilevel-node.twig-Datei im Verzeichnis src → Pyz → Yves → ShopUi → Theme → default → components → molecules → navigation-multilevel-node. Da beide Versionen der Hauptnavigation auf diese Datei zugreifen, ist in diesem Schritt lediglich eine Anpassung notwendig:

Anpassung der navigation-multilevel-node.twig-Datei. 

{% block attributes %}
   {% if isFsPreview() and data.node.previewId is defined and data.node.previewId is not empty %}
      data-preview-id="{{ data.node.previewId }}" style="min-height: unset;"
   {% endif %}
{% endblock %}

Enthält eine Seite illegalen Code zeigt Spryker einen sogenannten Fail Whale an. Dabei handelt es sich um eine von Spryker standardmäßig bereitgestellte Fehlerseite. Da diese keine Navigationsmöglichkeiten besitzt, versetzt sie den Benutzer in einen Zustand, aus dem er keine andere Shopseite mehr aufrufen kann.

In der Auslieferung ist daher eine Fehlerseite enthalten, die sich dem Design der übrigen Shopseiten anpasst und sowohl einen Header als auch einen Footer einbindet. Für ihre Verwendung muss der Inhalt des Ordners ErrorPage in das bereits bestehende Verzeichnis src → Pyz → Yves → ErrorPage kopiert werden. Der Ordner ist ein Bestandteil der mitgelieferten zip-Datei b2c-demo-shop-extensions-<VERSION>.zip.

Des Weiteren ist der Seite error.html im Verzeichnis src → public → Yves → errorpage die folgende Zeile hinzuzufügen:

Erweitererung der error.html. 

<meta http-equiv="Refresh" content="0; url=/error/500" />

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 ContentConnect-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 im 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 ContentConnect-Moduls ein technischer Benutzer angegeben werden. Dieser entspricht einem Customer, der wiederum einem Zed-User zugewiesen ist. Die Zuweisung lässt sich im Menü Users Control → User über den Button Assign Customers durchführen.

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.

Der Import-Befehl muss 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 FirstSpirit\Zed\FirstSpiritDataImport\Communication\Console\FsDataImportConsole;

[...]

$commands = [
   // Default commands
   [...]

   // FirstSpirit Data importers
   new FsDataImportConsole(FsDataImportConsole::DEFAULT_NAME)
];

Der FirstSpirit ContentCreator generiert und aktualisiert standardmäßig lediglich vollständige Seiten. Um innerhalb der Vorschau zusätzlich die Aktualisierung einzelner Absätze zu ermöglichen, wird Spryker-seitig ein weiterer EventListener benötigt. Dieser muss dem Frontend-Einstiegspunkt hinzugefügt werden. Dafür ist die app.ts-Datei im Verzeichnis src → Pyz → Yves → ShopUi → Theme → default wie folgt zu erweitern:

Erweiterung der Datei app.ts. 

import { bootstrap, mount } from 'ShopUi/app';
bootstrap();
document.addEventListener('NewComponentAttached', () => mount());

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, zweier Queues und eines Message Processors.

Die Registrierung des EventSubscribers erfolgt mithilfe des folgenden Codes, der dem EventDependencyProviders im Verzeichnis Pyz → Zed → Event hinzuzufügen ist.

Erweiterung des EventDependencyProviders. 

use FirstSpirit\Zed\FirstSpiritCmsDataStorage\Communication\Plugin\Event\Subscriber\FirstSpiritCmsDataStorageEventSubscriber;

[...]

public function getEventSubscriberCollection()
   {
      $eventSubscriberCollection = parent::getEventSubscriberCollection();

      [...]
      $eventSubscriberCollection->add(new FirstSpiritCmsDataStorageEventSubscriber());
      [...]

      return $eventSubscriberCollection;
   }
}

Die Registrierung der Queues setzt die folgende Anpassung der RabbitMqConfig-Datei im Verzeichnis Pyz → Client → RabbitMq voraus:

Erweiterung der RabbitMqConfig-Datei. 

use FirstSpirit\Shared\FirstSpiritCmsDataStorage\FirstSpiritCmsDataStorageConstants;

[...]

class RabbitMqConfig extends SprykerRabbitMqConfig
{
   protected function getQueueOptions()
   {
      $queueOptionCollection = new ArrayObject();

      [...]

      $queueOptionCollection->append($this->createQueueOption(
         FirstSpiritCmsDataStorageConstants::FS_CMS_BLOCK_DATA_SYNC_STORAGE_QUEUE,
         FirstSpiritCmsDataStorageConstants::FS_CMS_BLOCK_DATA_SYNC_STORAGE_ERROR_QUEUE));

      [...]

      return $queueOptionCollection;
   }
}

Die Registrierung des für die Queues notwendigen Event Subscribers macht eine Anpassung des QueueDependencyProviders im Verzeichnis Pyz → Zed → Queue erforderlich:

Erweiterung des QueueDependencyProviders. 

use FirstSpirit\Shared\FirstSpiritCmsDataStorage\FirstSpiritCmsDataStorageConstants;

[...]

protected function getProcessorMessagePlugins(Container $container)
{
   return [
      [...]
      FirstSpiritCmsDataStorageConstants::FS_CMS_BLOCK_DATA_SYNC_STORAGE_QUEUE =>
         new SynchronizationStorageQueueMessageProcessorPlugin(),
      [...]
   ];
}

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.

Abbildung 4. Server-Eigenschaften - Projekt-Komponenten

Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen. Selektieren Sie den Eintrag ContentConnect For FirstSpirit Commerce OS Project Configuration und öffnen Sie den zugehörigen Konfigurationsdialog über Konfigurieren.

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.

Abbildung 5. Projekt-Komponente - Allgemein

Vorschau

Innerhalb des Reiters Vorschau wird zunächst der Login-Pfad benötigt. Das entsprechende Feld enthält vorausgefüllt den Default-Wert /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 des Storefronts, der mithilfe des Omnichannel Managers im ContentCreator eingebunden wird.

Abbildung 6. Projekt-Komponente - Vorschau

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.

Abbildung 7. Projekt-Komponente - Veröffentlichung

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.

Abbildung 8. Projekt-Komponente - YouTube

Für den ContentCreator wird eine Web-Komponente benötigt, die dem mitgelieferten Referenzprojekt bereits hinzugefügt ist. Diese muss 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 für die Vorschau und den ContentCreator die ContentConnect For Spryker Commerce OS Web App. Im ContentCreator-Tab ist darüber hinaus die FirstSpirit ThirdPartyPreview WebApp hinzugefügt (vgl. Abbildung Web-Komponenten in den Projekt-Eigenschaften).

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.

Abbildung 9. Web-Komponenten in den Projekt-Eigenschaften

Durch die Verwendung des Omnichannel Managers stellt der ContentCreator externe Inhalte aus Spryker dar, auf die der Omnichannel Manager eine Zugriffsmöglichkeit benötigt. In den ContentCreator-Eigenschaften ist daher die Vorschau-URL des Spryker-Storefronts anzugeben. Da die Angabe stets projektspezifisch ist, existiert für sie innerhalb des Referenzprojekts keine Standardkonfiguration.

Öffnen Sie für die Eingabe den Bereich Projekt-Eigenschaften → ContentCreator innerhalb des ServerManagers und tragen Sie in dem Feld Externe Vorschau-URL die URL des Storefronts mit der folgenden Syntax an:

https://[STOREFRONT_HOST_DOMAIN]/en/?firstSpiritPreview=[PREVIEW_INIT_TOKEN]

Der für den Queryparameter firstSpiritPreview anzugebende Token muss mit dem Authentifizierungstoken übereinstimmen, der während der Spryker-seitig durchzuführenden Konfiguration definiert wurde. Er ist in der Datei config_default-[environment].php im Verzeichnis config → Shared gespeichert.

Abbildung 10. Externe Vorschau-URL

Die Definition der an den CaaS zu übertragenden Daten findet im noch anzulegenden Ausgabekanal statt. Die Verwendung bestimmter Sonderzeichen könnte zu invaliden JSON-Objekten führen. Aus diesem Grund muss eine Konvertierungsregel angelegt werden, um potentielle Fehler zu vermeiden.

Es empfiehlt sich, eine neue Konvertierungsregel anzulegen, anstatt eine bestehende zu bearbeiten. Erzeugen Sie hierfür eine Textdatei in Ihrem Dateisystem und fügen Sie dieser den folgenden Inhalt hinzu:

Konvertierungsregel. 

0x22="\""
[convert]
0x3c="<"
0x3e=">"
0x22="""
0x26="&"
0x27="'"

Öffnen Sie anschließend den ServerManager und selektieren Sie den Punkt Server-Eigenschaften → Konvertierungs-Regeln. Im Hauptpanel ist eine Liste der bereits existierenden Konvertierungsregeln zu sehen. Wählen Sie nach dem Klicken auf Hinzufügen die zuvor erstellte Textdatei aus Ihrem Dateisystem aus und bestätigen Sie die Auswahl mit Öffnen. Die Liste im Hauptpanel wird daraufhin um die neue Regel ergänzt, die dem zu erstellenden Ausgabekanal zuzuordnen ist.

Weitere Informationen finden Sie in der FirstSpirit Dokumentation für Administratoren.

Zusätzlich zu den bereits vorhandenen Ausgabekanälen eines Projekts wird ein weiterer XML-Kanal benötigt. Dieser muss für leere Projekte manuell angelegt werden, ist innerhalb des mitgelieferten Referenzprojekts ContentConnect Reference Project jedoch bereits enthalten.

Der Ausgabekanal wurde im ServerManager unter dem Punkt Projekt-Eigenschaften → Vorlagensätze angelegt und besitzt folgende Konfiguration:

Abbildung 11. Ausgabekanal

Der Ausgabekanal ist aktiviert und steht somit im Projekt zur Verfügung. Er dient der Definition der zu übertragenden Inhalte, die während der Generierung in Nachrichten zusammengefasst und an den CaaS übermittelt werden.

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.

Für das Referenzprojekt werden die Auflösungen CONTENT_IMAGE, BANNER_IMAGE and MAGAZINE_ARTICLE_BANNER benötigt. Sie sind bereits innerhalb des ServerManagers im Bereich Projekt-Eigenschaften → Auflösungen angelegt und an den entsprechenden Stellen angegeben.

Abbildung 12. Auflösungen

Die Freigabe von Inhalten sieht standardmäßig keine Aktualisierung des Online CaaS und keine Datenübertragung nach Spryker vor. Sie umfasst stattdessen lediglich den FirstSpirit-Freigabeprozess, der sich beispielsweise durch die Benutzung des Freigabe-Arbeitsablaufs der BasicWorkflows abbilden lässt. Eine Aktualisierung des Online CaaS sowie eine Datenübertragung nach Spryker findet erst im Rahmen einer Veröffentlichung statt.

Die Veröffentlichung freigegebener redaktioneller Inhalte erfolgt durch die Ausführung eines CaaS-Auftrags. Das Referenzprojekt besitzt dafür den Auftrag Spryker Deployment, der innerhalb des ServerManagers im Bereich Projekt-Eigenschaften → Auftragsverwaltung angelegt ist. Er lässt sich mithilfe der im ContentCreator verfügbaren Aktion Veröffentlichung starten und enthält die folgenden Aktionen:

Abbildung 13. Aktionen der Vollgenerierung

Der Auftrag führt eine Vollgenerierung aus und überträgt die Daten in den Online CaaS, der sie Spryker für den Import bereitstellt. Dabei dienen die Aktionen Initialize CaaS Generation, CaaS Generate, CaaS Cleanup und Finalize CaaS Generation der Befüllung des Online CaaS. Sie sind in der Content as a Service-Dokumentation beschrieben.

Die Aktionen Execute Publish Media to CDN, Setup CaaS Blocks Aggregations, Trigger Spryker Import, Trigger Fetch Spryker Logs, Trigger Spryker Cleanup und Send Result Mail erweitern den Auftrag und sind in den nachfolgenden Unterkapiteln beschrieben.