# Gallery Integration
### **Finales Ergebnis 🎉**
Vollständig integrierter **Viewer mit verschiedenen Varianten**
Completly integrated Viewer with different Variants
## **Integrationsbeispiel**
### **Schritt 1: Mazing-Skript in das ``-Element einfügen**
Um den **Mazing Viewer** zu aktivieren, füge das folgende Skript in den **``-Bereich** deiner HTML-Datei ein:
```
```
**Hinweis:** Das `defer`-Attribut sorgt dafür, dass das Skript erst nach dem Parsen des HTML-Dokuments geladen wird und verbessert so die Performance.
### **Schritt 2: Eigenes Skript am Ende des `` hinzufügen**
Erstelle ein neues Skript am Ende des **``-Elements**:
```
...
```
{% hint style="info" %}
**Warum am Ende?**\
Damit wird sichergestellt, dass der gesamte HTML-Inhalt geladen ist, bevor dein Skript ausgeführt wird.
{% endhint %}
### **Schritt 3: Skript-Logik einfügen**
```
// Wait for the mazingProjectAvailable function to become available
// Ensures the header script is fully loaded
const waitForMazingFunction = new Promise((resolve) => {
const interval = 50; // Check every 50ms
const checkInterval = setInterval(() => {
if (typeof mazingProjectAvailable === 'function') {
clearInterval(checkInterval);
resolve();
}
}, interval);
});
// Main script logic
const initializeScript = async () => {
// Wait for Mazing to be ready
await waitForMazingFunction;
console.log('mazing configuration is active :)');
// TODO: Add your custom logic here
}
// Start the initialization
initializeScript();
```
**Was passiert hier?**
* Wartet, bis **`mazingProjectAvailable`** geladen ist
* Gibt eine Bestätigung im Console-Log aus
{% hint style="info" %}
Tipp: Prüfe die Konsole, um sicherzugehen, dass alles funktioniert.
{% endhint %}
### **Schritt 4: SKU abrufen & iFrame erstellen**
```
const initializeScript = async () => {
await waitForMazingFunction;
// Get the iFrame source by calling mazingProjectAvailable
const iframeSrc = await mazingProjectAvailable({
customerName: 'YourMazingCustomer',
getSKU: () => {
// Extract SKU from the current product URL
const url = window.location.href;
const match = url.match(/\/products\/([^?]+)/);
const currentProduct = match ? match[1] : null;
return currentProduct;
}
});
// TODO: Use iframeSrc to create and append the iFrame
}
initializeScript();
```
### **Was passiert hier?**
#### **SKU abrufen**
Die Funktion **`getSKU`** extrahiert die **SKU** aus der Produkt-URL mithilfe eines **regulären Ausdrucks**.
Beispiel:\
Eine URL wie `https://example.com/products/your-product` gibt **`your-product`** als SKU zurück.
***
#### **iFrame-Quelle generieren**
Die Funktion **`mazingProjectAvailable`** verwendet die SKU, um die **`iframeSrc`** zu erstellen, die benötigt wird, um den **Mazing Viewer** anzuzeigen.
***
#### **iFrame-Quelle verwenden**
Nachdem die **`iframeSrc`** generiert wurde, kannst du sie verwenden, um den Viewer auf deiner Website einzubetten.
Sobald du die **`iframeSrc`** hast, kannst du sie nach Bedarf anpassen und in deine Website einfügen.\
Weitere Details findest du in der **Script Integration Dokumentation**.
### **Schritt 5: iFrame erstellen**
```
const initializeScript = async () => {
await waitForMazingFunction;
// Retrieve the iframe source using mazingProjectAvailable
const iframeSrc = await mazingProjectAvailable({
customerName: 'YourMazingCustomer',
getSKU: () => {
const url = window.location.href;
const match = url.match(/\/products\/([^?]+)/);
const currentProduct = match ? match[1] : null;
return currentProduct;
}
});
let iframeElement;
// Create the iframe element
iframeElement = document.createElement('iframe');
iframeElement.style.cssText = "border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; background: white; display: none; padding-left: 22px;"; // max-height: 600px;
// HERE WE USE THE IFRAMESRC !
iframeElement.src = iframeSrc;
iframeElement.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; camera *; xr-spatial-tracking;";
iframeElement.allowFullscreen = true;
iframeElement.setAttribute('allowusermedia', '');
iframeElement.id = 'mazing-iframe';
/*
* Now you can use this iframe and add it to the desired spot. Let's say you want
* to put the iframe in a div in your shop with an id of 'gallery-div1' :
*/
// Add the iframe to the desired container
const iframeContainer = document.getElementById('gallery-div1');
iframeContainer.appendChild(iframe);
}
initializeScript();
```
{% hint style="info" %}
**Was ist ein `