Zum Hauptinhalt springen

​
Installation

Binde die Komerza Client-Bibliothek via CDN ein. Füge dieses Script-Tag in dein HTML ein: 
<script src="https://cdn.komerza.com/komerza.min.js"></script>
Die Bibliothek ist nach dem Laden des Skripts global als globalThis.komerza verfügbar.

​
CDN-Vorteile

  • Kein Build-Schritt erforderlich - Funktioniert mit einfachem HTML/CSS/JS
  • Immer aktuell - Neueste Version wird automatisch ausgeliefert
  • Schnelles Laden - Global via CDN gecacht
  • Leichtgewichtig - Minimaler Einfluss auf die Seitenladezeit

​
Initialisierung

Initialisiere die Bibliothek mit deiner Shop-ID, bevor du andere Funktionen verwendest: 
komerza.init("deine-shop-id");
Du musst init() aufrufen, bevor du andere komerza-Funktionen verwendest. Alle anderen Funktionen schlagen fehl, wenn die Bibliothek nicht initialisiert wurde.

​
Deine Shop-ID finden

Deine Shop-ID findest du in deinem Komerza-Dashboard. Es ist ein eindeutiger Bezeichner für deinen Shop, typischerweise im UUID-Format.

​
Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Mein Shop</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
  </head>
  <body>
    <div id="store-name"></div>

    <script>
      // Mit deiner Shop-ID initialisieren
      komerza.init("550e8400-e29b-41d4-a716-446655440000");

      // Jetzt kannst du andere komerza-Funktionen nutzen
      komerza.getStore().then((response) => {
        if (response.success) {
          document.getElementById("store-name").textContent =
            response.data.name;
        }
      });
    </script>
  </body>
</html>

​
Wann initialisieren

Rufe init() einmal beim Laden deiner Seite auf, bevor du andere komerza-Methoden verwendest: ✅ Gut - Beim Seitenaufruf initialisieren: 
<script>
  // Sofort initialisieren komerza.init('deine-shop-id'); // Dann andere
  Funktionen verwenden produkteAnzeigen();
</script>
❌ Schlecht - Methoden vor init verwenden: 
<script>
  // Das schlägt fehl - init noch nicht aufgerufen komerza.getStore(); //
  Fehler! komerza.init('deine-shop-id');
</script>

​
Framework-Integration

​
Vanilla JavaScript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
  </head>
  <body>
    <script>
      komerza.init("deine-shop-id");
    </script>
  </body>
</html>

​
React

import { useEffect } from "react";

function App() {
  useEffect(() => {
    // Beim Mounten der Komponente initialisieren
    if (globalThis.komerza) {
      globalThis.komerza.init("deine-shop-id");
    }
  }, []);

  return <div>Mein Shop</div>;
}

​
Vue

<script>
export default {
  mounted() {
    // Beim Mounten der Komponente initialisieren
    if (globalThis.komerza) {
      globalThis.komerza.init("deine-shop-id");
    }
  },
};
</script>

​
Svelte

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    // Beim Mounten der Komponente initialisieren
    if (globalThis.komerza) {
      globalThis.komerza.init('deine-shop-id');
    }
  });
</script>