Instalacja skryptu

Najprostszym sposobem instalacji kompatybilnym z każdym frameworkiem jest zainstalowanie skryptu PaczkoAPI bezpośrednio na stronie.

Dodanie skryptów na stronę

Aby zainstalować komponent PaczkoAPI na stronie należy dodać następujące skrypty (najlepiej na końcu sekcji body):

<script type="module" src="https://paczkoapi.pl/lib/index.lazy.mjs"></script>
<script nomodule src="https://paczkoapi.pl/lib/index.js"></script>

Pierwszy z nich jest modułem ESM - bardzo lekkim wrapperem na właściwy komponent z wbudowanym lazy loadingiem. Drugi zapewnia działanie dla starszych przeglądarek nieobsługujących modułów ES.

Bez lazy loadingu

Możliwe (choć niezalecane) załadowanie skryptów bez wbudowanego lazy loadingu.

<script type="module" src="https://paczkoapi.pl/lib/index.mjs"></script>
<script nomodule src="https://paczkoapi.pl/lib/index.js"></script>

Cały kod zostanie wtedy załadowany od razu, a nie w momencie inicjalizacji komponentu.

Inicjalizacja komponentu

Dodajemy w kodzie HTML element w miejscu, gdzie chcemy zainicjalizować selektor punktów:

<div id="selector"></div>

W skrypcie inicjalizujemy komponent PaczkoAPI:

// Tworzymy komponent selektora
const selector = paczkoapi.createSelector('#selector', {
    providers: ['inpost', 'dhl'],
    // Obsługa zdarzenia wybrania punktu odbioru
    onPointSelected: point => {
        console.log(point);
    },
    // ... pozostałe opcje
});

Wszystkie opcje konfiguracji komponentu opisane są na tej stronie.

Ponieważ paczkoapi jest zbudowane jako ES module, cały kod powinien być owrappowany w event listener na zdarzenie DOMContentLoaded:

window.addEventListener('DOMContentLoaded', async () => {
    /// ... tutaj cały kod
});

Ustawienie adresu użytkownika

W celu znalezienia najbliższych punktów odbioru musimy przekazać do komponentu adres użytkownika. Najczęściej odbywać się to będzie przy przejściu z kroku adresu do kroku wyboru formy dostawy.

Zakładając, że mamy formularz z adresem, możemy obsłużyć go następująco:

const form = document.querySelector('form');

form.addEventListener('submit', async e => {
    e.preventDefault();

    await selector.setAddress({
        city: form.city.value,
        postalCode: form.postalCode.value,
        street: form.address.value,
    });

    // metoda setAddress jest asynchroniczna
    // możemy poczekać tutaj na załadowanie najbliższych punktów
});

Przykład na żywo

Poniżej znajduje się link do interaktywnego przykładu użycia komponentu PaczkoAPI. Pozwala na żywo eksperymentować z jego działaniem:

Uwaga

W przykładzie nie działa poprawnie mapa punktów DHL. Jest to związane ze specyfiką działania środowiska StackBlitz i nie występuje w praktyce.