Diese Ein- bzw. Anleitung soll Ihnen dabei helfen Änderungen im CMS vorzunehmen und so den Inhalt in Ihrem Shop zu ändern.

Inhaltsverzeichnis

1. Anmeldung bei strapi CMS

Um Inhalte in deinem Online-Shop über das strapi CMS zu verwalten, musst du dich zunächst anmelden. Dies geschieht über eine spezielle URL, die direkt an das CMS deines Shops angebunden ist.

Die URL zum CMS wird in der Regel aus der ShopID und dem Zusatz "cms" gebildet.

Zum Beispiel: Wenn die ShopID deines Shops mustershop lautet, wird die CMS-URL mustershop-cms.websale.net sein.

Nachdem du die CMS-URL aufgerufen hast, meldest du dich mit deinem Benutzernamen und Passwort an. Diese Zugangsdaten erhältst du in der Regel bei der Ersteinrichtung deines Kontos oder von deinem Administrator. Mit diesen Anmeldedaten kannst du dann auf die Verwaltungsoberfläche zugreifen und beginnen, die Inhalte deines Shops zu pflegen und zu aktualisieren.

1.1. Initiales Login

Erhalt des Anmeldelinks: Bei der Einrichtung des CMS-Systems durch WEBSALE bekommst du eine E-Mail mit einem Link, der dich direkt zur Anmeldeseite des CMS führt. Dieser Link ist für das initiale Einrichten deines Zugangs gedacht.

Passwort setzen: Beim ersten Besuch des Links wirst du aufgefordert, ein Passwort für dein Konto zu erstellen. Dieses Passwort wird für zukünftige Anmeldungen benötigt.

Erster Login: Nachdem du dein Passwort gesetzt hast, kannst du dich mit deiner E-Mail-Adresse und dem neu erstellten Passwort anmelden.

Zugangsdaten ändern: Nach dem ersten erfolgreichen Login hast du die Möglichkeit, über dein Kundenkonto in Strapi deine Zugangsdaten zu ändern oder zu aktualisieren.

1.2. Startseite nach erfolgreichem Login

Nach erfolgreichem Login landest Du auf der Startseite und siehst nun verschiedene Einstiegsmöglichkeiten:

Open

Auf der Startseite sehen Sie nun verschiedene Einstiegsmöglichkeiten. Dazu gehören unter anderem Verlinkungen zu der eigenen Dokumentation von Strapi. Auch diese ist für das allgemeine Verständnis der Funktionsweise von Strapi selbst sehr empfehlenswert.

1.3 Sprache ändern

Standardsprache ist immer Englisch.

In Strapi kannst du einfach zwischen den verfügbaren Anzeigesprachen wechseln.

Derzeit stehen Deutsch und Englisch zur Verfügung.

Hier sind die Schritte, um die Sprache in deinem Strapi Dashboard zu ändern:

• Zugang zum Profilbereich: Klicke links unten im Menü auf dein Profilbild oder deine Initialien.

• Navigiere zum Profil-Menü: Wähle die Option „Profil“ aus dem aufklappenden Menü.

• Spracheinstellung ändern: Gehe zum Abschnitt „Bedienung“ und finde dort „Sprache der Oberfläche“.

  • Wähle die gewünschte Sprache aus den verfügbaren Optionen.

• Änderungen speichern: Vergiss nicht, deine Änderungen zu speichern, um die neue Spracheinstellung zu übernehmen.

1.4 Benutzer verwalten

Das Anlegen neuer Benutzerzugänge zu deinem CMS ermöglicht es dir, anderen Teammitgliedern oder Mitarbeitern den Zugang zu Strapi zu gewähren. Hier ist die Vorgehensweise:

1.4.1 Initialer Benutzer

Der erste angelegte Benutzer hat immer Admin Rechte und somit das Recht neue Benutzer anzulegen. Zudem hat er Zugriff auf alle Inhalte und Konfigurationsmöglichkeiten, die WEBSALE in Strapi zur Verfügung stellt.

1.4.2 Neue Benutzer erstellen

• Navigiere in der Menüleiste auf der linken Seite zu „Einstellungen“.

• Klicke unter „Administrationsoberfläche“ auf „Benutzer“.

• Klicke rechts oben auf den Button „Benutzer einladen“. Dies öffnet ein Formular, in dem du die Details für den neuen Benutzer eingeben kannst.

• Gib den Vor- und Nachnamen sowie die E-Mail-Adresse des neuen Nutzers an. Diese Informationen sind notwendig, um den Einladungslink zu erstellen und dem Nutzer die Registrierung zu ermöglichen.

• Wähle eine Rolle für den neuen Benutzer aus. Die zugewiesene Rolle bestimmt, welche Berechtigungen der Nutzer im System hat. Dies umfasst, was er sehen, bearbeiten oder nicht zugreifen kann.

• Standardmäßig gibt es drei vordefinierte Rollen, aber es ist auch möglich, zusätzliche Rollen anzulegen. Kunden können entweder selbst neue Rollen definieren oder WEBSALE damit beauftragen (siehe Abschnitt zur Rechte- und Rollenverwaltung).

• Nachdem alle Informationen eingegeben und die Rolle zugewiesen wurde, wird ein Einladungs-Link erzeugt. Diesen Link kannst du dann an den entsprechenden Nutzer senden, um ihn zum Abschluss seiner Registrierung einzuladen.

1.4.3 Benutzer löschen

• Gehe erneut in die „Benutzer“-Sektion unter „Einstellungen“.

• Wähle den Benutzer aus, den du entfernen möchtest.

• Nutze die Option zum Löschen, die in der Benutzeroberfläche verfügbar ist, um den Benutzer dauerhaft aus dem System zu entfernen.

1.5 Rechte und Rollenverwaltung

Im Strapi-Admin-Panel kannst du die Zugriffskontrolle durch das Erstellen von Rollen und das Zuweisen von spezifischen Berechtigungen an diese Rollen effektiv verwalten. Anschließend kannst du diese Rollen den Benutzern in deinem System zuordnen.

1.5.1 Vordefinierte Rollen

Im Standard liefert WEBSALE die folgenden 3 Standard-Rollen mit entsprechenden Berechtigungen aus:

• Autor (Author): Die Autoren können bereits Inhalte bearbeiten und neuen Inhalte erstellen.

• Bearbeiter (Editor): Redakteure können Inhalte verwalten und veröffentlichen, auch die von anderen Nutzern. Sie können keine Inhalte selbst erstellen.

• Super Admin (Admin): Super-Admins können auf alle Funktionen, Einstellungen und Inhalte zugreifen und diese verwalten.

1.5.1 Rollen erstellen und verwalten

• Gehe im linken Menü zu „Einstellungen“ und wähle dann „Rollen“ unter der Administrationsoberfläche aus.

• Du kannst eine vorhandene Rolle bearbeiten oder durch Klicken auf „Rolle hinzufügen“ eine neue Rolle erstellen.

• Gib der Rolle einen aussagekräftigen Namen und füge eine Beschreibung hinzu, die den Zweck und die Verantwortlichkeiten der Rolle klar definiert.

• Die Berechtigungen sind unterteilt in „Collections“, „SingleTypes“, „Plugins“ und „Settings“.
  Mehr Informationen zu den verfügbaren Rechten findest Du in der strapi Dokumentation.

• Für Content-Typen (Collections, SingleTypes) kannst du gängige Berechtigungen wie Lesen, Schreiben, Löschen und Veröffentlichen einstellen.

• Bei Plugins und Settings sind die Berechtigungen etwas komplexer. Hier kannst du zum Beispiel Berechtigungen für das Erstellen von Internationalisierungen, das Hochladen von Bildern oder Medien, oder das Anlegen neuer Webhooks vergeben. Es empfiehlt sich, die spezifischen Optionen in der Strapi-Dokumentation nachzuschlagen, um eine detaillierte Übersicht zu erhalten.

• Nachdem alle Einstellungen getroffen wurden, speichere die Rolle, um die Änderungen zu übernehmen.

1.5.2 Benutzern Rollen zuweisen

• Gehe wiederum über „Einstellungen“ zur „Benutzerverwaltung“.

• Wähle einen bestehenden Nutzer aus oder lege einen neuen Nutzer an. Du kannst auch Benutzer per E-Mail einladen, indem du ihnen einen Einladungslink schickst.

• Im Nutzerprofil kannst du im Bereich „Rollen“ eine oder mehrere Rollen dem Nutzer zuweisen.

• Nachdem du die gewünschten Rollen ausgewählt hast, speichere die Änderungen, um die Rollenzuweisung abzuschließen.

1.5.3 Hinweis zu Endbenutzer-Rollen

• Der Bereich "Nutzer & Berechtigungen-Plugin" in Strapi wird in deinem speziellen Setup vorrangig für die Verwaltung von Berechtigungen genutzt, die sich auf den WEBSALE-Strapi-Connector beziehen.

• In diesem Kontext ist die Verwaltung von Endbenutzer-Rollen vor allem für die Kontrolle des Zugriffs auf die API relevant, über die JSON-Daten abgerufen werden.

• Endbenutzer-Rollen, die in anderen Kontexten dazu dienen könnten, Kundendaten oder ähnliche Informationen zu verwalten, sind hier von untergeordneter Bedeutung.

2. Grundlagen von strapi

2.1. Verständnis der Strapi Architektur

In strapi gibt es zwei Hauptbereiche, die für die Verwaltung und Strukturierung von Inhalten zuständig sind: der Content-Manager und der Content-Type Builder. Diese Bereiche ergänzen sich und bieten zusammen ein leistungsstarkes Werkzeugset für Content-Management und -Design.

2.2 Content-Type Builder & Content-Manager

2.2.1 Content-Type Builder: Definition von Strukturen und Komponenten

Dieser Bereich wird verwendet, um die Strukturen zu definieren, in denen du deine Inhalte später eingeben kannst. Hier legst du fest, welche Felder und Datentypen deine Inhalte haben sollten und erstellst die Komponenten, die dann im Content-Manager gefüllt werden.

• Strukturen definieren: Der Content-Type Builder wird genutzt, um die Schemata für Sammlungen und Einzel-Einträge zu erstellen und zu bearbeiten. Diese Schemata bestimmen, welche Datenfelder und Datentypen verfügbar sind und wie die Eingabemasken im Content-Manager aussehen.

• Komponenten gestalten: Eine weitere wichtige Funktion des Content-Type Builders ist das Erstellen von wiederverwendbaren Komponenten. Diese Komponenten können in verschiedenen Teilen des Projekts genutzt werden und fördern dadurch die Konsistenz und Wiederverwendbarkeit in der Entwicklung.

2.2.2 Content-Manager: Verwaltung von Inhalten

Hier werden die Inhalte, die du in deinem Strapi-Projekt erstellst und pflegst, direkt verwaltet. Dies ist der Ort, an dem Benutzer tatsächlich Inhalte wie Texte, Bilder und andere Medien hinzufügen, die auf der Storefront angezeigt werden.

• Inhalte verwalten: Im Content-Manager werden alle Inhalte wie Texte, Bilder, Videos und andere Medien, die direkt auf der Storefront sichtbar sind, verwaltet. Benutzer können hier neue Inhalte erstellen, bestehende bearbeiten oder nicht mehr benötigte Inhalte löschen.

• Daten organisieren: Der Content-Manager ermöglicht das systematische Organisieren von Inhalten in Sammlungen und Einzel-Einträgen. Diese Struktur hilft, Inhalte leichter auffindbar und verwaltbar zu machen und unterstützt eine klare Hierarchie und Ordnung innerhalb des Systems.

2.2.3 Zusammenspiel von Content-Manager und Content-Type Builder

Der Content-Manager und der Content-Type Builder arbeiten Hand in Hand:

• Vom Builder zum Manager: Im Content-Type Builder erstellte Strukturen und Komponenten dienen als Grundlage für die Inhaltsverwaltung im Content-Manager. Dies sichert eine kohärente Datenhandhabung und effiziente Content-Verwaltung.

• Anpassungsfähigkeit und Dynamik: Durch die flexible Struktur des Content-Type Builders können Anpassungen vorgenommen werden, die dann im Content-Manager reflektiert werden, ohne dass Inhalte verloren gehen oder umständlich neu erstellt werden müssen.

2.3 Sammlungen, Einzel-Einträge und Komponenten

2.3.1 Sammlungen

Sammlungen in Strapi sind Strukturen, die dazu dienen, mehrere ähnliche Daten unter einem Dach zu verwalten. Sie eignen sich hervorragend, um Inhaltsseiten, mehrere Stellenanzeigen oder auch Blogartikel zu organisieren. Eine Sammlung fungiert somit als zentraler Punkt, dem sie ähnliche Inhalte oder Elemente unterordnen können.

Sammlungen stehen dir sowohl unter dem Content-Manager wie auch dem Content-Type Builder zur Verfügung.

Mehr Informationen zu Sammlungen findest du hier.

2.3.2 Einzel-Einträge

Einzel-Einträge sind spezifische Inhalts-Elemente, die nicht unbedingt Teil einer wiederholbaren Sammlung sind. Sie können für spezielle Seiten oder spezifische Inhaltsblöcke verwendet werden, wie z.B. ein Banner oder ein Produktslider auf der Startseite.

Einzel-Einträge stehen dir sowohl unter dem Content-Manager wie auch dem Content-Type Builder zur Verfügung.

Mehr Informationen zu Einzel-Einträgen findest du hier.

2.3.3 Content-Typen zum Erstellen neuer Sammlungen & Einzel-Einträge

Content-Typen sind die Bausteine für die Strukturierung von Inhalten innerhalb von Strapi. Sie definieren, wie Daten in Sammlungen und Einzel-Einträgen organisiert sind.

Neue Content-Typen und somit neue Inhalte unterhalb von Sammlungen und Einzel-Einträgen werden im Content-Type Builder erstellt.

2.3.4 Komponenten

Komponenten in Strapi sind wiederverwendbare Bausteine, die in verschiedenen Teilen deines Projekts genutzt werden können, um Inhalte konsistent und effizient zu gestalten.

Mehr Informationen zu Komponenten findest du hier.

2.4 Medienbibliothek

Strapi verfügt über eine integrierte Medienbibliothek, die eine zentrale Verwaltung von Medien wie Bildern, PDFs und anderen Dateien ermöglicht.

Alle hochgeladenen Bilder und Dateien werden in der Medienbibliothek gespeichert und können von dort aus verwaltet werden. Dies umfasst das Löschen, Ersetzen oder erneute Verwenden von Medien in verschiedenen Teilen deines Strapi-Projekts.

2.4.1 Hochladen von Medien

Du kannst Medien entweder direkt in die Medienbibliothek hochladen oder sie während der Pflege von Inhalten hinzufügen. Wenn du Inhalte bearbeitest und Medien benötigst, kannst du auf die Medienbibliothek zugreifen, die sich automatisch öffnet. Hier hast du die Möglichkeit, bereits hochgeladene Dateien auszuwählen oder neue Dateien hinzuzufügen.

2.4.2 Automatische Bildkonvertierung

Strapi verfügt über einen eingebauten Konverter, der die hochgeladenen Bilder automatisch komprimiert, um die Ladezeiten zu verbessern und den Speicherbedarf zu optimieren.

Zusätzlich kommt der WEBSALE Bildkonverter zum Einsatz, der Bilder in das SourceFormat und das WebP-Format umwandelt. Diese Formate bieten verbesserte Kompressionsraten und sind für die Web-Nutzung optimiert.

2.4.3 Template-Integration

Der TemplateManager definiert innerhalb des Templates, welches Bild in welchem Format verwendet wird. Neue Bilder und Medienelemente, die zur Medienbibliothek hinzugefügt werden, müssen daher entsprechend den Vorgaben vom TemplateManagers im Template platziert und konfiguriert werden.

3. Komponenten

Wie in vielen anderen Content Management Systemen, dienen Komponenten als wiederverwendbare Elemente, die du zur Gestaltung und Strukturierung deines Onlineshops nutzen kannst. Diese Komponenten sind im Grunde genommen vordefinierte Bausteine, die spezifische Funktionen oder Layouts implementieren und die du in verschiedenen Teilen deiner Site einsetzen kannst, ohne jedes Mal von Grund auf neu beginnen zu müssen.

3.1 Übersicht der Standard-Komponenten

Im Standardumfang stehen dir folgende Komponenten zur Verfügung.

Eine Übersicht alle Komponenten findest du über das linke Seitenmenü unter dem Navigationspunkt Content-Type Builder.

Solltest du den Navigationspunkte Content-Type Builder nicht sehen, dann fehlen dir eventuell die entsprechenden Rechte. Bitte wende dich an den entsprechenden Mitarbeiter in deinem Unternehmen, der die über Admin-Rechte verfügt und dir die entsprechenden Rechte zuweisen kann.

Open

3.1.1 Inhalt

Die "Inhalt"-Komponente beinhaltet einen Editor, ähnlich einem Texteditor wie Microsoft Word, in dem du Texte, Medien, Tabellen und weitere Elemente einfügen, bearbeiten und formatieren kannst.

Innerhalb der Komponente “Inhalt” können auch WEBSALE Tags genutzt werden. So können beispielsweise Produktdaten mithilfe von “PR-LoadData()” geladen und für die spätere Anzeige in der Storefront genutzt werden. Beachte hier aber bitte den Geltungsbereich der Tags. Alle weiteren Informationen zu den WEBSALE Tags findest Du in der Frontend-Dokumentation https://doku.websale.net/index.html?basic_grundlagen_zu_tags.html .

Zusätzlich hast du die Möglichkeit, CSS-Klassen zuzuweisen, um das Aussehen weiter zu spezifizieren und zu zu entscheiden, ob der Inhalt über die volle Bildschirmbreite angezeigt werden soll.

3.1.2 WS Inquiry

Mit der "WS Inquiry"-Komponente kannst du ein WEBSALE Formular auf der Seite anzeigen lassen.

Dazu brauchst du nur den Namen der Formular-Konfigurationsdatei angeben und das Formular wird entsprechend dieser Spezifikationen angezeigt.

Informationen darüber, wie man ein WEBSALE Formular mit dem WEBSALE Inquiry 4 Modul erstellt, erfährst du hier.

Zusätzlich hast du auch bei dieser Komponente die Möglichkeit, CSS-Klassen zuzuweisen, um das Aussehen weiter zu spezifizieren.

3.1.3 Slider

Ein Slider ist eine interaktive Komponente in unserem Shop-System, die darauf ausgelegt ist, Inhalte dynamisch in einer horizontal scrollbaren Anzeige zu präsentieren. Diese Form der Darstellung ermöglicht es, mehrere Elemente wie Bilder, Produkte oder Werbebanner auf begrenztem Raum attraktiv und benutzerfreundlich zu zeigen. Nutzer können durch die Inhalte blättern, was eine aktive und engagierte Interaktion mit dem angebotenen Content fördert.

Slidet er nun nach einer gewissen Zeit oder nach einer Aktion, oder beides? Kann ich das irgendwo einstellen oder beeinflussen? ALLES FRONTEND

Die verschiedenen Slider-Typen in unserem System – der allgemeine Bild-Slider, der Product Slider (manual) und der Product Slider für Produkte einer Kategorie – nutzen diese dynamische Präsentationsform, um jeweils spezifische Anwendungsfälle zu unterstützen, sei es durch das Anzeigen großer Banner für Marketingzwecke oder das detaillierte Highlighten ausgewählter Produkte.

3.1.3.1 Slider

Dies ist eine grundlegende Slider-Komponente, die hauptsächlich für große Banner und Bilder genutzt wird. Sie unterstützt das Konzept des „responsive Designs“, indem für verschiedene Viewports (Anzeigegrößen und -geräte) unterschiedliche Bilddateien hinterlegt werden können.

Jeder Slide innerhalb dieses Sliders kann mit einer individuellen Verlinkung versehen werden, um Nutzer gezielt zu weiterführenden Informationen oder anderen Bereichen deines Shops zu führen.

Bitte beachte, dass, wenn Text auf den Slides gewünscht wird, dieser bereits auf den Bannern und Bildern enthalten sein muss. Text kann innerhalb der Standard-Komponente nicht über die Strapi-Eingabemaske hinzugefügt werden, was die Gestaltung der visuellen Inhalte vor dem Upload erfordert.

3.1.3.2 ProductSlider (manual)

Mit dieser Komponente kannst du einen Slider an Produktboxen in deinem Shop anzeigen lassen. Die Eigenschaften und Funktionen des Sliders werden direkt im Shop konfiguriert. Dies beinhaltet Einstellungen wie Breakpoints, die Schnelligkeit beim Wechsel der Slides, die Anzeige von Navigationspfeilen und weitere Verhaltensweisen des Sliders. Diese Angaben können nicht über das CMS angepasst werden. Änderungen an der Konfiguration des Sliders müssen immer über den TemplateManager vorgenommen werden.

Der Zusatz „Manual“ bedeutet, dass du die angezeigten Produkte selbst auswählen kannst. Trage dazu die gewünschten Produktnummern als komma-separierte Liste in das Feld „Produktliste“ ein.

Wenn gewünscht, kannst du eine Überschrift für den Slider hinzufügen. Dies hilft den Kunden zu verstehen, welche Produkte sie unter diesem Slider finden können.

Du hast die Möglichkeit zu bestimmen, ob der Slider über die gesamte Bildschirmbreite angezeigt werden soll oder nicht.

Bitte beachte, dass die eingegebenen Produktnummern nicht automatisch auf Richtigkeit überprüft werden. Wenn also in der Storefront keine Anzeige des gewünschten Produktes erfolgt, dann überprüfe bitte die entsprechenden Eingaben.

3.1.3.3 ProductSlider für Produkte einer Kategorie

Diese Komponente funktioniert ähnlich wie die „Product Slider (manual)“-Komponente. Der Unterschied besteht darin, dass hier keine komma-separierte Liste von Produktnummern verwendet wird. Stattdessen gibst du einen Kategorie-Index an, aus dem die Produkte automatisch geladen und im Slider angezeigt werden.

Es werden standardmäßig 20 Produkte aus der Kategorie im Slider geladen. Diese Anzahl kann im Shop durch den TemplateManager angepasst werden. Es ist nicht möglich, einzelne Produkte der Kategorie von der Anzeige im Slider auszuschließen.

Die Produkte werden in der Reihenfolge dargestellt, wie sie in der Shop-Datenbank hinterlegt sind, und eine spezielle Sortierangabe oder Sortierreihenfolge ist nicht möglich.

Änderungen an Produkten innerhalb dieser Kategorie spiegeln sich automatisch im Slider wider, sodass bei Produktaktualisierungen keine manuellen Anpassungen am Slider notwendig sind. Dies sorgt für eine stets aktuelle und wartungsarme Präsentation deiner Produkte.

Bitte beachte, dass der eingegebene Kategorieindex nicht auf Richtigkeit überprüft werden. Wenn also in der Storefront keine Anzeige der gewünschten Kategorie erfolgt, dann überprüfe bitte die entsprechenden Eingaben.

3.1.3 ProductTeaser

Ein Product Teaser ist eine visuell ansprechende Komponente in unserem Shop-System, die dazu dient, einzelne Produkte oder eine kleine, ausgewählte Gruppe von Produkten prominent und auffällig darzustellen.

Im Gegensatz zu einem Product Slider, der viele Produkte in einer dynamischen, scrollbaren Anzeige präsentiert, konzentriert sich der Product Teaser auf die Hervorhebung bestimmter Produkte. Bei der Anlage mehrerer Teaser werden diese nicht gescrollt, sondern je nach Definition der Storefront nebeneinander oder untereinander angezeigt, was eine flexible und anpassbare Darstellung ermöglicht.

Für den Teaser wählst du die Produkte selbst aus, in dem du die gewünschten Produktnummern in das Feld „Produktliste“ als komma-separierte Liste einträgst.

Bitte beachte, dass die eingegebenen Produktnummern nicht automatisch auf Richtigkeit überprüft werden. Wenn also in der Storefront keine Anzeige des gewünschten Produktes erfolgt, dann überprüfe bitte die entsprechenden Eingaben.

Zusätzlich kannst du, wenn gewünscht, eine Überschrift für den Teaser hinzufügen, um dem Kunden zu verdeutlichen, welche Produkte er unter Teaser-Bereich findet.

3.1.4 Link Helper

Eine der Standard-Komponenten in Strapi ist darauf ausgelegt, das Hinzufügen von Verlinkungen zu erleichtern. Hierfür stehen vier Linktypen zur Verfügung, die flexibel genutzt werden können, um unterschiedliche Arten von Links zu erstellen:

• Product:

  • Im Feld "Link" gibst du die Produktnummer ein. Strapi generiert daraufhin automatisch einen Link, der direkt zur Detailseite dieses Produkts führt.

• Category:

  • Hier trägst du im Feld "Link" einen Kategorieindex ein. Der Link führt den Nutzer dann direkt zur entsprechenden Kategorieseite, wo alle Produkte dieser Kategorie aufgelistet sind.

• Internal:

  • Für interne Verlinkungen innerhalb deines Onlineshops kannst du spezifische Pfade oder Routen angeben, die zu anderen Seiten oder Ressourcen innerhalb deines Online-Shops führen.

• External:

  • Dieser Linktyp ermöglicht es dir, eine externe URL einzugeben. Diese Option wird genutzt, um Besucher auf andere Websites zu leiten, die nicht zum eigenen Shop gehören.

3.1.5 Meta Information

Meta-Informationen sind entscheidend für die Suchmaschinenoptimierung (SEO) deiner Website. In Strapi kannst du diese Informationen gezielt für jede Seite festlegen, um die Sichtbarkeit und Auffindbarkeit in Suchmaschinen zu verbessern.

• Meta Titel

  • Der Meta-Titel ist ein kritischer SEO-Faktor und erscheint im Browser als Tab-Name sowie in den Suchergebnissen als Überschrift des Eintrags.

  • Gib den Titel der Seite ein, der präzise das Thema oder den Inhalt der Seite widerspiegelt.

• Meta Beschreibung

  • Die Meta-Beschreibung bietet eine kurze und prägnante Zusammenfassung des Seiteninhalts. Diese Beschreibung erscheint unter dem Titel in den Suchergebnislisten, z.B. von Google und kann die Klickrate beeinflussen.

  • Formuliere eine ansprechende Beschreibung, die den Inhalt der Seite effektiv zusammenfasst und zum Klicken einlädt.

• SEO-URL

  • Die SEO-URL ist die Adresse, unter der die Seite aufrufbar sein wird. Sie sollte sprechend und SEO-freundlich sein.

  • Standardmäßig wird die URL mit cms/ beginnen. Für spezielle Anforderungen oder zusätzliche Verzeichnisse solltest du dich mit deinem WEBSALE Ansprechpartner in Verbindung setzen. Die Systemadministration wird notwendige Anpassungen vornehmen und die Verzeichnisse entsprechend einrichten.

• Meta Robots

  • Das Meta Robots Tag steuert das Crawling- und Indexierungsverhalten der Suchmaschinen für die Seite.

  • Du kannst zwischen verschiedenen Anweisungen wählen, wie index, follow, noindex, follow, index, nofollow und noindex, nofollow, um zu steuern, ob und wie Suchmaschinen die Seite indexieren und verlinken.

  • Für eine detaillierte Erklärung der verschiedenen Meta Robots Tags empfehlen wir, den Google-Leitfaden zur Steuerung des Crawlings und der Indexierung zu konsultieren: Spezifikationen für Robots-Meta-Tags | Google Search Central  |  Dokumentation  |  Google for Developers

3.1.6 Responsive Image

Die "Responsive Image"-Komponente ermöglicht es dir, Bilder so anzulegen, dass sie optimal auf verschiedenen Bildschirmgrößen dargestellt werden. Diese Komponente unterstützt die Definition von Bildern für verschiedene responsive Breakpoints, wodurch sichergestellt wird, dass deine Website auf allen Geräten gut aussieht.

Responsive Breakpoints sind spezifische Bildschirmbreiten, bei denen das Layout der Website sich ändert, um eine bessere Benutzererfahrung zu bieten. Diese sind in vielen CSS-Frameworks wie Bootstrap definiert. Für eine detaillierte Erklärung der Breakpoints im Framework "Bootstrap" besuche Bootstrap Breakpoints.

Weise jedem Breakpoint eine passende Bilddatei zu. Typische Breakpoints umfassen Größen für XS (extra small), SM (small), MD (medium), LG (large) und XL (extra large).

Das Bild, das im Feld XS eingetragen wird, dient als "Fallback". Sollte für einen größeren Breakpoint keine spezifische Bilddatei hinterlegt sein, wird automatisch das Bild aus dem XS-Feld angezeigt.

3.1.7 WS Subshop Locale

Der Baustein „WS Subshop Locale“ ist speziell dafür entwickelt, um eine Verbindung zwischen den in Strapi hinterlegten Sprachlokalisationen (Locales) und den damit korrespondierenden WEBSALE Subshops herzustellen. Dies ermöglicht eine gezielte Steuerung von sprachspezifischen Inhalten für verschiedene Subshops.

• wsSubshopId:

  • In diesem Feld trägst du die IDs der Subshops ein, die der jeweiligen Sprachvariante zugeordnet sind. Dies dient der Zuordnung von sprachspezifischen Inhalten zu den entsprechenden Subshops.

• strapiLocaleId:

  • Hier wird die spezifische Locale-ID eingetragen, die in Strapi verwendet wird, um die Sprache zu definieren. Dies ist besonders wichtig, um sicherzustellen, dass der richtige sprachliche Inhalt den entsprechenden Subshops zugeordnet wird.

So kann beispielsweise der Eintrag für die Sprachevariante / Locale “Deutsch (de)” folgendermaßen aussehen:

3.2 Erstellen neuer Komponenten

Das Beispiel beschreibt das Erstellen einer Komponente namens “Stellenanzeige”. Diese Komponente soll später folgende Inhalte in der Storefront anzeigen:

• Titel (Datenfeld des Datentyps: Text)

• Anforderungen (Datenfeld des Datentyps: Text)

• Taetigkeitsbeschreibung (Datenfeld des Datentyps: Text)

• Wir_Bieten (Datenfeld des Datentyps: Text)

• Schlussformel (Datenfeld des Datentyps: Text)

• Gehalt (Datenfeld des Datentyps: Zahl)

• Datum (Datenfeld des Datentypes: Datum)

• Adresse (Datenfeld des Datentyps: Text)

• Mail_Ansprechpartner (Datenfeld des Datentyps: E-Mail)

3.2.1 Komponente im Content-Type Builder erstellen

• Öffne im Strapi Admin Dashboard den Content-Type Builder im linken Seitenmenü

• Wähle im Untermenüpunkt Komponenten die Option + Neue Komponente erstellen

• Vergib einen Anzeigenamen, wähle oder erstelle eine Kategorie und vergib ein Symbol für die Komponente, falls gewünscht

• Klicke auf Weiter

3.2.2 Aufbau der Komponente definieren und Felder erstellen

• Bestimme den Aufbau der "Stellenanzeige" anhand der Inhalte, die später angezeigt werden sollen

• Für jedes Detail (Titel, Anforderungen, Datum, Gehalt) kannst du entscheiden, ob ein separates Datenfeld (z. B. Text, Datum, Zahl) oder eine Textarea benötigt wird, in der alle Informationen gleichzeitig eingegeben werden können

• Erstelle das erste Feld für die Komponente und wähle bei der Erstellung einen Datentyp, z.B. Datentyp "Text" für das Feld "Titel"

• Ein Datentyp in Strapi definiert die Art der Daten, die ein Feld aufnehmen kann. Beispiele sind "Text" für Textzeilen, "Datum" für Datumsangaben und "Zahl" für numerische Werte. Jeder Datentyp bestimmt, wie die Daten im System verarbeitet und angezeigt werden.

• Mehr Informationen zu den “Datentypen” findest du in der strapi Dokumentation

• Vergib dann einen Namen für dieses Feld und konfiguriere zusätzliche Optionen, die je nach Datentyp verfügbar sind.

• Speichere das Feld mit "Fertig" oder erstelle direkt im Dialogfenster weitere Felder. Fahre so fort, bis alle benötigten Felder für die "Stellenanzeige" angelegt sind.

3.2.3 Komponente in Inhaltsseiten integrieren

• Wähle im Menüunterpunkt "Sammlungen" die "Inhaltsseiten"

• Wähle eine Inhaltsseite aus, die zukünftig die Komponente “Stellenanzeige” beinhalten soll

• Drücke innerhalb des Feldes "Content" auf “Komponente hinzufügen” und wähle “Bereits existierende Komponente nutzen”

• Wähle im Dropdown-Menü die neue Komponente "Stellenanzeige".

• Drücke auf “Fertig” und speichere die Änderungen.

• Wiederhole den Vorgang für jede Seite, auf der du die Komponente "Stellenanzeige" verwenden möchtest

3.2.4 Shop-Template und Design Anpassungen

• Informiere den Template-Manager deines Onlineshops über die neu erstellte Komponente "Stellenanzeige".

• Besprecht gemeinsam, wie die neue Komponente aufgebaut sein soll und wie sie visuell gestaltet werden soll, damit sie in das bestehende Design des Onlineshops passt

• Der Designer passt die Templates entsprechend an, um die Daten aus der neuen Komponente richtig darzustellen

3.2.5 Überprüfung und Freigabe

• Nachdem die Komponente erstellt, zugewiesen und die Templates angepasst wurden, kannst du die Änderungen auf der bearbeiteten Seite sehen. Stelle sicher, dass alles wie erwartet funktioniert und visuell ansprechend ist.

3.2.6 Wichtiger Hinweis beim Erstellen von Komponenten

• Komponenten sollten gründlich geplant und ausgeklügelt sein, bevor sie produktiv genutzt werden. Abstimmungen, mit dem Template-Manager oder Designer und ausführliche Überlegungen zum Aufbau sind entscheidend, um eine Komponente richtig zu gestalten und zukünftige Anpassungen zu minimieren.

• Sei dir bewusst, dass das Bearbeiten oder Löschen von Komponenten in laufenden Projekten zu unerwarteten Verhaltensweisen oder Fehlern führen kann.

3.3 Komponenten bearbeiten

3.3.1 Bestehende Komponente bearbeiten

• Wähle im linken Menü „Content-Type Builder“. Dieser Bereich ermöglicht es dir, die Strukturen deiner Daten in Strapi zu definieren und anzupassen.

• Unter dem Menüpunkt „Komponenten“ findest du eine Liste aller angelegten Komponenten. Wähle die Komponente aus, die du bearbeiten möchtest.

• Du kannst den Anzeigenamen und das Icon der Komponente bearbeiten, um sie im Admin-Panel leichter identifizierbar zu machen.

• Es ist möglich, Felder zu einer bestehenden Komponente hinzuzufügen, zu bearbeiten oder zu entfernen. Diese Flexibilität erlaubt es, Komponenten entsprechend neuen Anforderungen anzupassen.

• Damit die Änderungen an den Komponenten später im Shop dargestellt werden, sollte ein Template-Manager bzw. Designer immer die Shop-Templates überprüfen. Gegebenenfalls sind Änderungen erforderlich.

3.3.2 Hinweise & Tipps beim Bearbeiten von Komponenten

• Obwohl Strapi im "Develop" Modus ausgeliefert wird, der das Anlegen und Bearbeiten von Komponenten zulässt, sollte das ständige Anpassen bestehender Komponenten, die bereits in der Produktion genutzt werden, vermieden werden. Strapi ist prinzipiell nicht dafür ausgelegt, dass Komponenten, die schon mit Daten befüllt und in Gebrauch sind, fortlaufend geändert werden.

• Sei dir bewusst, dass das Bearbeiten oder Löschen von Komponenten in laufenden Projekten zu unerwarteten Verhaltensweisen oder Fehlern führen kann. Insbesondere das Löschen von Komponenten kann schwerwiegende Auswirkungen haben, wenn diese bereits intensiv genutzt werden.

3.4 Arbeiten mit Komponenten

3.4.1 Beschreibung für Komponenten

Zur besseren Übersicht über die Komponenten der Seite können Sie eine kleine Beschreibung in das Feld “Beschreibung” schreiben.

3.4.2 Design der Komponenten

3.4.2.1 Ergänzende CSS-Klassen für Komponenten

Jede Komponente in Strapi bietet die Möglichkeit, spezifische CSS-Klassen zuzuweisen. Diese Klassen ermöglichen es dir, das Aussehen der Komponenten anzupassen und visuell in das Gesamtdesign deines Shops zu integrieren.

Die zugewiesenen CSS-Klassen müssen in den CSS-Dateien deines Shops hinterlegt sein. Detaillierte Anleitungen zum Erstellen und Verwalten dieser CSS-Dateien findest du in der WEBSALE Online Dokumentation. Dort wird beschrieben, wie und wo du CSS-Dateien für deinen Shop hinterlegen kannst, um eine nahtlose Integration und ein kohärentes Design zu gewährleisten.

3.4.2.2 Grundlegendes Design der Komponenten

Während du innerhalb von Strapi-Komponenten stilistische Anpassungen mittels CSS-Klassen vornehmen kannst, wird das grundlegende Design der Inhalte hauptsächlich über die Shop-Templates definiert. Wenn grundsätzliche Änderungen am Design der durch Strapi bereitgestellten Inhalte gewünscht sind, sollten diese Änderungen direkt an den Shop-Templates vorgenommen werden, auf denen die Strapi-Inhalte platziert werden. Dies umfasst Änderungen an Layouts, Farbschemata, Schriftarten und anderen Designelementen, die das Erscheinungsbild deines Online-Shops prägen.

Für detaillierte Informationen darüber, wie und wo diese Shop-Templates bearbeitet werden können, verweisen wir erneut auf die WEBSALE Online Dokumentation. Dort findest du ausführliche Anleitungen und Hilfestellungen, die dich durch den Prozess der Template-Anpassung führen und sicherstellen, dass deine Designänderungen effektiv und konsistent umgesetzt werden.

3.4.3 Effektive Kombination von Komponenten und Sammlungen

Die Verwaltung von Inhalten in Strapi kann effizienter gestaltet werden, indem Komponenten und Sammlungen kombiniert werden. Dieses Vorgehen minimiert den Pflegeaufwand und sorgt für Konsistenz über verschiedene Seiten hinweg.

3.4.3.1 Komponenten und ihre direkte Nutzung

Zunächst wird eine Komponente "Stellenanzeige" im Content-Type Builder erstellt. Diese Komponente enthält Felder wie Bezeichnung, Beginn und Gehalt.

Die Komponente kann direkt auf einer spezifischen Inhaltsseite, wie z.B. einer Karriere-Seite, verwendet werden. Dort werden die spezifischen Daten der Stellenanzeigen manuell eingetragen.

Wenn dieselbe Komponente "Stellenanzeige" auch auf einer anderen Seite, wie "Über uns", genutzt werden soll, müssen die gleichen Daten erneut manuell eingefügt werden. Dies führt zu einem doppelten Pflegeaufwand und erhöht das Risiko von Inkonsistenzen.

3.4.3.2 Komponenten in Sammlungen nutzen

Um das Problem des doppelten Pflegeaufwands von Komponenten mit gleichem Inhalt, z.B. Stellenanzeigen, zu lösen, wird zusätzlich eine Sammlung "Stellenanzeigen" erstellt, in der alle aktuellen Stellenanzeigen zentral verwaltet werden. Jede Stellenanzeige wird als ein Eintrag in dieser Sammlung angelegt.

Die Sammlung "Stellenanzeigen" kann dann als Ganzes auf verschiedenen Seiten wie "Karriere" und "Über uns" eingebunden werden. Änderungen an einer Stellenanzeige innerhalb der Sammlung wirken sich automatisch auf alle Seiten aus, auf denen die Sammlung eingebunden ist.

Dies gewährleistet, dass die Informationen auf allen Seiten konsistent und aktuell sind, ohne dass jede Seite einzeln angepasst werden muss. Es reduziert den Pflegeaufwand und minimiert Fehlerquellen.

3.5 Transfer von Komponenten zwischen WEBSALE Strapi Instanzen

Strapi ermöglicht es, fertige Komponenten zwischen verschiedenen Instanzen, die von WEBSALE installiert worden sind, zu transferieren. Dieser Prozess erleichtert die Wiederverwendung von entwickelten Komponenten und sorgt für Effizienz und Konsistenz über verschiedene Projekte hinweg.

• Zugriff auf die empfangende Instanz: Öffne auf der empfangenden Instanz den Pfad <RECEIVING_CMS_URL>/api/component-creator. Diese URL führt dich direkt zum API-Endpunkt, der für den Transfer von Komponenten zuständig ist. Folgen Sie den Anweisungen im Feld “Authenticate”. Geben Sie hierfür die Common-ID ein, mit welcher die URL Ihrer WEBSALE Strapi Instanz gebildet wird.

• Authentifizierung: Authentifiziere dich mit den API-Zugangsdaten. Dies bestätigt deine Berechtigung, Änderungen vorzunehmen und auf die Liste der Komponenten zuzugreifen. Die API-Zugangsdaten, die für den Transfer benötigt werden, entsprechen den initialen Zugangsdaten deiner Strapi Instanz.

• Auswahl der Komponente: Die empfangende Instanz zeigt eine Liste der verfügbaren Komponenten. Wähle die Komponente aus, die du transferieren möchtest. Eine Vorschau des Schemas dieser Komponente wird zur Überprüfung angezeigt.

• Transfer der Komponente: Wähle unter „Transfer“ die zugehörige Komponentengruppe aus, in der die Komponente gespeichert werden soll, oder erstelle eine neue Gruppe für bessere Organisation im Dashboard. Drücke auf „Transfer“, um die Komponente zur empfangenden Instanz zu senden.

• Automatische Erstellung und Speicherung: Das Schema der ausgewählten Komponente wird automatisch an einen neuen API-Endpunkt der empfangenden Instanz gesendet. Dort wird eine identische Komponente mit demselben Schema automatisch angelegt und gespeichert.

• Neustart der Anwendung: Aufgrund der Änderungen in den src/ Dateien wird die Strapi Instanz automatisch im Hintergrund neu gestartet. Die Instanz ist nach dem Neustart innerhalb weniger Sekunden wieder erreichbar.

• Überprüfung: Nach dem Neustart steht die neue Komponente im Dashboard der empfangenden Instanz zur Verfügung. Überprüfe, ob die Komponente korrekt angelegt wurde und funktionsfähig ist.

4. Sammlungen & Einzel-Einträge

4.1 Neue Sammlung oder neuen Einzel-Eintrag erstellen

Um unterhalb der Bereiche Sammlungen oder Einzel-Einträge neue Punkte zu erstellen, musst du einen neuen Content-Typ erstellen.

4.1.1 Neue Sammlung oder neuen Einzel-Eintrag erstellen

• Im Content-Type Builder kannst du Content-Typen anlegen, ihre Felder definieren und Schemata festlegen, die bestimmen, welche Art von Daten gehalten und wie diese strukturiert werden.

• Du kannst wählen, ob du einen Content-Typ unter Sammlungen (Collection Types) oder Einzel-Einträgen (Single Types) erstellen möchtest. Dafür stehen die Buttons “+ Neue Sammlung erstellen” oder “+ Neuen Einzel-Eintrag erstellen” zur Verfügung.

• Gib dem Content-Typ einen aussagekräftigen Namen und definiere englische API-Endpunkte. Zum Beispiel könnte für den Content-Typ "Stellenanzeigen" der singulare API-Endpunkt “job-ad” und der plurale API-Endpunkt “job-ads” gewählt werden.

• Nachdem du alle Einstellungen vorgenommen hast, speichere diese.

• Neue Content-Typen werden automatisch übertragen. Damit das funktioniert müssen für diese neuen Content-Typen vor der ersten Übertragung entsprechende Berechtigungen gesetzt werden.
  Dies machst du wie folgt:

  • Navigiere zu Einstellungen > NUTZER- & BERECHTIGUNGEN-PLUGIN > Rollen > Authenticated

  • Nun siehst du eine Liste der erstellten Content-Typen. Klappe per Klick deinen neu erstellten
    Content-Typ auf.

  • Hier klickst du nun auf die Checkbox “Alles auswählen“ damit dem Content-Typ alle nötigen Rechte gewährt werden.

  • Bestätige deine Änderungen, indem du oben auf Speichern klickst.

• Die Namensgebung für die JSON-Dateien erfolgt hier über zwei Wege.

  • Ist im Content-Typ ein Feld mit dem Namen “TemplateName” enthalten, so lautet der Name der JSON-Datei so wie der Wert der in diesem Feld gespeichert wird.

  • Ist kein Feld mit diesem Namen enthalten, so lautet der Name der JSON-Datei bei
    Sammlungen: <technischer Plural-API-Name des Content-Typs>_<id des eintrags>.json
    EInzel-Einträgen: <technischer Single-API-Name des Content-Typs>.json

4.1.2 Nutzung im Content-Manager am Beispiel “Sammlungen”

Im Content-Manager verwaltest und bearbeitest du die Inhalte der neu angelegten Sammlung und/oder Einzel-Einträge basierend auf diesen vordefinierten Content-Typen.

Du kannst Inhalte hinzufügen, bearbeiten oder löschen, entsprechend den festgelegten Regeln und Strukturen.

• Wähle im Content-Manager die neu hinzugefügte Sammlung aus.

• Wähle „Komponente“ und dann „Bereits existierende Komponente nutzen“.

• Im Dropdown-Menü „Komponente auswählen“, wähle die gewünschte Komponente aus, z.B. „Kontakt“.

• Bestimme, ob die Komponente wiederholbar sein soll, um dynamische Inhalte wie mehrere Ansprechpartner zu ermöglichen.

• Im Content-Manager kannst du über „+ Neuer Eintrag“ weitere hinzufügen.

• Fülle die Felder aus und speichere den neuen Eintrag.

• Informiere den TemplateManager, um festzulegen, wie und wo die neuen Sammlungsdaten auf der Website angezeigt werden sollen.

5. Inhalte anpassen

5.1 Überblick über die standardmäßig ausgelieferten strapi Inhalte

Strapi ermöglicht die Verwaltung einer Vielzahl von Inhaltsseiten, die für die grundlegende Funktionalität und Informationsvermittlung in deinem Online-Shop essentiell sind. Im Standardumfang unserer Shopsoftware werden folgende Seiten ausgeliefert:

• Startseite: Die zentrale Anlaufstelle für Besucher deines Shops.

• Impressum: Wichtige rechtliche Informationen über den Betreiber des Shops.

• Wir über uns: Informationen über das Unternehmen, seine Geschichte und seine Werte.

• AGB (Allgemeine Geschäftsbedingungen): Die rechtlichen Grundlagen des Einkaufs in deinem Shop.

• Datenschutz: Erläuterungen zum Umgang mit Nutzerdaten und Datenschutzbestimmungen.

• Kontaktformular: Eine Seite, die es den Kunden ermöglicht, direkt Kontakt aufzunehmen.

Diese Seiten bilden das Grundgerüst für die rechtliche und personelle Darstellung deines Online-Shops gegenüber den Kunden.

5.2 Speichern vs. Veröffentlichen

In Strapi ist die Handhabung von Inhalten durch die Funktionen "Speichern" und "Veröffentlichen" getrennt, um eine flexible Content-Verwaltung zu ermöglichen. Diese Funktionen beeinflussen, wie Inhalte bearbeitet und für den Shopbesucher sichtbar gemacht werden.

5.2.1 Speichern

• Das Speichern von Inhalten in Strapi ermöglicht es dir, Änderungen an einer Seite oder einem Beitrag zu machen und diese Änderungen intern zu sichern, ohne dass sie sofort für die Öffentlichkeit sichtbar sind.

• Wenn eine Seite oder ein Inhalt bereits veröffentlicht wurde und du Änderungen vornimmst, werden diese Änderungen durch das Speichern sofort öffentlich sichtbar. Das bedeutet, dass alle gespeicherten Änderungen an veröffentlichten Inhalten direkt auf der Live-Seite aktualisiert werden.

5.2.2 Veröffentlichen

• Das Veröffentlichen macht deine Inhalte für alle sichtbar. Einmal veröffentlicht, sind die Inhalte für das Publikum zugänglich.

• Wenn du eine veröffentlichte Seite "unveröffentlicht" machst, also den Veröffentlichungsstatus entfernst, und dann Änderungen vornimmst und speicherst, bleiben diese Änderungen intern gespeichert, aber nicht sichtbar für die Öffentlichkeit.

• Diese gespeicherten Änderungen befinden sich im Entwurfsstatus.

5.2.3 Vorab testen

Trotz der öffentlichen Sichtbarkeit von Änderungen nach dem Speichern, bietet Strapi die Möglichkeit, Änderungen im Testmodus zu sehen, bevor sie endgültig live geschaltet werden. Dies ermöglicht eine letzte Überprüfung, um sicherzustellen, dass alles wie gewünscht funktioniert.

Dafür musst du deinen Shop in einem separaten Browserfenster im Testmodus aufrufen. Dies erreichst du, indem du die Shop-URL mit den Test-Parametern ergänzt: www.ihr-shop.de/?test=on&design-test=on.

5.3 Anpassen von Inhaltsseiten am Beispiel der Impressums-Seite

Um Änderungen am Inhalt einer Inhaltsseite vorzunehmen, muss zuerst die Seite ausgewählt werden, um die es geht.

5.3.1 Seite zum Bearbeiten auswählen

• Navigiere im linken Seitenmenü zu Content-Manager.

• Wähle innerhalb von Sammlungen den Unterpunkt Inhaltsseiten. Sollte dieser nicht bereits ausgewählt sein, wähle ihn aus, um die Inhaltsseiten zu bearbeiten.

• Dir wird eine Übersicht der hinterlegten Inhaltsseiten angezeigt

• Wähle die Seite Impressum oder eine andere Seite, die du bearbeiten möchtest. Nach Auswahl der Seite, wird dir als Überschrift der Name des Templates - in diesem Falle also tpl_imprint - angezeigt. Diese Information ist dann für dich nützlich, wenn du das Design dieser Seite grundsätzlich über das Template ändern möchtest.

5.3.2 Öffnen der Bearbeitungsansicht

• Nach der Auswahl öffnet sich die Bearbeitungsseite für das Impressum

• Die Bearbeitungsseite ist in verschiedene Abschnitte unterteilt, um die Orientierung zu erleichtern:

  • Abschnitt 01: Seitendetails und Metangaben

  • Abschnitt 02: Seiteninhalt

  • Abschnitt 03: Speichern und Testmodus

5.3.3 Bearbeitung der Seitendetails

• Template-Name: Ändere den Namen nur, wenn du das Template gewechselt hast. Stelle sicher, dass das entsprechende Template auf dem Server vorhanden ist und die notwendigen Tags für Strapi CMS enthält.

• Meta-Angaben: Optimiere die SEO-Angaben (Meta Title, Meta Beschreibung, Meta-Robots) zur Verbesserung der Auffindbarkeit in Suchmaschinen.

• SEO-URL: Gib die URL an, unter der die Seite später aufgerufen werden kann.

5.3.4 Bearbeitung des Seiteninhalts

• Öffne eine der Inhalts-Komponenten, die standardmäßig für den Seiteninhalt der Impressumseite verwendet werden. Passe den Text nach Bedarf an.

• Um die Seite um weitere Inhalte zu erweitern, kannst du zusätzliche Komponenten hinzufügen:

  • Klicke auf das Symbol (+) neben oder unter der bestehenden Komponente, um „Content eine Komponente hinzuzufügen“.

  • Wähle aus den verfügbaren Komponenten aus, die für deine Strapi-Instanz konfiguriert wurden. Dies kann von Medienelementen und Formularen bis zu speziellen Layout-Komponenten reichen, die die Funktionalität und das visuelle Erlebnis der Seite verbessern.

  • Nach dem Hinzufügen, öffnet sich die Komponente automatisch und du kannst mit der Bearbeitung beginnen.

5.3.5 Speichern und Testmodus

• Testmodusentscheidung: Bevor du speicherst, entscheide am Ende der Seite über die Auswahl "JA / NEIN", ob die Änderungen im Testmodus oder im Livemodus angezeigt werden sollen.

• Speichern: Bestätige die Änderungen durch Klicken auf "Speichern".

5.4 Anpassen von einem Bilder-Slider am Beispiel der Startseite

5.4.1 Seite zum Bearbeiten auswählen

• Navigiere im linken Seitenmenü zu Content-Manager.

• Wähle innerhalb von Sammlungen den Unterpunkt Inhaltsseiten. Sollte dieser nicht bereits ausgewählt sein, wähle ihn aus, um die Inhaltsseiten zu bearbeiten.

• Dir wird eine Übersicht der hinterlegten Inhaltsseiten angezeigt

• Wähle die Seite Über uns oder eine andere Seite, die du bearbeiten möchtest.

5.4.2 Bearbeitung der Seitendetails

• Template-Name: Ändere den Namen nur, wenn du das Template gewechselt hast. Stelle sicher, dass das entsprechende Template auf dem Server vorhanden ist und die notwendigen Tags für Strapi CMS enthält.

• Meta-Angaben: Optimiere die SEO-Angaben (Meta Title, Meta Beschreibung, Meta-Robots) zur Verbesserung der Auffindbarkeit in Suchmaschinen.

• SEO-URL: Gib die URL an, unter der die Seite später aufgerufen werden kann.

5.4.3 Allgemeine Optionen für den Slider

• Anzeige über die gesamte Bildschirmbreite: Abhängig vom Storefront-Design deines Shops kannst du wählen, ob der gesamte Slider über die gesamte Bildschirmbreite angezeigt werden soll. Diese Einstellung gilt für den kompletten Slider und nicht für einzelne Slides.

5.4.4 Slides hinzufügen

• Slider-Komponente öffnen: Öffne die "Slider" Komponente auf der Bearbeitungs-Seite

• Slides definieren: Die einzelnen Elemente der Slider-Komponenten werden als "Slides" bezeichnet. Ein "Slide" ist jeweils ein Teil des Sliders. Zeitgesteuert oder durch eine Aktion des Shopbesuchers wird später durch die einzelnen "Slides" geblättert.

• Neuen Slide hinzufügen: Drücke das Feld mit dem (+), um einen neuen Slide zu ergänzen.

• Anzeigestatus festlegen: Über "Anzeigestatus" mit der Auswahl "Ja" wird der Slide im Slider angezeigt. Mit der Auswahl "Nein" wird der Slide nicht angezeigt. So kannst du Slides auch vorübergehend oder nur für eine bestimmte Zeit ausblenden und später wieder einblenden.

• Beschreibung hinzufügen: Vergib eine Beschreibung für diesen Slide, die zur besseren Übersicht im CMS dient.

• Link hinzufügen: Im Feld "Link" kannst du eine Verlinkung hinzufügen. Beim Klick auf den "Slide" wird der Besucher zu dieser Verlinkung weitergeleitet. Hierfür stehen verschiedene "Linktypen" zur Verfügung:

  • Product: Gib eine Produktnummer ein, um den Besucher zur Produktdetailansicht dieses Produktes weiterzuleiten.

  • Category: Gib einen Kategorie-Index ein, um den Besucher zur Kategorieseite dieser Kategorie weiterzuleiten.

  • Internal: Mit dem Linktyp Internal, kann nicht auf im CMS erstellte Seiten verlinkt werden. Hierfür muss der Linktyp URL verwendet werden. Der Internal-Link bezieht sich auf Verlinkungen zu Shop-Templates und folgt der Logik von WS-LoadTpl. Informationen zur Benutzung von WS-LoadTpl findest du hier in unserer Dokumentation.
    In neueren Versionen unseres CMS wird der Linktyp Internal nicht mehr unterstützt.

  • URL: Gib eine URL an, um den Besucher zu dieser URL weiterzuleiten.

• Bilder zuweisen: Innerhalb von "Bilder" klicke auf das Feld mit dem "(+)".

  • Es erscheinen sechs weitere Felder, die jeweils das anzuzeigende Bild für den entsprechenden Viewport darstellen (XS bis XXL, von Smartphones bis zu Wide-Screens):

    • XS / SM: Smartphones
      MD / LG: Tablets und kleinere Laptops
      XL / XXL: Große Laptops, Desktop PCs und Wide-Screens

  • Wähle für jeden Viewport das passende Bild aus der Medienbibliothek des CMS oder füge ein neues Bild hinzu.

• Weitere Slides hinzufügen: Klicke auf "+ Eintrag hinzufügen", um zusätzliche Slides zum Slider hinzuzufügen. Wiederhole die oben beschriebenen Schritte für jeden neuen Slide, indem du Bilder zuweist, Links festlegst und den Anzeigestatus entsprechend konfigurierst.

5.4.5 Vorhandene Slides bearbeiten

• Zu den Slides navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort die vorhandene Slider-Komponente auf. Nun siehst du die vorhandenen Slides ebenfalls zum aufklappen und mit einem Pfeil markiert. Wähle den Slide, der zu bearbeiten ist und klicke zum Aufklappen auf die Leiste mit dem Pfeil

• Anzeigestatus festlegen: Über "Anzeigestatus" mit der Auswahl "Ja" wird der Slide im Slider angezeigt. Mit der Auswahl "Nein" wird der Slide nicht angezeigt. So kannst du Slides auch vorübergehend oder nur für eine bestimmte Zeit ausblenden und später wieder einblenden.

• Beschreibung ändern: Im Feld “Beschreibung” kannst du per Klick in das Feld die Beschreibung des jeweiligen Slides ändern, die zur besseren Übersicht im CMS dient.

• Link hinzufügen: Im Feld "Link" kannst du die Verlinkung bearbeiten. Beim Klick auf den "Slide" wird der Besucher zu dieser Verlinkung weitergeleitet. Hierfür stehen verschiedene "Linktypen" zur Verfügung:

  • Product: Gib eine Produktnummer ein, um den Besucher zur Produktdetailansicht dieses Produktes weiterzuleiten.

  • Category: Gib einen Kategorie-Index ein, um den Besucher zur Kategorieseite dieser Kategorie weiterzuleiten.

  • Internal: Mit dem Linktyp Internal, kann nicht auf im CMS erstellte Seiten verlinkt werden. Hierfür muss der Linktyp URL verwendet werden. Der Internal-Link bezieht sich auf Verlinkungen zu Shop-Templates und folgt der Logik von WS-LoadTpl. Informationen zur Benutzung von WS-LoadTpl findest du hier in unserer Dokumentation.
    In neueren Versionen unseres CMS wird der Linktyp Internal nicht mehr unterstützt.

  • URL: Gib eine URL an, um den Besucher zu dieser URL weiterzuleiten.

• Bilder anpassen: Um die Bilder des Slides anzupassen, gibt es verschiedene Möglichkeiten.

  • Möchtest du beispielsweise alle Bilder für jede Bildschirmbreite gleichzeitig entfernen, so klicke auf das Mülleimer-Icon des Feldes “Bilder“.

  • Möchtest du jedoch nur einzelne Bilder austauschen, entfernen oder das Bild an sich bearbeiten kannst du die Icons, die sich direkt bei dem jeweiligen Bild befinden benutzen.

    • Klicke auf das + Symbol um, das Bild mit einem anderen Bild aus der Medienbibliothek oder einem neu hochgeladenen Bild zu tauschen.

    • Die Option Link kopieren mit dem Link-Symbol kopiert dir den Pfad zu dem Bild in deine Zwischenablage.

    • Klicke auf das Mülleimer-Icon um, das Bild für die jeweilige Bildschirmbreite zu entfernen.

    • Über das Stift-Symbol kommst du zum Bearbeiten des Bildes, wo du den Dateinamen, den Alternativtext, den Bildtext und die Location des Bildes anpassen kannst.

5.3.5 Speichern und Testmodus

• Testmodusentscheidung: Bevor du speicherst, entscheide am Ende der Seite über die Auswahl "JA / NEIN", ob die Änderungen im Testmodus oder im Livemodus angezeigt werden sollen.

• Speichern: Bestätige die Änderungen durch Klicken auf "Speichern".

5.5 Anpassen von ProductSlidern am Beispiel der Startseite

5.5.1 Anpassen des ProductSlider “Unsere Topseller“

• Zum ProductSlider navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort die Product Slider-Komponente “Unsere Topseller” auf.

• Überschrift: Ändere die Überschrift per Klick in das Feld und trage eine neue ein.

• Kategorie-Index: Bevor du eine neuen Kategorie Index in das Feld schreibst, muss der Andere erst gelöscht werden, da nicht zwei verschiedene ganze Kategorien in einem Slider abgebildet werden können.

• Volle Bildschirmbreite: Mit der Option Ja legst du fest, dass der Slider über die ganze Bildschirmbreite geht und die Option Nein sorgt dafür, dass der Slider sich an der Breite der anderen Elemente anpasst.

5.5.2 Anpassen des ProductSlider (manual) “Unsere besten Hosen“

• Zum ProductSlider (manual) navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort
  die Product Slider (manual) Komponente “Unsere besten Hosen” auf.

• Überschrift: Ändere die Überschrift per Klick in das Feld und trage eine neue ein.

• Produktliste: Klicke in das Feld und füge einen neuen Produkt-Index hinzu oder entferne ein Produkt aus dem Slider indem du eine Produktnummer entfernst.
  Achte dabei stets darauf, dass es nicht zu Dopplungen von Kommas kommt, oder du zwischen zwei Produktnummern ein Komma vergisst um fehlerhafte Anzeigen zu vermeiden.

• Volle Bildschirmbreite: Mit der Option Ja legst du fest, dass der Slider über die ganze Bildschirmbreite geht und die Option Nein sorgt dafür, dass der Slider sich an der Breite der anderen Elemente anpasst.

5.6 Anpassen von einem ProductTeaser am Beispiel der Startseite

5.6.1 Anpassen des ProductTeasers “Technik-Neuheiten“

• Zum ProductTeaser navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort
  die Product Teaser-Komponente “Technik-Neuheiten” auf.

• Überschrift: Ändere die Überschrift per Klick in das Feld und trage eine neue ein.

• Produktliste: Klicke in das Feld und füge einen neuen Produkt-Index hinzu oder entferne ein Produkt aus dem Teaser indem du eine Produktnummer entfernst.
  Achte dabei stets darauf, dass es nicht zu Dopplungen von Kommas kommt, oder du zwischen zwei Produktnummern ein Komma vergisst um fehlerhafte Anzeigen zu vermeiden.

6. Strapi für Subshops erweitern

6.1 Neue Sprache anlegen

• Einstellungen → Internationalisierung

• “Neue Sprache hinzufügen”

• Sprache auswählen.

• Anzeigenamen nicht ändern.

• Locale-ID notieren / kopieren. Bspw. “Französisch (fr) - fr wäre hier die Locale-ID.

• Speichern.

6.2 Sprache einem Subshop zweisen

• Content-Manager → Konfiguration

• “+ Eintrag hinzufügen” wählen oder einen bestehenden bearbeiten.

• Unter “WEBSALE Subshop ID” kann nun eine kommaseparierte Liste an Subshop-IDs eingetragen werden.

• Unter “Strapi Locale ID” muss die im vorherigen Schritt kopierte “Locale-ID” eingefügt werden.

• Im Anschluss speichern.