Saltar al contenido principal

​
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>