One-page checkout

Coraz częściej cały proces składania zamówienia znajduje się na jednej stronie i nie ma wyróżnionych kroków, np. adresu czy formy dostawy.

W takim przypadku nie będzie jednego zdarzenia, które wywoła zapisanie adresu (np. po naciśnięciu przycisku). Zamiast tego można ustawiać adres na każdą zmianę w formularzu adresu:

// Tworzymy komponent selektora
const selector = paczkoapi.createSelector('#selector', {
    /// ... opcje
});

// Obsługa zmiany miasta
const cityInput = document.querySelector('input[name="city"]');
cityInput.addEventListener('change', () => {
    selector.setCity(cityInput.value);
});

// Obsługa zmiany kodu pocztowego
const postalCodeInput = document.querySelector('input[name="postalCode"]');
postalCodeInput.addEventListener('change', () => {
    selector.setPostalCode(postalCodeInput.value);
});

// Obsługa zmiany ulicy
const streetInput = document.querySelector('input[name="street"]');
streetInput.addEventListener('change', () => {
    selector.setStreet(streetInput.value);
});

Zapytanie do API o najbliższe punkty zostanie wysłane dopiero, kiedy wszystkie 3 pola zostaną uzupełnione i nie częściej niż raz na sekundę (można dostosować przy pomocy parametru debounce - zobacz tutaj).

Przykład na żywo

Zobacz poniższy przykład.