Widgets – Einbindung auf Website

vor 7 Monaten
Support
5 Minuten

Aktuell gibt es 3 Widgets die auf Ihrer Website eingebunden werden können:

Widget 1 – Fahrzeug Karussell

Widget 2 – Schnellsuche

Widget 3 – Volltextsuche

Wo finden ich den Code zur Einbindung der Widgets?

Sehen Sie sich hierzu folgenden Beitrag an: https://docs.meinfahrzeug.shop/?p=16

Einbindung des notwendigen Codes Widgets

Um eines oder mehrere Widgets auf eine Ihrer Seiten einzubinden, muss auf jeder Seite, wo Sie die Widgets verwenden wollen, das JavaScript von Ihrem Admin Bereich des Shops eingebunden werden:

Fügen Sie diesen Code auf Ihrer Seite, am besten vor dem schließenden </body> – Tag, ein.

Einbindung der Widgets

Nun können Sie, eines oder mehrere Widgets auf dieser Seite integrieren. Kopieren Sie sich hierfür den jeweiligen Code aus dem Menüpunkt „Integration“ im Admin Bereich des Shops, in die jeweilige Seite als HTML ein.

Hier finden Sie eine Beispiel-Datei wo alle Widgets eingebunden sind. Das Verwenden des Codes aus dieser Beispieldatei auf Ihrer Seite ist nicht gestattet.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget Integration</title>
</head>

<body>
    <!-- Widget 1 - Fahrzeugkarussell -->
    <custom-elements-wrapper client-base-url="http://fahrzeugshop.digital35.de/digital35/fahrzeugshop.html#/"
        api-base-url="https://production.meinfahrzeug.shop/api"
        cdn-url="https://s3-eu-central-1.ionoscloud.com/static-webshop/82dcda21-1f26-4f1a-893c-99a759a97857/widgets/production/"
        query-params="" widget-type="1" tenant-admin-id="82dcda21-1f26-4f1a-893c-99a759a97857"
        is-car-carousel-autoplay="true" padding-x="32px" padding-top="0px" padding-bottom="32px"
        pages-search-filter-enforced-manufacturer="" search-filter-enforced-vehicle-types=""
        enforced-vehicle-request-parameters=""></custom-elements-wrapper>

    <!-- Widget 2 - Schnellsuche -->
    <custom-elements-wrapper client-base-url="http://fahrzeugshop.digital35.de/digital35/fahrzeugshop.html#/"
        api-base-url="https://production.meinfahrzeug.shop/api"
        cdn-url="https://s3-eu-central-1.ionoscloud.com/static-webshop/82dcda21-1f26-4f1a-893c-99a759a97857/widgets/production/"
        query-params="" widget-type="2" tenant-admin-id="82dcda21-1f26-4f1a-893c-99a759a97857"
        is-car-carousel-autoplay="true" padding-x="32px" padding-top="0px" padding-bottom="32px"
        pages-search-filter-enforced-manufacturer="" search-filter-enforced-vehicle-types=""
        enforced-vehicle-request-parameters=""></custom-elements-wrapper>

    <!-- Widget 3 - Volltextsuche -->

    <custom-elements-wrapper client-base-url="http://fahrzeugshop.digital35.de/digital35/fahrzeugshop.html#/"
        api-base-url="https://production.meinfahrzeug.shop/api"
        cdn-url="https://s3-eu-central-1.ionoscloud.com/static-webshop/82dcda21-1f26-4f1a-893c-99a759a97857/widgets/production/"
        query-params="" widget-type="3" tenant-admin-id="82dcda21-1f26-4f1a-893c-99a759a97857"
        is-car-carousel-autoplay="true" padding-x="32px" padding-top="0px" padding-bottom="32px"
        pages-search-filter-enforced-manufacturer="" search-filter-enforced-vehicle-types=""
        enforced-vehicle-request-parameters=""></custom-elements-wrapper>

    <!-- Dieses Script muss auf jeder Seite eingebunden werden, wo ein Widget verwendet wird! -->
    <script
        src="https://s3-eu-central-1.ionoscloud.com/static-webshop/82dcda21-1f26-4f1a-893c-99a759a97857/widgets/production/wrapper.js"
        async></script>
</body>

</html>