Mit den Shop Widgets in TYPO3 kannst du verschiedene Inhalte wie Buttons, Artikellisten, Preisübersichten oder Filter auf Webseiten einbinden.
Hier erfährst du Schritt für Schritt, wie du ein neues Widget erstellst.
1. Im TYPO3 Backend anmelden
Melden Sie sich wie gewohnt im TYPO3-Backend an.
2. Bereich „Shop Widgets“ öffnen
Navigieren Sie zu:
Admin Tools → Shop Widgets
3. Neues Widget anlegen
Klicken Sie auf:
+ Create new Widget
Damit wird ein neues Widget erstellt.
4. Grundeinstellungen (Settings)
Identifier
Die eindeutige ID des Widgets wird automatisch erstellt.
Domain (optional)
Hier können Sie festlegen, auf welcher Domain das Widget angezeigt werden darf.
Beispiel:
waldhart.at
Wenn das Feld leer bleibt, kann das Widget überall verwendet werden.
Description (optional)
Eine interne Beschreibung für die Widget-Übersicht.
Beispiel:
„Sommerkurse Button Deutsch“
5. Widget konfigurieren (Configure Widget)
Wählen Sie zuerst den gewünschten Widget Type aus.
Folgende Widget-Typen stehen zur Verfügung:
A) Linked Button
Ein klickbarer Button, der auf eine Seite oder einen Artikel verlinkt.
Einstellungen:
Link target page
Zielseite des Buttons.
Tipp:
Wenn auf die Detailseite eines Artikels verlinkt werden soll, verwenden Sie:
detail [15]
Open in new tab / window
Öffnet den Link in einem neuen Tab oder Fenster.
Article
Optional kann ein bestimmter Shop-Artikel ausgewählt werden.
Language
Sprache der Zielseite.
Standard:
(Default = Deutsch)
Button Label
Text im Button.
Beispiel:
„Jetzt buchen“
Show logo next to button
Zeigt zusätzlich das Shop-Logo neben dem Button an.
Partner ID / Discount Code
Fügt automatisch Partner- oder Rabattcodes an den Link an.
B) Article List
Zeigt mehrere Artikel als Liste an.
Welche Artikel sollen angezeigt werden?
Specific articles
Einzelne Artikel auswählen.
Nicht mehr benötigte Artikel können über das Papierkorb-Symbol entfernt werden.
Articles of a category
Zeigt alle Artikel einer bestimmten Kategorie.
Show all top articles
Zeigt automatisch alle Top-Artikel an.
Weitere Einstellungen
- Sprache auswählen
- Zielseite definieren
- Optional in neuem Tab öffnen
- Text des „Jetzt buchen“-Buttons anpassen
- Partner- oder Rabattcodes hinzufügen
C) Article Content
Zeigt Inhalte einzelner oder mehrerer Artikel direkt an.
Die Einstellungen funktionieren ähnlich wie bei der Artikelliste:
- Einzelne Artikel auswählen
- Kategorien verwenden
- Top-Artikel anzeigen
- Sprache definieren
- Zielseite festlegen
- „Jetzt buchen“-Button anpassen
- Partnercodes ergänzen
D) Article Price Table
Zeigt die Preistabelle eines Artikels an.
Einstellungen:
Article
Artikel auswählen.
Language
Sprache der Anzeige.
Link target page
Zielseite festlegen.
Open in new tab / window
Optional neues Fenster oder Tab verwenden.
“Book now” Button label
Text des „Jetzt buchen“-Buttons ändern.
Partner ID / Discount Code
Optional Partner- oder Rabattcodes ergänzen.
E) Article Filter
Erstellt einen Filter zur Artikelsuche.
Verfügbare Filter
Sie können festlegen, welche Filter im Widget angezeigt werden sollen:
- Zeitraum anzeigen → Auswahl eines Zeitraums
- Artikeltyp anzeigen → Auswahl verschiedener Artikeltypen
- Sportart anzeigen → Auswahl einer Sportart
- Level anzeigen → Auswahl eines Levels
- Kategorie anzeigen → Auswahl einer Kategorie
Ergebnisse direkt unter dem Filter anzeigen
Mit „Show results below filter“ bestimmen Sie, wie die Suchergebnisse angezeigt werden:
Aktiviert:
Die Ergebnisse werden direkt unter dem Filter als Artikelliste angezeigt.
Zusätzliche Optionen:
- Link target page → Zielseite für die Artikel
Tipp: Für Artikeldetailsdetail [15]verwenden - Open in new tab / window → Öffnet Links in einem neuen Tab/Fenster
- „Book now“ Button label → Text des „Jetzt buchen“-Buttons anpassen
Deaktiviert:
Der Button „Ergebnisse anzeigen“ führt auf eine separate Shop-Seite mit den Ergebnissen.
Zusätzliche Optionen:
Page to display results on → Seite, auf der die Ergebnisse angezeigt werden
Wichtig:
Auf dieser Seite müssen zusätzlich eingerichtet sein:- ein WS Shop Filter (VueFilter) mit denselben Filteroptionen
- eine WS Shop List
- Open in new tab / window → Öffnet die Ergebnisseite in einem neuen Tab/Fenster
„Show results“ button label → Text des „Ergebnisse anzeigen“-Buttons anpassen
Weitere Einstellungen:
Language
Sprache des Filters.
Heading (optional)
Überschrift des Filters.
Wenn leer, wird keine Überschrift angezeigt.
Partner ID / Discount Code
Optional Partner- oder Rabattcodes ergänzen.
6. Widget speichern
Klicken Sie abschließend auf:
Save
Das Widget ist nun gespeichert und kann auf beliebigen Webseiten eingebunden werden.