Inhalte anpassen in strapi - WEBSALE Dokumentation

Auf dieser Seite wird beschrieben, wie Inhalte im Strapi CMS im WEBSALE-Kontext gepflegt und angepasst werden. Dazu gehören das Bearbeiten bestehender Inhalte, das Anlegen neuer Inhalte sowie die grundlegenden Unterschiede zwischen Speichern und Veröffentlichen – inklusive Hinweisen zum Vorab-Testen. Anhand praxisnaher Beispiele (z. B. Inhaltsseiten, Slider, Product-Slider, Product-Teaser) zeigt die Dokumentation typische Arbeitsschritte im Content-Manager und hilft dabei, Änderungen sicher umzusetzen, ohne dass dafür Entwicklungskenntnisse erforderlich sind.

Inhalte anpassen

Ü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 des Online-Shops essentiell sind. Im Standardumfang unserer Shopsoftware werden folgende Seiten ausgeliefert:

Startseite: Die zentrale Anlaufstelle für Besucher des 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 des Online-Shops gegenüber den Kunden.

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 Besucher sichtbar gemacht werden.

Speichern

Das Speichern von Inhalten in Strapi ermöglicht es, Ä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 Änderungen vorgenommen werden, werden diese durch das Speichern sofort öffentlich sichtbar. Das bedeutet, dass alle gespeicherten Änderungen an veröffentlichten Inhalten direkt auf der Live-Seite aktualisiert werden.

Veröffentlichen

Das Veröffentlichen macht die Inhalte für alle sichtbar.
Wird eine Seite, die zuvor veröffentlicht wurde, auf “unveröffentlicht” gestellt und anschließend Änderungen vorgenommen und gespeichert, so verbleiben diese Änderungen intern, ohne für die Öffentlichkeit sichtbar zu sein. Diese gespeicherten Änderungen befinden sich im Entwurfsstatus.

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.

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.

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.
Dort wird eine Übersicht der hinterlegten Inhaltsseiten angezeigt
Wähle die Seite Impressum oder eine andere Seite, die bearbeiten werden soll. Nach Auswahl der Seite, wird als Überschrift der Name des Templates - in diesem Falle also tpl_imprint - angezeigt. Diese Information ist dann nützlich, wenn das Design dieser Seite grundsätzlich über das Template geändert werden muss.

Ö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: Template Name und Meta-Informationen
- Abschnitt 02: Seiteninhalt
- Abschnitt 03: Testmodus

Bearbeitung der Seitendetails

Template-Name: Ändere den Namen nur, wenn das Template gewechselt wurde. Stelle sicher, dass das entsprechende Template auf dem Server vorhanden ist.
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.

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, können zusätzliche Komponenten hinzufügt werden:
- 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 die 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 es kann mit der Bearbeitung begonnen werden.

Speichern und Testmodus

Testmodus-Optionen: Vor dem speichern muss am Ende der Seite über die Auswahl “JA / NEIN” entschieden werden, ob die Änderungen im Testmodus oder im Livemodus angezeigt werden sollen.

Anpassen von einem Bilder-Slider am Beispiel der Startseite

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 bearbeitet werden soll.

Bearbeitung der Seitendetails

Template-Name: Ändere den Namen nur, wenn das Template gewechselt wurde. Stelle sicher, dass das entsprechende Template auf dem Server vorhanden ist.
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.

Allgemeine Optionen für den Slider

Anzeige über die gesamte Bildschirmbreite: Abhängig vom Storefront-Design des Shops kann man 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.

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 können Slides auch vorübergehend oder nur für eine bestimmte Zeit ausgeblendet - und später wieder eingeblendet werden.
Beschreibung hinzufügen: Vergib eine Beschreibung für diesen Slide, die zur besseren Übersicht im CMS dient.
Link hinzufügen: Im Feld “Link” kann eine Verlinkung gesetzt werden. 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: Gib spezifische Pfade oder Routen an, die zu anderen Seiten oder Ressourcen innerhalb deines Online-Shops führen.
- 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.

Vorhandene Slides bearbeiten

Zu den Slides navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort die vorhandene Slider-Komponente auf. 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 können Slides auch vorübergehend oder nur für eine bestimmte Zeit ausgeblendet- und später wieder einblendet werden.
Beschreibung ändern: Im Feld “Beschreibung” kannst per Klick in das Feld die Beschreibung des jeweiligen Slides geändert werden, die zur besseren Übersicht im CMS dient.
Link hinzufügen: Im Feld “Link” kann die Verlinkung bearbeiten werden. 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: Gib spezifische Pfade oder Routen an, die zu anderen Seiten oder Ressourcen innerhalb deines Online-Shops führen.
- 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öchte man beispielsweise alle Bilder für jede Bildschirmbreite gleichzeitig entfernen, muss man auf das Mülleimer-Icon des Feldes “Bilder“ klicken.
- Möchte man nur einzelne Bilder austauschen, entfernen oder das Bild bearbeiten, kann man 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 den Bild-Pfad in die Zwischenablage.
  - Klicke auf das Mülleimer-Icon um, das Bild für die jeweilige Bildschirmbreite zu entfernen.
  - Über das Stift-Symbol kommst man zum Bearbeitungsmodus des Bildes, wo man den Dateinamen, den Alternativtext, den Bildtext und die Location des Bildes anpassen kann.

Testmodus

Testmodus: Vor dem speichern muss über die Auswahl “JA / NEIN” festgelegt werden, ob die Änderungen im Testmodus oder im Livemodus angezeigt werden sollen.

Anpassen von Product-Slidern am Beispiel der Startseite

Anpassen des Product-Slider “Unsere Topseller“

Zum Product-Slider 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 ein neuer Kategorie Index in das Feld geschrieben wird, muss der vorhandene erst gelöscht werden, da nicht zwei verschiedene ganze Kategorien in einem Slider abgebildet werden können.
Volle Bildschirmbreite: Mit der Option “Ja” wird festgelegt, dass der Slider über die ganze Bildschirmbreite geht - die Option “Nein” sorgt dafür, dass der Slider sich an der Breite der anderen Elemente anpasst.

Anpassen des Product-Slider (manual) “Unsere beste Bekleidung“

Zum Product-Slider (manual) navigieren: Navigiere zu der Bearbeitungs-Seite und klappe dort
die Product-Slider (manual) Komponente “Unsere beste Bekleidung” 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 durch das entfernen der Produktnummer.
Achte dabei stets darauf, dass es nicht zu Dopplungen von Kommas kommt, oder zwischen zwei Produktnummern ein Komma vergessen wird, um fehlerhafte Anzeigen zu vermeiden.
Volle Bildschirmbreite: Mit der Option “Ja” wird festgelegt, 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.

Anpassen von einem Product-Teaser am Beispiel der Startseite

Anpassen des Product-Teasers “Technik-Neuheiten“

Zum Product-Teaser 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 durch das entfernen der Produktnummer.
Achte dabei stets darauf, dass es nicht zu Dopplungen von Kommas kommt, oder zwischen zwei Produktnummern ein Komma vergessen wird, um fehlerhafte Anzeigen zu vermeiden.

Strapi für Subshops erweitern

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

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

Der WEBSALE Strapi Connector beachtet nun automatisch die neue Sprache.
Content, der im Content-Manager für diese Sprache gepflegt wird, wird auf dem Shopserver in die Verzeichnisse für Subshops abgelegt. Jeder Wert (kommasepariert) stellt einen Subshop-Ordner dar.

Strapi CMS

Documentation Index