Installation & Einrichtung

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>

Getting Started

Client Library

Installation

CDN-Vorteile

Initialisierung

Deine Shop-ID finden

Beispiel

Wann initialisieren

Framework-Integration

Vanilla JavaScript

React

Vue

Svelte

​Installation

​CDN-Vorteile

​Initialisierung

​Deine Shop-ID finden

​Beispiel

​Wann initialisieren

​Framework-Integration

​Vanilla JavaScript

​React

​Vue

​Svelte

Installation

CDN-Vorteile

Initialisierung

Deine Shop-ID finden

Beispiel

Wann initialisieren

Framework-Integration

Vanilla JavaScript

React

Vue

Svelte