> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/de/integration-types/badges-integration.md).

# Badges Integration

Die **Mazing Badges Integration** ermöglicht es Online-Shops, automatisch ein **„3D verfügbar“-Badge** auf Produktlisten anzuzeigen, sobald für eine bestimmte **SKU** ein 3D-Modell vorhanden ist.

Die Integration nutzt die **Mazing API** und funktioniert **dynamisch**, ohne dass Änderungen am Backend erforderlich sind.

### **So funktioniert’s**

Das **Integrationsskript** durchsucht die Produktliste, extrahiert die **Produkt-SKUs**, fragt über die **Mazing API** verfügbare 3D-Projekte ab und fügt bei passenden Produkten ein kleines **Badge (SVG-Icon)** hinzu.

<figure><img src="/files/00VWXbh9BnuNHcrFWYC8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Du kannst das **Aussehen**, die **Position** und das **Verhalten** des Badges vollständig anpassen, sodass es perfekt zum Design deines Shops passt.
{% endhint %}

### **Integration einrichten**

Erstelle eine neue **Integrationsdatei** (falls noch nicht vorhanden) und implementiere deine **`initBadges`-Funktion**.

```javascript
const waitForMazingFunction = new Promise((resolve) => {
    const interval = 50;
    const checkInterval = setInterval(() => {
        if (typeof mazing === 'function') {
            clearInterval(checkInterval);
            resolve();
        }
    }, interval);
});

const initBadges = async () => {
    await waitForMazingFunction;

    // State Section
    const CUSTOMER_NAME = 'YOUR_MAZING_CUSTOMER_NAME'; // Todo

    const skus = 'YOUR_SKU_ARRAY_LIST'; // Todo

    const { results } = await mazingRunBadges(CUSTOMER_NAME, skus);

}

initBadges();


```

{% hint style="info" %}
Wenn du bereits eine **Mazing-Integration** implementiert hast und dort **`waitForMazingFunction`** verwendest, musst du diese Funktion **kein zweites Mal hinzufügen**.
{% endhint %}

Wenn alles korrekt eingerichtet ist, erhältst du als Ergebnis ein **Array** mit allen Einträgen, die in der **Mazing World** verfügbar sind.

<figure><img src="/files/20mJGhJZW2WeglHKiN3Z" alt=""><figcaption></figcaption></figure>

**Das war’s!**

Du kannst jetzt damit beginnen, deine eigene **`addBadges`-Methode** zu implementieren. Iteriere durch die Ergebnisse und verwende deine **`addBadges`-Funktion**, um die Badges zu deinen Produkten hinzuzufügen.

**Beispiel, wie das aussehen könnte:**

```javascript
const initBadges = async () => {
    await waitForMazingFunction;

    // State Section
    const CUSTOMER_NAME = 'YOUR_MAZING_CUSTOMER_NAME'; // Todo

    const skus = 'YOUR_SKU_ARRAY_LIST'; // Todo

    const { results } = await mazingRunBadges(CUSTOMER_NAME, skus);
    
    const bySku = new Map();
    
    for (const result of results) {
        if (!result.available) continue; // If the product is not available, skip it

        const entry = bySku.get(result.sku);

        if (!entry) continue;
        // Call the addBadges method for each available entry
        entry.elements.forEach(el => add3DBadgeToItem(el));
    }

}
```

**Beispiel für die `addBadge`-Methode:**

```javascript
const add3DBadgeToItem = (itemEl) => {
    if (!itemEl) {
        return;
    }

    const pos = itemEl.querySelector('.position-relative') || itemEl;
    const badges = document.createElement('div');
    badges.style.position = 'absolute';
    badges.style.right = '0';
    badges.style.bottom = '0';
    badges.style.zIndex = '1';

    pos.prepend(badges);

    if (itemEl.querySelector('[data-badge-mazing="true"]')) {
        return;
    }

    const badge = document.createElement('div');

    const badgeImg = document.createElement('img');
    badgeImg.src = 'https://cdn.mazing.link/assets/svg/3D.svg';
    badgeImg.style.width = '40px';
    badgeImg.style.filter = 'invert(13%) sepia(97%) saturate(7488%) hue-rotate(-1deg) brightness(92%) contrast(112%)';

    badge.setAttribute('data-badge-mazing', 'true');
    badges.appendChild(badgeImg);
    badges.appendChild(badge);
}
```