1. Einleitung

Das vorliegende Dokument richtet sich an Personen, welche das Projekt einrichten und Entwickelnde und beschreibt die notwendigen Arbeitsschritte für die Einrichtung von FirstSpirit Connect for Commerce. Zusätzliche Informationen über die Architektur sowie die mit Connect for Commerce zur Verfügung gestellten Funktionalitäten sind in der Hauptdokumentation beschrieben.

Notwendige Kompetenzen und Erfahrungswerte für MVP-Implementierungen sind in der Hauptdokumentation skizziert.

2. Getting Started

Das folgende Kapitel beschreibt die notwendigen Schritte zur Einrichtung von Connect for Commerce.

2.1. FirstSpirit-Projekt

Um Connect for Commerce zu verwenden, wird ein FirstSpirit-Projekt benötigt. Es besteht die Möglichkeit entweder ein Referenz- oder ein individuelles Projekt zu verwenden. In beiden Fällen muss zum Einrichten des Projektes Kontakt mit dem Technical Support aufgenommen werden.

2.1.1. Referenzprojekt

Die Crownpeak Technology GmbH stellt das FirstSpirit Connect for Commerce Reference Project, nachfolgend Referenzprojekt genannt, zur Verfügung welches vorgefertigte Seitenvorlagen und Absatzvorlagen beinhaltet. Die Seitenvorlagen und Absatzvorlagen bilden ein Grundgerüst für die Weiterentwicklung, um speziellere Anwendungsfälle abzudecken.

2.1.2. Individuelles Projekt

Außerdem ist es möglich ein neues Projekt zu erstellen, um dieses nach eigenen Anforderungen zu gestalten.

Dabei sind folgende Punkte zu beachten:

Konfiguration vornehmen

Nachdem das Projekt auf dem FirstSpirit-Server installiert wurde, muss das Connect for Commerce-Modul konfiguriert werden.

BasicWorkflows (optional)

Die Freigabe und Löschung von Inhalten durch die Redaktion erfolgt über Workflows. Alternativ zu projektspezifischen Arbeitsabläufen stehen für diesen Zweck die BasicWorkflows zur Verfügung.

Einrichtung des BasicWorkflows-Moduls

Der Einsatz der BasicWorkflows im ContentCreator erfordert die Auswahl des bereitgestellten BasicWorkflows Status Providers im Bereich Projekt-Eigenschaften  ContentCreator innerhalb des ServerManagers.

Bildschirmaufnahme, welche die Auswahl des 'Element Status Provider' im Bereich 'ContentCreator' des ServerManagers zeigt
Abbildung 1. Element Status Provider

Vorlagen

Die BasicWorkflows benötigen verschiedene Vorlagen. Diese erfordern üblicherweise einen Import über das Kontextmenü in das verwendete FirstSpirit-Projekt.

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 im SiteArchitect auf den Root-Knoten der Verwaltungen über den Kontextmenüeintrag Extras  Rechte ändern die Rechtevergabe öffnen.

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 zur Installation, Konfiguration und Funktionalität der Arbeitsabläufe stehen in der BasicWorkflows-Dokumentation.

YouTube-DAP-Integration (optional)

Mit der YouTube-DAP-Integration lassen sich YouTube-Videos in einem Report darstellen. Die im Report angezeigten Videos lassen sich mithilfe des bereitgestellten Data Access Plugins referenzieren. Die Einrichtung ist in der zugehörigen Readme-Datei erläutert.

Interactive Video (optional)

Für die Verwendung des Interactive Video muss das YouTube-DAP-Integration-Modul installiert und konfiguriert sein. Außerdem müssen die mit dem Modul mitgelieferten Seitenvorlagen importiert werden.

Vorlagen und Data Access Plugins

Um unterschiedliche Seitentypen zu erzeugen, sind verschiedene Seitenvorlagen notwendig.

Für Produkt-Detailseiten muss eine Seitenvorlage mit der UID product erstellt werden.

Für Kategorie-Detailseiten muss eine Seitenvorlage mit der UID category erstellt werden.

Da alle anderen Seiten als Inhaltsseiten behandelt werden, ist die UID der Vorlage in diesem Fall für die Funktion nicht ausschlaggebend. Für Inhaltsseiten können somit unterschiedliche Seitenvorlagen erstellt werden. Alle Seitenvorlagen müssen die im Folgenden beschriebenen Eingabekomponenten enthalten.

Jeder Seitenvorlage müssen die Text-Eingabekomponenten id und type hinzugefügt werden. Im id-Feld speichert das Connect for Commerce-Modul den Identifier der zugehörigen Seite aus dem Shop-System. Der in diesem Feld eingetragene Wert sollte in der Regel nicht verändert werden. Aus diesem Grund empfiehlt es sich das Feld zu verstecken.

Das Feld type dient zur Identifizierung des Seitentyps. Um den Typ bei der Erstellung einer Seite automatisch zu setzen, sollten Vorgabewerte gesetzt sein. Auch dieses Feld sollte versteckt sein, um eine nachträgliche Veränderung zu vermeiden.

Eingabekomponenten zu Identifizierung einer Seite
<?xml version="1.0" encoding="UTF-8"?>
<CMS_MODULE>

  <CMS_INPUT_TEXT name="id" hFill="yes" hidden="yes" singleLine="no" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="id"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

  <CMS_INPUT_TEXT name="type" hFill="yes" hidden="yes" preset="copy" singleLine="no" useLanguages="no">
    <LANGINFOS>
      <LANGINFO lang="*" label="type"/>
    </LANGINFOS>
  </CMS_INPUT_TEXT>

</CMS_MODULE>

Für die Typen content, product und category existiert ein zugehöriges Data Access Plugin (DAP). Dieses ermöglicht jeweils die Verlinkung der bereitgestellten Daten und deren Einbindung in redaktionellen Inhalten. Im Fall des Typs product ist somit beispielsweise die Verlinkung von Produkten und die Erstellung von Produktteasern möglich.

Dazu genügt das Hinzufügen einer FS_INDEX-Eingabekomponente zur Vorlage des Absatzes, in dem Inhalt mit einem Produkt verknüpft werden soll:

FS_INDEX-Eingabekomponente in Absatzvorlage
<FS_INDEX name="st_product" height="1" useLanguages="no">
    <LANGINFOS>
        <LANGINFO lang="*" label=""/>
    </LANGINFOS>
    <SOURCE name="FirstSpirit Connect for Commerce/FirstSpirit Connect for Commerce - Products Data Access Plugin"/>
</FS_INDEX>

Auf dieselbe Art und Weise können Inhalte sowohl mit Kategorien als auch mit weiteren Inhaltsseiten verknüpft werden. Lediglich das anzubindende DAP muss entsprechend ausgetauscht werden. Zur Verfügung stehen folgende drei DAPs:

  • FirstSpirit Connect for Commerce - Products Data Access Plugin

  • FirstSpirit Connect for Commerce - Categories Data Access Plugin

  • FirstSpirit Connect for Commerce - ContentPages Data Access Plugin

2.2. Definition der externen Vorschau-URL

Durch die Verwendung des Omnichannel Managers kann der ContentCreator die Storefront darstellen. In den ContentCreator-Eigenschaften ist daher die URL der Storefront anzugeben, welche Vorschau-Inhalte enthält.

Die Konfiguration wird im ServerManager unter Projekt-Eigenschaften  ContentCreator vorgenommen.

Bildschirmaufnahme, welche die Konfiguration 'Externe Vorschau-URL' im Bereich 'ContentCreator' des ServerManagers zeigt
Abbildung 2. Externe Vorschau-URL

2.3. Konfiguration der Projekt-Komponente

Für den Einsatz des Connect for Commerce-Moduls sind einige projektspezifische Informationen erforderlich. Sie sind über die Projekt-Komponente anzugeben, welche dem Projekt hinzugefügt werden muss. Bei Verwendung des Referenzprojekts ist die Projekt-Komponente bereits hinzugefügt.

Die Konfiguration muss im ServerManager im Bereich Projekt-Eigenschaften  Projekt-Komponenten vorgenommen werden.

Bildschirmaufnahme, welche den Bereich Projekt-Komponenten innerhalb der Projekt-Eigenschaften zeigt
Abbildung 3. Projekt-Eigenschaften - Projekt-Komponenten

Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen. Der Eintrag FirstSpirit Connect for Commerce - Project Configuration sollte selektiert und der zugehörige Konfigurationsdialog über Konfigurieren geöffnet werden.

Im Tab Allgemein können folgende Einstellungen vorgenommen werden:

  • Der absolute Pfad zur ContentCreator Extension-Datei

  • ContentCreator Extension nutzen

  • Erzeugung von Inhaltsseiten über Bridge deaktivieren

Für den Fall, dass die Connect for Commerce Frontend API nicht genutzt wird, muss die ContentCreator Extension verwendet werden. Diese entspricht einer JavaScript-Datei, welche vom ContentCreator aus erreichbar sein muss. Das Skript ermöglicht die Kommunikation zwischen ContentCreator und dem FirstSpirit Connect for Commerce-Modul. Die Implementierung der ContentCreator Extension wird auf GitHub bereitgestellt.

Bei Verwendung der Frontend API muss die Checkbox ContentCreator Extension nutzen deaktiviert sein.

Das Connect for Commerce-Modul kann die Erzeugung von Inhaltsseiten auf zwei verschiedene Weisen handhaben:

  1. Beim Erstellen einer Inhaltsseite im ContentCreator wird über die Bridge ein Äquivalent der Seite im Shop-System erzeugt. Dies ist nur notwendig, wenn die Seitenstruktur, welche in der Storefront dargestellt wird, identisch mit der Struktur aus dem Shop-System sein muss.

  2. Über die Checkbox Erzeugung von Inhaltsseiten über Bridge deaktivieren kann das Verhalten von ersten Fall unterbunden werden. So können Inhaltsseiten erzeugt werden, deren Inhalt und Struktur ausschließlich von FirstSpirit vorgegeben wird.

Bildschirmaufnahme, welche den Tab 'Allgemein' der Connect for Commerce Projekt-Komponente zeigt
Abbildung 4. Projekt-Komponente - Konfigurationsdialog - Allgemein

Im Tab Bridge werden folgende Einstellungen vorgenommen:

  • Die API URL der Bridge

  • Die Zugangsdaten für die Anmeldung an der Bridge

Außerdem kann über die Schaltfläche Bridge Verbindung testen die Verbindung zur Bridge getestet werden.

Bildschirmaufnahme, welche den Tab 'Bridge' der Connect for Commerce Projekt-Komponente zeigt
Abbildung 5. Projekt-Komponente - Konfigurationsdialog - Bridge

Im Tab Reports ist sowohl für den Kategorien- als auch für den Produkte-Report optional die Anzahl der Kategorieebenen definierbar. Diese beschränken die Darstellung des Kategoriebaums innerhalb des entsprechenden Reports auf die Anzahl der gewünschten Ebenen, für die standardmäßig jeweils der Wert 3 vorgegeben ist.

Bildschirmaufnahme, welche den Tab 'Reports' der Connect for Commerce Projekt-Komponente zeigt
Abbildung 6. Projekt-Komponente - Konfigurationsdialog - Reports

Im Tab Cache ist sowohl die maximale Anzahl an als auch die Lebensdauer von Elementen im Cache einstellbar. Die Größe des Caches ist eine Balance zwischen Speicherverbrauch und Reaktionsgeschwindigkeit und ist projektabhängig, genau wie die Einstellung der Lebensdauer, welche eine Balance zwischen Aktualität der Daten und minimaler Last im Shop-System / Bridge darstellt.

Einige Details zu dem Eingabefeld:

  • Die Cache-Lebensdauer ist im angegebenen Format einzutragen.

  • Fehlerhafte Eingaben setzen den Wert zurück auf die letzte Version.

  • Das Eintragen von Nicht-Zahlen oder das Leeren des Feldes setzt die Konfiguration auf den Standard-Wert von 5 Minuten zurück.

  • Überfließende Werte werden aufaddiert. So wird z.B. die Eingabe von 61 Sekunden als 1 Minute und 1 Sekunde abgespeichert. Beim nächsten Öffnen der Projektapp wird der Wert umgerechnet angezeigt.

Die Konfiguration wird sofort angewandt. Bereits im Cache enthaltene Elemente werden jedoch erst bei der nächsten Anfrage an die Bridge und auch nur nach den angegebenen Regeln entfernt.

Bildschirmaufnahme, welche den Tab 'Cache' der Connect for Commerce Projekt-Komponente zeigt
Abbildung 7. Projekt-Komponente - Konfigurationsdialog - Cache

Die Verwendung des Interactive Videos setzt zusätzlich die Konfiguration der YouTube-DAP-Integration voraus. Diese ist in der zugehörigen Readme-Datei erläutert.

Das Referenzprojekt bindet außerdem die CXT ContentCreator: Feature Configuration ProjectApp ein. Diese enthält eine vordefinierte Konfiguration, deren Veränderung zu einer Verhaltensänderung des ContentCreators führen kann. Eine Anpassung der Konfiguration ist daher nur nach vorheriger Rücksprache mit dem Technical Support vorzunehmen.

2.3.1. Anbindung der Bridge

Die Bridge stellt die Implementierung der FirstSpirit Connect for Commerce-API dar und bildet die Verbindung zwischen FirstSpirit und dem Shop-System.

Bereitstellung der Bridge

Informationen zur Implementierung der Bridge sind in der entsprechenden Anleitung Implementierung einer Bridge zu finden.

Verbindungstest

Die Projekt-Komponente bietet die Möglichkeit die Verbindung zwischen dem Connect for Commerce-Modul und der Bridge zu testen.

Das Protokollfenster zeigt das Resultat des Verbindungstests detailliert an. Dabei werden erfolgreiche Anfragen sowie Fehler eindeutig dargestellt. Zusätzlich wird angezeigt, wenn ein Endpunkt veraltet ist und bald eingestellt wird.

bridge test connection success de
Abbildung 8. Beispielausgabe: Erfolgreicher Verbindungstest
bridge test connection disabled features de
Abbildung 9. Beispielausgabe: Deaktiviertes Feature
bridge test connection missing project uuid header en
Abbildung 10. Beispielausgabe: Der Header mit der Projekt-UUID wurde anscheinend nicht an die Bridge geschickt.
bridge test connection bridge down de
Abbildung 11. Beispielausgabe: Fehlerhafter Verbindungstest

2.4. Frontend

Für die Anbindung der Storefront stehen zwei verschiedene Möglichkeiten zur Verfügung.

Es gilt zu beachten, dass nur eine der beiden im Folgenden beschriebenen Optionen umgesetzt werden muss.

2.4.1. Einbindung der Connect for Commerce Frontend API

Informationen zur Verwendung der Frontend API sind in der Dokumentation zu finden.

2.4.2. Eigenimplementierung der Frontend-Integration

Grundsätzlich sind für die Eigenimplementierung folgende Punkte zu berücksichtigen:

3. Referenzprojekt

Das Connect for Commerce-Modul stellt unterschiedliche Möglichkeiten bereit, auf Shop-Inhalte zuzugreifen und diese in FirstSpirit zu verwenden. Dafür sind sowohl innerhalb des FirstSpirit-Projekts als auch in der Storefront verschiedene Komponenten erforderlich. Die nachfolgenden Unterkapitel beschreiben diese Komponenten und die zwischen ihnen bestehenden Beziehungen anhand des mitgelieferten Referenzprojekts.

Das Referenzprojekt dient als Leitfaden und beinhaltet Beispielvorlagen und Best Practices für Entwickelnde, um eine schnelle und reibungslose Implementierung zu ermöglichen. Das Referenzprojekt ist ebenfalls auf GitHub zu finden.

3.1. Sprachen

Um Shop-Inhalte mit FirstSpirit mehrsprachig pflegen zu können, ist es notwendig eine eindeutige Zuordnung zwischen Shop-Sprachen und Sprachen des Projekts zu schaffen. Die im FirstSpirit-Projekt definierten Sprachen sind daher so zu wählen, dass ihre Abkürzungen den Kürzeln der Shop-Sprachen entsprechen.

Innerhalb des Referenzprojekts sind DE und EN als verfügbare Sprachen vorkonfiguriert. Benötigt der Shop hingegen Sprachkürzel im Locale-Format (z.B. en_GB), so sind die beiden Sprachen DE und EN zu entfernen und durch Projektsprachen mit entsprechenden Abkürzungen zu ersetzen. Bei der Zuordnung von Shop-Sprachen zu Projekt-Sprachen wird nicht zwischen Groß- und Kleinschreibung unterschieden.

Weitere Informationen zur Auswahl und Konfiguration von Sprachen im Projekt sind in der FirstSpirit Online-Dokumentation zu finden.

3.2. Seiten

Im Gegensatz zur Auslieferung der Shop-Inhalte verlagert sich durch die Verwendung von Connect for Commerce deren Erstellung und Pflege nach FirstSpirit. FirstSpirit stellt dafür den ContentCreator zur Verfügung. In ihm lassen sich mithilfe des Omnichannel Managers sowohl die mit FirstSpirit erstellten Seiten als auch die bereits existierenden Shop-Seiten darstellen und mit redaktionellen Inhalten anreichern.

Die Erzeugung und Bearbeitung redaktioneller Inhalte erfolgt in FirstSpirit grundsätzlich auf Basis einer Seite.

Das Referenzprojekt besitzt für Inhalts-, Produkt- und Kategorieseiten die folgenden Seitenvorlagen:

  • Homepage

  • Inhaltsseite

  • Kategorieseite

  • Produktseite

  • Landingpage

Homepage

Die Homepage-Seitenvorlage ist ein Beispiel für statische Seiten wie beispielsweise die Startseite, die Login-Seite oder der Warenkorb. Statische Seiten besitzen eine feste URL und existieren standardmäßig nur einmal innerhalb eines Shops. Sie sind durch den Shop vorgegeben und besitzen ein eigenes Layout, das sie von den übrigen Seiten unterscheidet. Aus diesem Grund benötigen sie jeweils eine eigene Vorlage.

Inhaltsseiten

Die Vorlagen der Inhaltsseiten bilden die Basis für die Standardseiten des Projekts und werden daher mehrfach referenziert.

Kategorie- / Produktseiten

Sowohl die Kategorie- als auch die Produktseiten dienen der Darstellung der aus dem angebundenen Shop-System stammenden Produkte. Produktseiten stellen dafür die Detailansicht eines spezifischen Produkts dar. Im Gegensatz dazu bieten die Kategorieseiten eine Übersicht über alle einer Kategorie zugehörigen Produkte.

Die Einbindung der aus dem angebundenen Shop stammenden Kategorie- und Produktinformationen erfolgt unter anderem über zwei Reports, die das Connect for Commerce-Modul im ContentCreator bereitstellt.

Landingpages

Landingpages sind ebenfalls Inhaltsseiten und können unter Anderem themenorientierte oder temporäre Seiten sein.

3.3. Inhaltsbereiche

Die im Referenzprojekt enthaltenen Seitenvorlagen besitzen vordefinierte Inhaltsbereiche, die den in der Storefront markierten, editierbaren Inhaltsbereiche zugeordnet werden.

Eine Auflistung der zur Verfügung stehenden Inhaltsbereiche findet sich in der nachfolgenden Tabelle:

Seitenvorlage Inhaltsbereiche

Homepage

stage, content

Inhaltsseite

stage, content

Kategorieseite

stage, sup_content, sub_content

Produktseite

stage, sup_content, sub_content

Landingpage

stage, left_content, right_content, content, sub_content

Um einen Bereich in der Storefront als einen editierbaren Inhaltsbereich zu markieren, ist es notwendig, das HTML-Element mit dem Referenznamen des zu verwendenden Inhaltsbereiches aus der Seitenvorlage zu versehen:

Beispiel: Markierung eines Inhaltsbereiches
<div data-fcecom-slot-name="stage">
  ...
</div>

Es muss sichergestellt werden, dass die Namen der Inhaltsbereiche aus der Storefront und dem FirstSpirit-Projekt übereinstimmen. Dies ist notwendig, um eine erfolgreiche Zuordnung der Inhaltsbereiche zu gewährleisten.

3.4. Absätze

Innerhalb des Referenzprojekts werden die editierbaren Bereiche einer Seite durch die Inhaltsbereiche einer FirstSpirit-Seitenvorlage repräsentiert. Ihnen können Absätze hinzugefügt werden, die jeweils der äquivalenten Komponente einer Shop-Seite entsprechen.

Das Referenzprojekt stellt dafür die folgenden Absatzvorlagen zur Verfügung:

  • Banner

  • Karussell

  • Interactive Video

  • Interactive Image

  • Text/Bild

  • Featured Products

  • Modal

  • Multi-Slot Container

  • Teaser Grid

Banner

Das Banner entspricht einem einzelnen Bild im Querformat, das standardmäßig im Kopfbereich einer Seite eingebunden ist.

Der Absatz erlaubt die Auswahl eines Bilds, welches zugeschnitten werden kann, die Angabe einer Überschrift, eines Untertitels und eines Verweises. Sowohl die Textfarbe als auch die Position sind für die Überschrift, den Untertitel und den Verweis selektierbar.

Karussell

Das Karussell gleicht in Form und Editierbarkeit dem Banner. Im Gegensatz zu diesem bindet es jedoch mehrere Bilder ein, die kontinuierlich rotieren.

Interactive Video

Das Interactive Video ermöglicht die Anzeige und Referenzierung von Produkten zu definierten Zeitpunkten in einem Video.

Der Absatz erfordert die Auswahl eines Videos, in dem zu beliebigen Zeitpunkten Text/Bild- oder Produkt-Elemente einblendbar sind.

Text/Bild-Element
Ein Text/Bild-Element besteht aus einem Bild, einer Überschrift, einem Text und einem Inhaltsverweis.

Produkt-Element
Ein Produkt-Element enthält jeweils ein Produktfoto, einen Produktnamen, eine Produktbeschreibung sowie optional ein Bild und einen Text.

Die Verwendung des Interactive Videos setzt zwingend die Installation und Konfiguration der Module YouTube-DAP-Integration und Interactive Video voraus. Andernfalls besitzt dieser Absatz keine Funktionalität.

Interactive Image

Das Interactive Image ermöglicht die Anzeige und Referenzierung von Produkten auf einer Image Map.

Der Absatz erfordert die Auswahl eines Bildes, auf dem Verweise zu Produktdetailseiten einblendbar sind. Zusätzlich kann neben dem Bild auch eine Überschrift und ein Text gepflegt werden.

Text/Bild

Im Text-Bild-Absatz muss ein Text eingegeben werden. Zusätzlich möglich ist die Angabe einer Überschrift und die Auswahl eines Bilds, das links oder rechts neben dem Text positionierbar ist.

Featured Products

Das Featured Products ist eine Layoutkomponente, die neben der Eingabe einer Überschrift und eines Texts die automatische Anordnung von Produktelementen ermöglicht. Die Anordnung der Elemente ist dabei abhängig von ihrer Anzahl: Bis zu einer Anzahl von drei Elementen werden diese nebeneinander dargestellt. Zusätzliche Elemente werden in Gruppen von ebenfalls bis zu drei Elementen zusammenfasst und in weiteren Zeilen darunter angezeigt.

Ein Produktelement beinhaltet das Produktfoto, den Produktnamen und die Produktbeschreibung. Die Informationen für ein Produktelement stammen standardmäßig aus dem FirstSpirit Connect for Commerce - Products Data Access Plugin.

Modal

Das Modal ist eine Layoutkomponente, die Informationen in einem eingeblendeten Dialogfeld darstellt, welches den ursprünglichen Inhalt überlagert.

Es erlaubt die Auswahl eines Bildes sowie die Eingabe einer Überschrift, einer Unterüberschrift und eines Texts. Zusätzlich erlaubt ist die Definition eines Verweises.

Das Modal ist keine Standard-Absatzvorlage und kann nur über die Bearbeitung der Seiteninformationen in der ContentCreator-Navigation ausgewählt werden. Im Referenzprojekt ist die Modal-Komponente nur für die Homepage-Seitenvorlage zugelassen.

Multi-Slot Container

Der Multi-Slot Container ist eine Layoutkomponente, die neben der Eingabe einer Überschrift die automatische Anordnung von Inhalts-, Kategorie- oder Produktelementen ermöglicht. Die Anordnung der Elemente ist dabei abhängig von ihrer Anzahl: Bis zu einer Anzahl von vier Elementen werden diese nebeneinander dargestellt und entsprechend skaliert. Zusätzliche Elemente werden in Gruppen von ebenfalls bis zu vier Elementen zusammenfasst und in weiteren Zeilen darunter angezeigt.

Alle Elemente ermöglichen die Eingabe einer Überschrift, eines Untertitels und eines Teasertexts sowie die Auswahl eines Bilds und eines Alt-Texts zum Bild. Des Weiteren enthält die Darstellung der Elemente jeweils einen Button, dessen Beschriftung frei definierbar ist und der auf die Detailansicht des jeweiligen Elements verweist. Dieser Button ist nur dann sichtbar, wenn der Multi-Slot Container lediglich ein einziges Element enthält.

Ergänzend zu den genannten Eingabemöglichkeiten erlaubt das Inhaltselement die Definition eines Verweises. Auch in diesem Fall sind dafür alle im Referenzprojekt verfügbaren Verweistypen zulässig.

Das Kategorieelement besitzt zusätzlich zu den genannten Eingabekomponenten eine Komponente zur Auswahl einer Kategorie. Wird für eine Kategorie kein Bild ausgewählt, zeigt das Kategorieelement ein Standard-Bild an.

Die Informationen für ein Kategorie- und Produktelement stammen standardmäßig aus dem FirstSpirit Connect for Commerce - Categories Data Access Plugin und FirstSpirit Connect for Commerce - Products Data Access Plugin. Sie dienen als Fallback und werden durch Eingaben in den genannten Komponenten überschrieben.

Teaser Grid

Das Teaser Grid ist eine Layoutkomponente, die eine freie Anordnung und Skalierung unterschiedlicher Elemente ermöglicht.

Die Elemente können einem Bild oder einem Video entsprechen, für die jeweils ein Verweis sowie eine Überschrift, ein Untertitel und ein Text definierbar sind.

Die FirstSpirit-seitig gepflegten, redaktionellen Inhalte können die nachfolgenden Verweise enthalten, die sie mit anderen Inhalten verknüpfen.

Das Referenzprojekt stellt dafür die folgenden Verweisvorlagen zur Verfügung:

  • Kategorie- und Produktverweis

  • Inhaltsverweis

  • Externer Verweis

  • CTA-Verweis

  • Interaktiver Produktverweis

  • DOM-Verweis

Kategorie- und Produktverweis

Das Connect for Commerce-Modul stellt im ContentCreator jeweils einen Report für Produkte und Kategorien bereit. In den Reports werden Kategorie- und Produktinformationen aus dem Shop-System dargestellt, welche für Verweise auf Kategorie- bzw. Produktdetailseiten verwenden werden können.

Das Referenzprojekt enthält dafür die Verweisvorlagen category_link und product_link, die einem Kategorie- bzw. Produktverweis entsprechen. Sie ermöglichen die Referenzierung von Kategorie- bzw. Produktdetailseiten.

Inhaltsverweis

Die im Referenzprojekt enthaltene Verweisvorlage internal_link entspricht einem Inhaltsverweis. Er ermöglicht die Referenzierung von Seiten, die innerhalb des Referenzprojekts gepflegt sind.

Externer Verweis

Die Verweisvorlage external_link entspricht einem externen Verweis und funktioniert ähnlich wie der Inhaltsverweis. Für einen externen Verweis eine URL benötigt, statt einer Seitenreferenz, wie beim Inhaltsverweis.

CTA-Verweis

Ein Call-to-Action-Verweis wird mit der Verweisvorlage cta_link im Referenzprojekt zur Verfügung gestellt.
Die Darstellung des Verweistexts erfolgt entweder als heller oder dunkler CTA-Button. Zusätzlich kann ein Verweis aus den bisherigen Verweistypen ausgewählt werden.

Interaktiver Produktverweis

Die Absatzvorlage Interaktives Bild verwendet ausschließlich die Verweisvorlage interactive_product_link.
Er funktioniert ähnlich wie der Produktverweis, mit der Ausnahme, dass zusätzlich eine Überschrift eingetragen werden kann.

DOM-Verweise

Die im Referenzprojekt enthaltenen Verweisvorlagen dom_category_link, dom_content_link, dom_external_link und dom_product_link funktionieren ähnlich wie die zuvor beschriebenen äquivalenten Verweisvorlagen. Diese Verweisvorlagen werden im DOM-Texteditor verwendet und stellen zusätzlich ein Feld für den Verweistext zur Verfügung.

4. Referenzen

Nachfolgend finden Sie eine Übersicht aller Referenzen, die Sie bei der Einrichtung von Connect for Commerce unterstützen:

Dokumentationen:

APIs:

Referenzimplementierungen auf GitHub:

Module:

5. Rechtliche Hinweise

FirstSpirit Connect for Commerce ist ein Produkt der Crownpeak Technology GmbH, Dortmund, Germany.
Für die Verwendung des Moduls gilt nur die mit der Crownpeak Technology GmbH vereinbarte Lizenz.

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