Wo finde ich es?
Vertriebskanäle> Webshop
Was bedeutet das?
Derzeit bietet Palisis zwei Buchungs-Engines: „Widget“ und „Desktop“. In diesem Dokument werden verschiedene technische Aspekte von „Webshop Desktop“ beschrieben, darunter:
- So aktivieren Sie Google Analytics
- So lösen Sie Funktionen der Desktop-Engine mithilfe von HTTP-GET-Parametern aus
- So betten Sie eine Desktop-Engine als IFRAME ein
- So verwalten Sie einen „externen Warenkorb“, wenn Sie eine Desktop-Engine als IFRAME einbetten
- Link zu allen Konfigurationsoptionen einer Desktop-Instanz
Eine Liste aller aktuellen Konfigurationsoptionen für Desktop-Instanzen finden Sie hier:
https://office.palisis.com/pit/v5/#/DesktopGlobal
Um die „Kernoptionen“ jeder Instanz anzuzeigen, klicken Sie auf die Schaltfläche „Bearbeiten“ und scrollen Sie nach unten, um alle Attribute anzuzeigen:
Vor- und Nachteile der „Desktop“-Lösung
Buchungs-Engine „Desktop“ – als Lösung für mehrere Angebote:
- VORTEIL Buchungs-Engine für „mehrere Angebote“ einschließlich Warenkorb
- VORTEIL Funktioniert als eigenständige Lösung (keine eigene Website erforderlich)
- VORTEIL Viele Branding-/Layout-Optionen
- VORTEIL Ermöglicht die Buchung von Transportartikeln, Paketen und Produkten
- VORTEIL Vollständig als IFRAME einbettbar
- VORTEIL Als reine „Checkout“-Lösung bei Verwendung der Webshop-API einsetzbar
- VORTEIL Vollständig in Google Analytics integriert
- NACHTEIL Bei Verwendung als IFRAME oder „nur zur Prüfung“ ist die Integration aufwendiger
Allgemeine Terminologie
- „Shopbetreiber“ … Der Betreiber der Website, die den Palisis-Webshop verwendet/einbettet; Palisis-„Owner“
- „Käufer“ … Die Person, die die Website des Shopbetreibers verwendet
Was ist eine „Desktop“-Instanz?
Diese Konfigurationsinstanz enthält alle Informationen zu der jeweiligen Desktop-Instanz, z. B. welche Angebote zugewiesen/verkauft werden, ob die Angebote mit einem Fahrplan verkauft werden sollen oder nicht, Layout-Optionen usw. Sie können so viele Desktop-Instanzen erstellen, wie erforderlich sind. Beachten Sie, dass für eine Desktop-Instanz zwei Sätze von Konfigurationsoptionen verfügbar sind: ein Satz global für eine bestimmte Instanz sowie ein Satz für jedes Angebot, das dieser bestimmten Instanz zugewiesen ist.
Jede Desktop-Instanz wird durch eine systemweit eindeutige Domain (auch <Shop-Domain> genannt) identifiziert.
Die Shop-Domain wird automatisch zugewiesen, wenn Sie eine Desktop-Instanz erstellen.
So lösen Sie Funktionen der Desktop-Engine mithilfe von HTTP-GET-Parametern aus
In allen Beispielen wird die Shop-Domain webshop-api-test verwendet. Ersetzen Sie diese unbedingt durch Ihre eigene Shop-Domain.
Mobil erzwingen
| Name des GET-Parameters | Wert/Beschreibung |
| forcemobile | true|false – wenn true übergeben wird, wird die mobile Darstellung der Engine erzwungen |
Beispiel:
https://webshop-api-test.palisis.com/?forcemobile=true
Direkt buchen
| Name des GET-Parameters | Wert/Beschreibung |
| book-direct | offerId , die im Backoffice auf dem Konfigurationsbildschirm der Instanz zu finden ist – wenn sie übergeben wird, startet die Engine den Buchungsvorgang mit dem angegebenen Angebot |
Beispiel:
https://webshop-api-test.palisis.com/?book-direct=r-1541
Angebot direkt anzeigen
| Name des GET-Parameters | Wert/Beschreibung |
| offer-direct |
offerId , die im Backoffice auf dem Konfigurationsbildschirm der Instanz zu finden ist – wenn sie übergeben wird, zeigt die Engine auf dem Startbildschirm NUR dieses Angebot an. Wenn die Angebotskachel eingeklappt ist, wird sie ausgeklappt.
OPTIONAL kann eine durch Kommas getrennte Liste von offerIds übergeben werden. Die übergebenen Angebote bleiben geöffnet, während die übrigen Angebote geschlossen werden. Beispiel:
offerId1,offerId2,offerIdN |
Beispiel:
https://webshop-test-offer-direct.palisis.com/?offer-direct=r-1541
Beispiel mit Kommatrennung:
https://webshop-test-offer-direct.palisis.com/?offer-direct=r-1541,r-1561
Event direkt auswählen
Name des GET-Parameters |
Wert/Beschreibung |
event-direct |
yyyy-mm-ddThh:mm – wählt eine bestimmte Abfahrt (ein Event) eines Angebots im Buchungsablauf vor (Datum und Uhrzeit sind bereits ausgewählt). Muss immer zusammen mit book-direct oder offer-direct verwendet werden. Das Angebot sollte mit Date-time option = date-time konfiguriert sein. Das Format darf weder Sekunden noch eine Zeitzone enthalten (z. B. 2025-12-24T20:00). Wenn der angegebene Wert für dieses Angebot nicht existiert, nicht buchbar ist oder das falsche Format aufweist, wechselt der Webshop zum normalen Buchungsablauf zurück, damit der Käufer ein verfügbares Datum/eine verfügbare Uhrzeit auswählen kann |
Beispiel (book-direct + event-direct):
Beispiel (offer-direct + event-direct):
Sprache/Gebietsschema
| Name des GET-Parameters | Wert/Beschreibung |
| locale | en|de|es|it|fr zwingt die Engine in das angegebene Gebietsschema – verwendet wird ein zweistelliger Sprachcode |
Beispiel:
https://webshop-api-test.palisis.com/?locale=de
Warenkorb erzwingen
| Name des GET-Parameters | Wert/Beschreibung |
| forcebasket | true|false – wenn true übergeben wird, werden alle warenkorbbezogenen Funktionen der Engine aktiviert, die in der Instanzkonfiguration möglicherweise deaktiviert sind. Dies ist nützlich, wenn die Engine als IFRAME mit deaktiviertem Warenkorb ausgeführt wird, die Instanz aber im mobilen Modus mit vollständiger Warenkorbfunktionalität wiederverwendet werden soll. |
Beispiel:
https://webshop-api-test.palisis.com/?forcebasket=true
So betten Sie eine Desktop-Engine als IFRAME ein
Alle Beispiele/Demonstrationen verwenden die Shop-Domain webshop-api-test. Ersetzen Sie diese unbedingt durch Ihre eigene Shop-Domain.
Der zentrale Punkt ist: Da die Desktop-Engine keine feste Höhe besitzt und jeder Schritt innerhalb des Buchungsprozesses zu einer anderen Höhe der Engine führen kann, muss die Seite, auf der sich der Engine-IFRAME befindet, die Höhe des IFRAMEs korrigieren können.
So beheben Sie die variable Höhe des Engine-IFRAMEs (neue Methode – eingeführt mit Palisis 3.94)
Die Palisis-Desktop-Engine verwendet ein Drittanbieter-Tool namens „iFrame Resizer“.
Das Tool ist unter https://github.com/davidjbradshaw/iframe-resizer verfügbar. Gemäß den dortigen Anweisungen unter „Getting started“ verknüpfen und laden wir die JavaScript-Datei iframeResizer.contentWindow.min.js mit jeder Desktop-Engine-Instanz. Dies ist die einzige Voraussetzung für die Verwendung dieses Tools auf der Host-Seite (der Kundenseite, die den IFRAME einbettet).
Bitte befolgen Sie die weiteren Anweisungen unter „Getting started“ auf https://github.com/davidjbradshaw/iframe-resizer, um „iFrame Resizer“ auf der Seite einzurichten, die den IFRAME einbettet.
NEUER HINWEIS: Beim neuen Desktop-Design muss diese Bibliothek als heightCalculationMethod den Wert ‘taggedElement’ verwenden. Verhindern Sie außerdem Cross-Domain-Probleme, indem Sie checkOrigin: false verwenden.
Beispielcode:
<iframe id="myIframe" src="https://mytestingshop.palisis.com/" style="width:100%; border:none"></iframe>
<script>
iFrameResize({checkOrigin:false, heightCalculationMethod: 'taggedElement'}, '#myIframe');
</script>
Wichtige Integrationsregeln
-
Selektives Binden des Skripts (gemischte Setups):
Wenn eine Website sowohl alte als auch neue Webshop-Versionen einbettet, wenden Sie das iFrame-Resizer-Skript nicht global an (vermeiden Sie allgemeine Selektoren wie
iframeoder$('iframe')).Binden Sie das Resizer-Skript bedingt mithilfe spezifischer
id-Attribute des IFRAMEs oder Ziel-CSS-Klassen, die ausschließlich dem IFRAME des alten Webshops entsprechen (z. B.#oldWebshopIframeoder.legacy-webshop-iframe).
-
Ausschlüsse für den neuen Webshop:
Stellen Sie sicher, dass das iFrame-Resizer-Skript niemals aufgerufen oder ausgerichtet wird auf den IFRAME-Container, der den neuen Webshop hostet. Der neue Webshop verarbeitet die Größenanpassung unabhängig, und die Ausführung von iFrame Resizer für diesen IFRAME kann Rendering-Schleifen oder unerwartete Layoutprobleme verursachen.
-
Erforderliche Konfigurationsoptionen (Legacy-Webshop):
Setzen Sie
heightCalculationMethod: 'taggedElement'.Setzen Sie
checkOrigin: false, um Kommunikationsfehler zwischen Domains zu verhindern.
Implementierungsbeispiele
1. Standardmäßiger einzelner IFRAME (Legacy-Webshop)
<iframe id="legacyWebshopIframe" src="`https://mytestingshop.palisis.com/`" style="width:100%; border:none;"></iframe>
<script src="`https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.9/js/iframeResizer.min.js`"></script>
<script>
// Ausschließlich über den spezifischen ID-Selektor ansprechen
iFrameResize({
checkOrigin: false,
heightCalculationMethod: 'taggedElement'
}, '#legacyWebshopIframe');
</script>
2. Gemischtes Setup (Koexistenz von altem und neuem Webshop)
Wenn beide Versionen auf derselben Seite oder innerhalb derselben Anwendung koexistieren:
<!-- Alter Webshop-Iframe (erfordert Resizer) -->
<iframe id="oldWebshopIframe" class="legacy-webshop" src="`https://oldshop.palisis.com/`" style="width:100%; border:none;"></iframe>
<!-- Neuer Webshop-Iframe (Resizer NICHT binden) -->
<iframe id="newWebshopIframe" class="new-webshop" src="`https://newshop.palisis.com/`" style="width:100%; border:none;"></iframe>
<script src="`https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.9/js/iframeResizer.min.js`"></script>
<script>
// Richtig: Ausschließlich an die ID oder Klasse des alten Webshop-Iframes binden
iFrameResize({
checkOrigin: false,
heightCalculationMethod: 'taggedElement'
}, '#oldWebshopIframe');
// FALSCH – NICHT SO VORGEHEN:
// iFrameResize({ checkOrigin: false }, 'iframe'); // Allgemeiner Selektor spricht den neuen Webshop an!
</script>
Eine einfache Demonstration finden Sie hier:
https://palisis-webshop-samples.palisis.com/simple-desktop-iframe.html
Weitere Hinweise zur Verwendung von IFRAMEs
Beachten Sie, dass die Palisis-Engines immer HTTPS erzwingen. Daher empfehlen wir dringend, dass auch die Host-Seite (die Seite, die den IFRAME einbettet) HTTPS verwendet.
Dies dient nicht nur der Benutzerfreundlichkeit, sondern verhindert auch „Cross-Domain“-Probleme beim Laden des IFRAMEs. Einige Browser-/Betriebssystemversionen laden den IFRAME nicht, wenn die Host-Seite und die IFRAME-Quelle nicht dasselbe Protokoll verwenden.
Probleme mit dieser Korrektur der IFRAME-Höhe können auf Mobiltelefonen auftreten, insbesondere in der Kombination aus iOS/iPhone/Safari.
Beachten Sie, dass wir dringend davon abraten, IFRAMEs für mobile Versionen zu verwenden.
Die Palisis-Desktop-Engine verfügt über eine ausgezeichnete mobile Darstellung. Wir empfehlen, die Engine direkt aufzurufen, wenn Ihr Server bzw. Ihre Host-Seite ein Mobilgerät erkennt.
Wenn Sie IFRAMEs dennoch in Ihrer mobilen Version verwenden möchten, treten unter Android weniger Probleme auf als bei der oben genannten Kombination aus iOS/iPhone/Safari.
Daher empfehlen wir, Ihrer Host-Seite den folgenden Fix hinzuzufügen, wenn Sie iOS/iPhone/Safari erkennen:
<script>
document.ontouchmove = function(e){
if($(e.touches[0].target).closest('.somecssclass').length > 0){
return true;
}
e.preventDefault();
};
</script>Vorausgesetzt, Sie haben dem Tag <body> die Klasse class=”somecssclass” hinzugefügt.
Instanzoption „Gebietsschema erzwingen“ und „Gebietsschema aus Header entfernen“
Ermöglicht es, eine Desktop-Shop-Instanz auf ein bestimmtes Gebietsschema zu setzen, das durch den zweistelligen Gebietsschemacode angegeben wird, z. B. „en“ für Englisch oder „es“ für Spanisch. Außerdem können Sie über eine durch Kommas getrennte Liste zweistelliger Gebietsschemacodes eine oder mehrere Sprachen aus den Sprachauswahlschaltflächen im Header der Shop-Benutzeroberfläche entfernen. Mit „es,it“ würden beispielsweise Spanisch (es) und Italienisch (it) entfernt.
HINWEIS: Die Option „Gebietsschema erzwingen“ kann nicht verwendet werden, wenn die Engine in einem IFRAME eingebettet ist