# 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);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mazingxr.gitbook.io/mazing-world/de/integration-types/badges-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.