Zum Inhalt

Shop in Webseite einbinden

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

Im diesem Kapitel wird beschrieben wie Sie den Shop in Ihre Webseite einbinden.

VeasySport in eigene Webseite einbinden

Vorbereitungen

Um den Shop in Ihre Webseite einzubinden benötigen Sie die Einbettungs-Adresse des Shops. Diese finden Sie als Mandantenadministrator in der Software im Menü Mandanteneinstellungen -> Shop im Abschnitt Allgemein:

Kopieren Sie die Einbettungs-Adresse zur späteren Verwendung.

Wordpress

Um den Shop in Ihre Wordpress-Seite einzubinden, installieren Sie zunächst das Wordpress-Plugin auf Ihrer Wordpress-Seite:

Rufen Sie im Anschluss die Seite, in die Sie den Shop einbinden möchten, zum Bearbeiten auf. Fügen Sie nun an gewünschter Stelle einen Shortcode-Block hinzu und geben Sie folgenden Shortcode an:

[veasysport_shop shop_url="IHRE_SHOP_URL"]

Ersetzen Sie den Wert IHRE_SHOP_URL durch die Einbettungs-Adresse für Ihren Shop.

Alle anderen Systeme

Wenn Ihre Webseite nicht auf Wordpress sondern auf einem anderen System basiert (z.B. Drupal, Typo3, Joomla, Redaxo), dann können Sie den Shop einfach per HTML Iframe einbinden. Nutzen Sie hierzu folgende Vorlage und ersetzen Sie SHOP_URL durch die vorher aus den Shop-Einstellungen kopierte Einbettungs-Adresse:

<style>
    #veasySportShopIframe {
        width: 100%;
        height: 100vh;
    }
</style>
<iframe
    id="veasySportShopIframe"
    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({}, "#veasySportShopIframe");
</script>

Ersetzen Sie den Wert IHRE_SHOP_URL durch die Einbettungs-Adresse für Ihren Shop.

Diese Demo nutzt die Softwarebibliothek open-iframe-resizer um das Shop-iFrame in voller Höhe auf Ihrer Webseite darzustellen.

Nur Artikel mit bestimmtem Schlagwort einbetten

Wenn Sie im IFrame nur Artikel mit einem bestimmten Schlagwort anzeigen möchten, dann ist dies möglich, indem Sie an die Einbettungsadresse den GET-Parameter tags wie folgt anhängen:

https://dsb.veasysport.cloud/shop/dsb/embed?tags=Jugend

Mehrere Schlagworte können Sie durch ein Komma getrennt angeben.

https://me.veasysport.cloud/shop/me/embed?tags=Jugend,Kinder