Button Integration

Mit diesem Skript kannst du alle deine Mazing.World-Produkte gesammelt (in Bulk) integrieren.

Übersicht

Du kannst deine Produkte mit einem 3D-Button (führt zur 3D-Ansicht) und einem AR-Button (öffnet die AR-Ansicht – per QR-Code auf Desktop oder direkt über die Kamera auf Smartphone/Tablet) integrieren.

Wir empfehlen, die 3D- & AR-Buttons entweder unterhalb der Produktgalerie oder oben rechts auf dem Produktbild zu platzieren, um die beste User Experience zu erzielen.

Lade einfach alle deine Produkte in die Mazing.World hoch und integriere anschließend unser Skript an einer Stelle in deinem Webshop oder auf deiner Website. Das Skript versucht automatisch, eine SKU mit dem aktuell angezeigten Produkt abzugleichen und rendert daraufhin die 3D- und AR-Buttons.

Integrationsbeispiel

Schritt 1 – SKU-Struktur prüfen und SKUs notieren

Überprüfe die SKU-Struktur deines Webshops anhand einer deiner Produkt-URLs, zum Beispiel:

webshop.com/product/xyz123abc

In diesem Beispiel wäre die SKU als xyz123abc definiert – also nach dem letzten Vorkommen von / in der Produkt-URL des Shops.

Es können jedoch auch verschiedene andere Formate verwendet werden.

webshop.com/p/xyz123abc 
webshop.com/p/xyz123abc/abc
webshop.com/xyz123abc

Schritt 2 – Produkte hochladen

Lade deine Produkte entsprechend ihrer SKU-Namen in die Mazing.World hoch.

In diesem Beispiel laden wir das Produkt xyz123abc hoch – exakt so benannt, wie wir es zuvor aus dem URL-Parameter unseres Webshops entnommen haben.

Schritt 3 – Skript integrieren

Füge das Mazing-Skript im <head>-Bereich deines Webshops oder deiner Homepage ein.

<head> 
 ... 
<script type="text/javascript" src="https://cdn.mazing.link/mzg-in.js"></script>
</head>

Schritt 4 – Eigene Implementierung integrieren

Füge das folgende Script-Tag-Template am Ende des <body>-Bereichs deiner Seite ein.

<body>

...
    <script>
        mazing(
            {
                customerName: 'TODO',
                buttonConfiguration: {
                    customStyle: `
                        .placeholder{}
                    ` ,
                    placementSelector: '.TODOCLASS',
                    threedBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in 3D'
                    },
                    arBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in AR'
                    }
                },
                getSKU: () => {
                    return 'TODO LOGIC TO GET SKU, from URL, Code or GTM';
                }
            }
        )
    
    </script>
</body>

Schritt 5 – Skript-Felder definieren

Sieh dir unten die vollständige Übersicht aller möglichen Werte an. Die wichtigsten Felder sind customerName, placementSelector und getSKU().

customerName

Angenommen, du betreibst einen Online-Shop mit dem customerName „flowershop“. Diesen Wert findest du in der Mazing.World unterhalb deiner Produkte.

customerName: 'flowershop'

getSKU()

Die SKU-Namen sind in der URL deines Shops enthalten, zum Beispiel: https://flowershop.com/product/xyz123abc

In diesem Fall ist die SKU der letzte Parameter in der URL. Daraus ergibt sich folgende mögliche Implementierung für getSKU():

 getSKU: () => {
      const url = window.location.href;
      const parts = url.split("/");
      const sku = parts.pop();
      return sku;
 }

Diese Methode nimmt den letzten URL-Parameter, getrennt durch /, und gibt ihn als SKU zurück.

placementSelector

Das letzte Feld, das du bestimmen musst, ist der placementSelector.

Nach einer DOM-Analyse deiner Shop-Elemente möchtest du die Mazing-Buttons unterhalb deiner Produktgalerie platzieren. Beim Überprüfen des Codes stellst du fest, dass die Produktgalerie eindeutig entweder durch die ID product-gallery oder die Klasse prod-gall definiert ist.

<html>
....
    <div id="product-gallery" class="prod-gall">
        <img src="img1">
        <img src="img1">
    </div>
...
</html>

Wir entscheiden uns dafür, die ID #product-gallery zu verwenden. placementSelector: '#product-gallery' or placementSelector: '.prod-gall'

Finaler Demo-Code

Jetzt kannst du dir den vollständig integrierten Code ansehen und sehen, wie er aussehen könnte:

<body>

...
    <script>
        mazing(
            {
                customerName: 'flowershop',
                buttonConfiguration: {
                    customStyle: `
                        .placeholder{}
                    ` ,
                    placementSelector: '#product-gallery',
                    threedBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in 3D'
                    },
                    arBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in AR'
                    }
                },
                 getSKU: () => {
                      const url = window.location.href;
                      const parts = url.split("/");
                      const sku = parts.pop();
                      return sku;
                 }
            }
        )
    
    </script>
</body>

API Details

threedBtn Hier kannst du festlegen, ob der 3D-Button angezeigt wird und einen individuellen Text definieren. Außerdem kannst du das mitgelieferte Icon aktivieren oder deaktivieren. arBtn Hier kannst du festlegen, ob der AR-Button angezeigt wird und einen individuellen Text definieren. Außerdem kannst du das mitgelieferte Icon aktivieren oder deaktivieren.

customStyle: Du kannst alle CSS-Styles und Klassen überschreiben oder erweitern, die in dieser Datei definiert sind: https://cdn.mazing.link/mzg-in.css

Beispiel, wie das aussehen könnte:

 buttonConfiguration: {
    customStyle: `

        .mazing-threed-btn-text {
            color: #167f77;
        }

        .mazing-ar-btn-text {
            color: #167f77;
        }

        .mazing-button-container {
            justify-content: center;
        }

        @media only screen and (min-width: 500px) {
            .mazing-button-container {
                justify-content: start !important;
            }
        }
` ,

placementSelector Kann entweder .class- oder #id-Selektoren enthalten.

Der Mazing-Button-Container wird diesem Element als Child-Element hinzugefügt. customerName Dein zugewiesener Customer Name in der Mazing.World. Du findest ihn unterhalb deiner Produkte in der Mazing.World.

getSKU Callback Hier kannst du festlegen, wie deine eindeutige Produkt-ID ermittelt wird.

Du kannst entweder den Google Tag Manager verwenden, um {{TAG_ID}} zurückzugeben, oder eigenen Custom Code schreiben, um beispielsweise deine Shop-URL zu parsen und daraus SKUs zu extrahieren.

getSKU: () => {

       const url = window.location.href;
       let product = 'none';

       const pattern = /\/(\d+)\//;
       const match = url.match(pattern);
       if(match){
           product = match[1];
       }
       return product;
}

Refresh SKU

Um den mazing.link so zu ändern, dass er auf ein anderes Projekt verweist, kannst du die Funktion mazingRefreshSKU() verwenden.

Erweitere dafür einfach dein Integrationsskript, wie im folgenden Beispiel gezeigt.

function attachVariantClickListeners(variantContainer) {

    // Find all variant option labels inside the container
    const variants= variantContainer.querySelectorAll('label');
    
    // Go through each variant option
    variants.forEach(label => {
        // When a variant is clicked...
        label.addEventListener('click', () => {
            // Wait a short moment, then update the 3D view with the new product
            setTimeout(() => mazingRefreshSKU(yourNewSKU, yourWorldCustomerNamer), 100)
        });
    });

}

VorherigeBadges Integration NächsteGallery Integration

Zuletzt aktualisiert vor 2 Monaten