Instalacja
Dołącz bibliotekę klienta Komerza przez CDN. Dodaj ten tag skryptu do swojego HTML:
<script src="https://cdn.komerza.com/komerza.min.js"></script>
Biblioteka jest dostępna globalnie jako globalThis.komerza po załadowaniu skryptu.
Korzyści CDN
- Nie wymaga kroku budowania - Działa z czystym HTML/CSS/JS
- Zawsze aktualne - Najnowsza wersja dostarczana automatycznie
- Szybkie ładowanie - Buforowane globalnie przez CDN
- Lekkie - Minimalny wpływ na czas ładowania strony
Inicjalizacja
Zainicjalizuj bibliotekę swoim ID sklepu przed użyciem jakichkolwiek innych funkcji:
komerza.init("twoje-id-sklepu");
Musisz wywołać init() przed użyciem jakiejkolwiek innej funkcji
komerza. Wszystkie inne funkcje zakończą się niepowodzeniem, jeśli
biblioteka nie została zainicjalizowana.
Znajdowanie ID swojego sklepu
ID Twojego sklepu jest dostępne w panelu Komerza. Jest to unikalny identyfikator Twojego sklepu, zazwyczaj w formacie UUID.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Mój Sklep</title>
<script src="https://cdn.komerza.com/komerza.min.js"></script>
</head>
<body>
<div id="store-name"></div>
<script>
// Zainicjalizuj z ID swojego sklepu
komerza.init("550e8400-e29b-41d4-a716-446655440000");
// Teraz możesz używać innych funkcji komerza
komerza.getStore().then((response) => {
if (response.success) {
document.getElementById("store-name").textContent =
response.data.name;
}
});
</script>
</body>
</html>
Kiedy inicjalizować
Wywołaj init() raz przy ładowaniu strony, przed użyciem jakichkolwiek innych metod komerza:
✅ Dobrze - Inicjalizuj przy ładowaniu strony:
<script>
// Inicjalizuj natychmiastowo komerza.init('twoje-id-sklepu'); // Następnie
używaj innych funkcji wyswietlProdukty();
</script>
❌ Źle - Używaj metod przed init:
<script>
// To się nie powiedzie - init nie został wywołany komerza.getStore(); //
Błąd! komerza.init('twoje-id-sklepu');
</script>
Integracja z frameworkami
Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.komerza.com/komerza.min.js"></script>
</head>
<body>
<script>
komerza.init("twoje-id-sklepu");
</script>
</body>
</html>
React
import { useEffect } from "react";
function App() {
useEffect(() => {
// Inicjalizuj przy montowaniu komponentu
if (globalThis.komerza) {
globalThis.komerza.init("twoje-id-sklepu");
}
}, []);
return <div>Mój Sklep</div>;
}
Vue
<script>
export default {
mounted() {
// Inicjalizuj przy montowaniu komponentu
if (globalThis.komerza) {
globalThis.komerza.init("twoje-id-sklepu");
}
},
};
</script>
Svelte
<script>
import { onMount } from 'svelte';
onMount(() => {
// Inicjalizuj przy montowaniu komponentu
if (globalThis.komerza) {
globalThis.komerza.init('twoje-id-sklepu');
}
});
</script>