Każda opcja jest opcjonalna. Poniższe wartości to domyślne ustawienia stosowane przez klienta, gdy pominiesz daną opcję.
const entase = new Entase({
pk: null,
locale: 'auto',
checkoutMode: 'auto',
collectConsent: true,
backdrop: true,
backdropColor: '#000000',
tprm: {},
pane: { width: 800, height: '100%' },
popup: { width: 800, height: 1000 }
});Opcje
| Nazwa | Typ | Wartość domyślna | Opis |
|---|---|---|---|
pk | string | null | Twój klucz publiczny. Klient wysyła go podczas sprawdzania, czy Twoja domena może korzystać z osadzonego procesu zakupu. Bez niego każdy proces zakupu otwiera się jako wyskakujące okno. |
locale | string | 'auto' | Język procesu zakupu. 'auto' odczytuje atrybut lang elementu <html>. |
checkoutMode | string | 'auto' | 'auto', 'pane' lub 'popup'. Zobacz Tryby procesu zakupu. Nierozpoznana wartość powoduje powrót do 'auto'. |
collectConsent | boolean | true | Określa, czy proces zakupu prosi użytkownika o zaakceptowanie informacji o warunkach. Po zaakceptowaniu odpowiedź jest zapamiętywana w pliku cookie, a ten krok jest pomijany. |
backdrop | boolean | true | Określa, czy przyciemniać stronę za procesem zakupu. Wartość false wyłącza również blokadę przewijania strony. |
backdropColor | string | '#000000' | Kolor przyciemnionego obszaru jako wartość koloru CSS. |
tprm | object | {} | Parametry śledzenia dodawane do adresu URL procesu zakupu jako parametry zapytania. Zobacz Śledzenie i zgoda. |
pane | object | { width: 800, height: '100%' } | Rozmiar osadzonego panelu. Ignorowane w trybie wyskakującego okna. |
popup | object | { width: 800, height: 1000 } | Rozmiar wyskakującego okna w pikselach. Ignorowane w trybie panelu. |
Rozmiar panelu i wyskakującego okna
pane.width przyjmuje liczbę (piksele) lub dowolną długość CSS – '720px', '50%', '40vw' albo wyrażenie calc(). Zwykła liczba jest traktowana jako piksele.
Na komputerach stacjonarnych szerokość panelu jest ograniczona do tej wartości, a na urządzeniach mobilnych zajmuje on pełną szerokość; wtedy stosowana jest wartość pane.height. Przełączenie między tymi dwoma wariantami następuje, gdy viewport jest węższy niż skonfigurowana szerokość; gdy szerokość jest podana w jednostce względnej, przełączenie następuje przy 800 px.
popup.width i popup.height przyjmują wyłącznie wartości liczbowe w pikselach, a okno jest wyśrodkowane na ekranie użytkownika. Jeśli ekran nie jest wystarczająco wysoki dla żądanej wysokości, okno zostanie zmniejszone, aby się zmieściło.
Tło
Tło jest przyciemniane mocniej za wyskakującym oknem niż za panelem, ponieważ wyskakujące okno wymaga, aby znajdująca się pod nim strona wyglądała na nieaktywną. Ustaw backdrop: false, aby całkowicie usunąć przyciemnienie – spowoduje to również, że stronę będzie można przewijać za procesem zakupu.
backdropColor jest stosowane bez zmian, więc może być dowolnym prawidłowym kolorem CSS. Użyj go, aby dopasować wygląd do ciemnej strony lub strony z identyfikacją marki, a nie aby ukryć tło; w tym celu właściwą opcją jest backdrop: false.
Nadpisywanie ustawień dla poszczególnych rezerwacji
checkoutMode, collectConsent, backdrop, backdropColor, pane i popup można nadpisać dla jednej rezerwacji, przekazując je do book(). Wartość na poziomie instancji pozostaje niezmieniona dla kolejnych wywołań:
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
// Ta jedna rezerwacja otwiera się szerzej, bez przyciemnienia.
entase.book('EVENT_ID', {
pane: { width: '60vw' },
backdrop: false
});pk i tprm nie są opcjami dla poszczególnych rezerwacji – pk identyfikuje konto dla całej strony, a parametry śledzenia zmienia się za pomocą setTracking(), gdy muszą się różnić.