Instalacja z NPM

W przypadku używania bundlera i/lub frameworka, można używać komponentu PaczkoAPI z modułu NPM.

Instalacja modułu

Na początek instalujemy moduł:

npm

npm install paczkoapi

yarn

yarn add paczkoapi

pnpm

pnpm install paczkoapi

Zaleca się regularne aktualizowanie paczki,

Inicjalizacja komponentu

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

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

W skrypcie inicjalizujemy komponent PaczkoAPI:

import { createSelector } from 'paczkoapi/lazy';

// 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
});

Lazy loading wymaga zbudowania aplikacji przy użyciu bundlera wspierającego code splitting, tj. Vite, Rollup, Webpack. Można też użyć bez lazy loadingu:

import { createSelector } from 'paczkoapi';

Wszystkie opcje konfiguracji komponentu opisane są na tej stronie.

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.