In Salesforce Commerce Cloud einfach Content pflegen

Veröffentlicht am 26.03.2019

Salesforce Commerce Cloud ist eine leistungsfähige Shopumgebung und FirstSpirit ein integrationsfreudiges Content Management System. Zusammen bieten sie dem Redakteur ausgefeilte Möglichkeiten Inhalte zu erstellen.

Dr. Max Möllers

CEO and Project Management

ContentConnect Integration

Homepage der Integration

Salesforce Commerce Cloud ( SFCC) bietet viele Bezahlmöglichkeiten, einen guten Einkaufsprozess, zuverlässiges Hosting und Skalierbarkeit sowie übersichtliche Produkt- und Kategorienpflege mit diversen Discount und Kampagnenoptionen.

Möchte man jedoch dem Kunden anstelle eines schnöden Produktkatalogs eher eine Erlebniswelt bieten, benötigt man deutlich mächtigere Werkzeuge für die Pflege der Inhalte.

Dafür eignet sich ein integrationsfreudiges Content Management System wie FirstSpirit bestens. Statt dem Redakteur zuzumuten selbst HTML zu schreiben, kann er in einer intuitiven Oberfläche Inhalte pflegen und diese mit einem Knopfdruck in die Shopumgebung übernehmen.

Im Rahmen dieses Artikels wollen wir uns im Detail anschauen, wie die ContentConnect Integration funktioniert. Die Integration mit anderen Shopsystem erfolgt nach ähnlichen Grundprinzipien.

Architektur

Architekurskizze des FirstSpirit Moduls

Die Integration besteht aus zwei Teilen:

  • Auf der FirstSpirit Seite wird gepflegter Inhalt in XML Dateien exportiert. Diese Dateien werden dann vom Shop importiert, der diese in vollwertige eigene Shopinhalte umwandelt. Bis auf den technischen Namen unterscheiden sich somit Inhalte aus FirstSpirit nicht von den Inhalten die aus dem Shop selbst stammen. FirstSpirit ist also das führende System für redaktionelle Inhalte, der Shop erhält immer die aktuelle Version nach Freigabe.

  • Salesforce Commerce Cloud stellt dem Content Management System im Gegenzug Informationen zu Produkten und Kategorien zur Verfügung. Der Shop ist somit das führende System für den Produktkatalog.

Das auslieferende System ist immer die Shop-Plattform. Der FirstSpirit-Server kann somit im unternehmenseigenen oder Cloud-Netzwerk komplett abgeschottet betrieben werden, was aus Datenschutz-, Skalierungs- und Verfügbarkeitsgründen sehr vorteilhaft ist. Das Content Management System muss unabhängig von der Anzahl an Websitenbesucher nicht mit skaliert werden, sondern richtet sich lediglich nach der Anzahl der Redakteure die Inhalte pflegen.

Deployment

Im Gegensatz zu einem Web-CMS arbeitet das Shopsystem nicht mit klassischen Seiten und Absätzen, sondern fasst Inhaltsblöcke als sogenannte “Assets” zusammen. Ein Beispiel ist ein Banner mit Link auf ein Produkt. Diese Assets können wiederum auf beliebigen Seiten des Shops genutzt werden. Sie werden in einer der XML Dateien von FirstSpirit exportiert.

<content content-id="fs-homepage-301721">
    <display-name xml:lang="x-default">Homepage</display-name>
    <online-flag>true</online-flag>
    <searchable-flag>true</searchable-flag>
    <custom-attributes>
        <custom-attribute attribute-id="body" xml:lang="default">
            <![CDATA[ 
            <img class="top-banner" src="https://img.shop.com/i/banner.png">
             ]]>
        </custom-attribute>
    </custom-attributes>
    <folder-links>
        <classification-link folder-id="fs-global"/>
    </folder-links>
</content>

Zusätzlich wird eine Datei mit Metainformationen geschrieben, die angibt auf welchen Shopseiten die Assets genutzt werden sollen. Hier werden Informationen gespeichert, die es erlauben die Assets nur gewissen Nutzergruppen anzuzeigen oder zeitgesteuert darzustellen.

<slot-configuration assigned-to-site="true" 
                    configuration-id="fs_slot_configuration_301721" 
                    context="global" default="true" 
                    slot-id="home-main">
    <template>slots/content/contentassetbody.isml</template>
    <enabled-flag>true</enabled-flag>
    <content>
        <content-assets>
            <content-asset content-id="fs-homepage-301721"/>
        </content-assets>
    </content>
</slot-configuration>

Der Transfer der Dateien vom CMS zum Shop kann auf verschiedenen Wegen erfolgen. Ein einfaches Szenario kann man mit WebDAV aufsetzen, aber auch SFTP kommt häufiger vor.

Hinweis: Da SFCC eine klassische Aufteilung zwischen Staging- und Produktivumgebung besitzt, müssen veränderte Inhalte nach Freigabe im CMS nicht nur zur Stagingumgebung publiziert werden, sondern danach durch Replikation in die Produktivumgebung. Letzteres stellt somit in Projekten meist den organisatorischen und zeitlichen Flaschenhals dar. Dies kann man umgehen indem man eine zweite Auslieferungsschicht wie z. B. FirstSpirit CaaS parallel betreibt, die die Inhalte aus dem CMS anderweitig zur Verfügung stellt, während der Shop seine Produkte und Kategorien weiterhin selbstständig ausliefert. Dadurch kann die Veröffentlichungszeit von geänderten Inhalten in Kombination mit Deltadeployments auf wenige Sekunden reduzieren. Ein Delta-Deployment berechnet die Änderungen seit der letzten Publikation und veröffentlicht nur geänderte Elemente, statt einen kompletten Abzug der CMS-Daten vorzunehmen.

Integration aufsetzen

Die folgenden fünf Schritte sind notwendig, um die Integration nutzen zu können:

  • Die FirstSpirit Integration im Salesforce Commerce Cloud Shop installieren.

  • Shop Zugriffsrechte anpassen, sodass Inhalte in das System importiert und Informationen an das CMS zurückgespiegelt werden können.

  • FirstSpirit mit den Zugangsinformationen für den Shop versehen.

  • Seitenvorlagen im Shop anpassen, damit diese für das WYSIWYG Editieren durch Redakteure genutzt werden können.

  • Seitenvorlagen im Content Management System anpassen

Die ersten drei Schritte müssen nur einmalig durchgeführt werden und nehmen in etwa eine Stunde in Anspruch. Diese Schritte sind bereits sehr gut in der offiziellen Dokumentation erläutert. Wir werden daher in diesem Artikel Schritte 4 und 5 genauer beleuchten, bei denen es um die tatsächlichen Anpassungen der Templates geht.

Anpassung der Templates im Redaktionssystem und dem Shop

Warum müssen die Templates denn angepasst werden?

FirstSpirit soll Inhalte generieren, die dem Design des Shops entsprechen. Damit das der Fall ist müssen die dafür verwendeten FirstSpirit Templates mit zusätzlichen Informationen angereichert werden.

Weniger selbstverständlich ist, warum auch im Shop Anpassungen notwendig sind. Betrachten wir dazu die Funktionsweise der Vorschau der Inhalte in der Redaktionsumgebung.

Preview Filter

Der Shop ist das ausliefernde System, also kennt nur der Shop das richtige Layout und Design aller Elemente. FirstSpirit liefert lediglich die darzustellenden Inhalte, hat allerdings keine Informationen über das Layout der jeweiligen Shopseiten. Damit wir Redakteuren eine korrekte Vorschau ihrer Inhalte liefern können, müssen wir die zugehörige Webseite also direkt aus Salesforce beziehen. Wenn in FirstSpirit nun geänderte Elemente vorhanden sind, müssen wir die alten Inhalte mit den Neuen austauschen. Für unser Beispiel nutzen wir das Banner der Seite. Diesen Austausch übernimmt die Integration mit einem Filter:

  • Er fragt beim Shop das HTML der Webseite an

  • identifiziert das Banner in dem HTML

  • fragt beim CMS das HTML für die aktuelle Version des Banners an

  • tauscht die Version aus dem Shop gegen die Version aus dem CMS aus.

Damit der Filter jedoch weiß welchen Teil des HTMLs er austauschen muss, umranden wir dieses Element im Shop mit HTML Kommentaren, z.B. <!-- CMS-BANNER-START --> und <!-- CMS-BANNER-END -->.

<!-- CMS-BANNER-START -->
    $CMS_VALUE(#global.page.body("cat_landing_slotbanner"))$
<!-- CMS-BANNER-END -->

Mit denselben Kommentaren umranden wir auch das Banner das FirstSpirit erzeugt. Dadurch kann der Filter beide Schnittmarken eindeutig zuordnen und tauscht die Inhalte automatisch aus. Wir erhalten eine HTML-Seite, die dem Redakteur eine korrekte Vorschau bietet.

<isdecorate template="common/layout/page">
    <isscript>
        var assets = require('*/cartridge/scriptsassets');
        assets.addCss('/css/search.css');
    </isscript>
    <!-- CMS-BANNER-START -->
    <isslot id ="cat-landing-slotbanner" context="category"
               description="Banner at the top of the CLP" 
               context-objects="${pdict.category}" />
    <!-- CMS-BANNER-END -->
</isdecorate>

Diese Austauschmechanik können wir nicht nur für die inhaltliche Aufbereitung des HTMLs nutzen, sondern auch auf technischer Ebene Probleme beheben: Wenn die Shopseite Links auf Shopfunktionalitäten beinhaltet, z.B. eine Sprachenauswahl, können wir das zugehörige HTML durch eine eigene Sprachenauswahl ersetzen, die es dem Redakteur erlaubt die Sprache in FirstSpirit umzustellen.

Zusammenfassung und Ausblick

In diesem Artikel haben wir die Architektur und Hauptkomponenten der Integration von FirstSpirit mit Salesforce Commerce Cloud vorgestellt.

Es handelt sich um eine leichtgewichtige Integration auf Shopseite, die man mit relativ wenig Gefahren einführen kann. Der erste Schritt ist dank des mitgelieferten Beispielprojekts sehr einfach und schnell umsetzbar --- mit kompetenter Unterstützung hat man an einem Nachmittag die erste Shopseite produktiv pflegbar. Danach kann man Schritt für Schritt von den mächtigen Pflegemöglichkeiten von FirstSpirit profitieren. Dann sind selbst multi-site oder multi-brand Projekte mit dutzenden Redakteuren mit überschaubarer Komplexität realisierbar, was es den Verantwortlichen erlaubt mehr Zeit in kreative Kampagnen zu investieren und die Conversions zu verbessern.

facebook icon twitter icon xing icon linkedin icon
© 2019 aboutcontent GmbH