Mit der offiziellen gurado WebConnect Extension integrierst du deinen Gutscheinshop in TYPO3 13.4 oder 14 – direkt auf einer Seite (Embed-Modus) oder über einen schwebenden Button (Bubble-Modus).
Warum die TYPO3-Extension verwenden?
Du kannst gurado WebConnect grundsätzlich auch ohne Extension in TYPO3 einbinden, indem du den Widget-Code aus der WebConnect-Einrichtung kopierst und in ein HTML-Inhaltselement einfügst.
Mit der offiziellen gurado WebConnect Extension wird die Integration jedoch einfacher und komfortabler.
Keine HTML-Kenntnisse erforderlich: Füge den Gutscheinshop über ein eigenes TYPO3-Inhaltselement hinzu und konfiguriere ihn direkt im Backend.
Einfache Konfiguration: Wähle, ob du Gutscheine, Kategorien oder einen bestimmten Artikel anzeigen möchtest – ohne Anpassung des HTML-Codes.
Zentrale Bubble-Konfiguration: Aktiviere den schwebenden Gutscheinshop in den TYPO3 Site Settings. Er steht anschließend auf den Seiten der jeweiligen TYPO3-Site zur Verfügung.
Automatische JavaScript-Einbindung: Die Extension übernimmt das Laden des WebConnect-Skripts über die TYPO3-Asset-Verwaltung.
Redakteursfreundlich: Berechtigte Redakteure können die verfügbaren Einstellungen direkt im TYPO3-Backend vornehmen, ohne Widget-Code zu bearbeiten.
Einfache Wartung: Die Extension lässt sich über den üblichen TYPO3- beziehungsweise Composer-Prozess aktualisieren.
Unser Tipp: Für eine einmalige, einfache Einbindung reicht grundsätzlich auch der HTML-Code. Wenn du WebConnect dauerhaft auf einer TYPO3-Website einsetzen oder den Bubble-Modus zentral verwalten möchtest, empfehlen wir die offizielle Extension.
1. WebConnect vorbereiten
Die Gestaltung, Schriftarten, Farben und Artikelauswahl richtest du im gurado Dashboard ein. Lies dazu die separate Anleitung: WebConnect Einrichtung. Wähle dort im letzten Schritt die Integrationsmethode TYPO3 Extension. Halte deinen Storecode bereit.
2. Extension installieren
Die Erweiterung heißt gurado WebConnect (Extension-Key gurado_webconnect) und ist im TYPO3 Extension Repository verfügbar.
Mit Composer installierst du Version 1.x im TYPO3-Projektverzeichnis:
composer require gurado/typo3-webconnect:^1.0
Anschließend bei Bedarf Einrichtung und Cache-Aktualisierung ausführen:
./vendor/bin/typo3 extension:setup
./vendor/bin/typo3 cache:flush
Bei einer TYPO3-Installation ohne Composer kannst du die Erweiterung über das TYPO3 Extension Repository installieren.
3. Site Set aktivieren
Öffne im TYPO3-Backend Sites → Site Management.
Bearbeite die gewünschte Website und aktiviere das Site Set gurado WebConnect.
Speichere die Konfiguration.
4. Embed-Modus: Inhaltselement einfügen
Öffne die gewünschte TYPO3-Seite.
Füge das Inhaltselement gurado WebConnect hinzu.
Trage deinen Storecode ein.
Wähle die Startansicht und speichere.
Startansichten: Artikel (Standard), Kategorien oder einzelner Artikel (mit numerischer Artikel-ID). Warenkorb und Checkout sind bereits im WebConnect-Shop enthalten; zusätzliche TYPO3-Seiten benötigst du dafür nicht.
So sieht der Embed-Modus aus:
Beispiel: Ein Gutscheinartikel ist direkt in die Website eingebettet.
Der Warenkorb ist bereits Bestandteil des eingebetteten Shops.
Auch der Checkout ist integriert – zusätzliche TYPO3-Seiten sind nicht erforderlich.
5. Bubble-Modus: globalen Shop aktivieren
Öffne Sites → Setup → Site Settings.
Wähle den Bereich gurado WebConnect.
Trage den Storecode ein und aktiviere den Bubble-Modus.
Wähle eine Startansicht sowie bei Bedarf Position und Abstände.
Speichere und kontrolliere die Website.
Startansichten: Standard (empfohlene Begrüßungsansicht), Artikel oder einzelner Artikel (mit numerischer Artikel-ID). Der Bubble-Modus gilt für die jeweilige TYPO3-Site und ist kein Inhaltselement.
So sieht der Bubble-Modus aus:
Der schwebende Button öffnet den Gutscheinshop.
Empfohlene Standardansicht nach dem Öffnen des Bubble-Shops.
Der Gutscheinshop kann direkt einen einzelnen Artikel anzeigen.
6. Wichtige Hinweise
Zur Verbindung reicht der Storecode. Ein separater Access Token oder Consumer Key wird nicht benötigt.
jQuery und Bootstrap müssen nicht separat eingebunden werden.
Design und Gutscheinauswahl bleiben im gurado Dashboard.
Die neue Extension
gurado_webconnectersetzt die früheregurado_storefront-Extension nicht automatisch.
7. Weitere Informationen
Bei Fragen erreichst du uns unter support@gurado.de oder über den Chat auf www.gurado.de.