Instalación y configuración

Instalación

Incluye la biblioteca cliente de Komerza via CDN. Agrega esta etiqueta de script a tu HTML:

<script src="https://cdn.komerza.com/komerza.min.js"></script>

La biblioteca está disponible globalmente como globalThis.komerza después de que se cargue el script.

Beneficios del CDN

No requiere paso de compilación - Funciona con HTML/CSS/JS simple
Siempre actualizado - Última versión entregada automáticamente
Carga rápida - Almacenado en caché globalmente via CDN
Ligero - Impacto mínimo en el tiempo de carga de la página

Inicialización

Inicializa la biblioteca con el ID de tu tienda antes de usar otras funciones:

komerza.init("tu-id-de-tienda");

Debes llamar a init() antes de usar cualquier otra función de komerza. Todas las demás funciones fallarán si la biblioteca no ha sido inicializada.

Encontrar tu ID de tienda

El ID de tu tienda está disponible en tu panel de Komerza. Es un identificador único para tu tienda, generalmente en formato UUID.

Ejemplo

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

    <script>
      // Inicializar con tu ID de tienda
      komerza.init("550e8400-e29b-41d4-a716-446655440000");

      // Ahora puedes usar otras funciones de komerza
      komerza.getStore().then((response) => {
        if (response.success) {
          document.getElementById("store-name").textContent =
            response.data.name;
        }
      });
    </script>
  </body>
</html>

Cuándo inicializar

Llama a init() una vez cuando se carga tu página, antes de usar otros métodos de komerza: ✅ Bien - Inicializar al cargar la página:

<script>
  // Inicializar inmediatamente komerza.init('tu-id-de-tienda'); // Luego usar
  otras funciones mostrarProductos();
</script>

❌ Mal - Usar métodos antes de init:

<script>
  // Esto fallará - init no se ha llamado aún komerza.getStore(); // ¡Error!
  komerza.init('tu-id-de-tienda');
</script>

Integración con frameworks

JavaScript Vanilla

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

React

import { useEffect } from "react";

function App() {
  useEffect(() => {
    // Inicializar cuando el componente se monta
    if (globalThis.komerza) {
      globalThis.komerza.init("tu-id-de-tienda");
    }
  }, []);

  return <div>Mi Tienda</div>;
}

Vue

<script>
export default {
  mounted() {
    // Inicializar cuando el componente se monta
    if (globalThis.komerza) {
      globalThis.komerza.init("tu-id-de-tienda");
    }
  },
};
</script>

Svelte

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

  onMount(() => {
    // Inicializar cuando el componente se monta
    if (globalThis.komerza) {
      globalThis.komerza.init('tu-id-de-tienda');
    }
  });
</script>

Getting Started

Client Library

Instalación

Beneficios del CDN

Inicialización

Encontrar tu ID de tienda

Ejemplo

Cuándo inicializar

Integración con frameworks

JavaScript Vanilla

React

Vue

Svelte

​Instalación

​Beneficios del CDN

​Inicialización

​Encontrar tu ID de tienda

​Ejemplo

​Cuándo inicializar

​Integración con frameworks

​JavaScript Vanilla

​React

​Vue

​Svelte

Instalación

Beneficios del CDN

Inicialización

Encontrar tu ID de tienda

Ejemplo

Cuándo inicializar

Integración con frameworks

JavaScript Vanilla

React

Vue

Svelte