Shop in Webseite einbinden

Hinweis

Dieses Kapitel richtet sich an Benutzer mit der Rolle Mandantenadministrator sowie an Webseitenbetreiber und Web-Agenturen.

Du kannst den Shop direkt in deine eigene Webseite einbinden. Deine Kunden können dadurch deine Angebote auf deiner Webseite ansehen und buchen, ohne den Shop separat aufrufen zu müssen.

Für die Einbindung benötigst du die Einbettungs-Adresse deines Shops. Wie du anschließend vorgehst, hängt davon ab, mit welchem System deine Webseite erstellt wurde.

Einbettungs-Adresse finden

Öffne in VeasySport:

Einstellungen -> Shop

Im Abschnitt Allgemein findest du die Einbettungs-Adresse deines Shops.

Kopiere diese Adresse. Du benötigst sie anschließend für die Einbindung auf deiner Webseite.

Shop in WordPress einbinden

Wenn deine Webseite mit WordPress erstellt wurde, kannst du den Shop über das passende WordPress-Plugin einbinden.

1. Plugin installieren

Installiere zunächst das WordPress-Plugin:

VeasySport: Plugin herunterladen

2. Shortcode einfügen

Öffne in WordPress die Seite, auf der du den Shop anzeigen möchtest.

Füge an der gewünschten Stelle einen Shortcode-Block ein.

Trage dort folgenden Shortcode ein:

[veasysport_shop shop_url="IHRE_SHOP_URL"]

Ersetze IHRE_SHOP_URL durch die Einbettungs-Adresse, die du zuvor aus den Shop-Einstellungen kopiert hast.

Tipp

Prüfe die Seite nach dem Einfügen einmal in der Vorschau. So kannst du direkt sehen, ob der Shop korrekt angezeigt wird.

Shop in andere Webseiten einbinden

Wenn deine Webseite nicht mit WordPress erstellt wurde, kannst du den Shop über ein HTML-iFrame einbinden. Das ist zum Beispiel bei Drupal, TYPO3, Joomla oder Redaxo möglich.

Füge dazu folgenden Code an der gewünschten Stelle auf deiner Webseite ein:

<style>
    #shopIframe {
        width: 100%;
        height: 100vh;
    }
</style>

<iframe
    id="shopIframe"
    src="IHRE_SHOP_URL"
    scrolling="no"
    sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
    style="border: none;"
></iframe>

<script type="module">
    import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";

    initialize({}, "#shopIframe");
</script>

Ersetze IHRE_SHOP_URL durch die Einbettungs-Adresse deines Shops.

Technischer Hinweis

Der Beispielcode verwendet die Softwarebibliothek open-iframe-resizer. Sie sorgt dafür, dass sich die Höhe des eingebetteten Shops automatisch an den Inhalt anpasst.

Nur Artikel mit bestimmten Schlagworten anzeigen

Du musst nicht immer den gesamten Shop einbinden. Du kannst auch festlegen, dass nur Artikel mit bestimmten Schlagworten angezeigt werden.

Dafür ergänzt du die Einbettungs-Adresse um den Parameter tags.

Beispiel:

IHRE_SHOP_URL?tags=Jugend

In diesem Beispiel werden nur Artikel angezeigt, denen das Schlagwort Jugend zugeordnet ist.

Mehrere Schlagworte verwenden

Du kannst auch mehrere Schlagworte angeben. Trenne sie dafür mit einem Komma:

IHRE_SHOP_URL?tags=Jugend,Kinder

Damit werden die entsprechenden Artikel über die Einbettung gefiltert angezeigt.

Tipp

Mit Schlagworten kannst du auf verschiedenen Unterseiten deiner Webseite unterschiedliche Angebote aus demselben Shop anzeigen.