Implementacja przycisku powiązanego z konkretnym planem cenowym pozwala na skrócenie ścieżki zakupowej gościa, kierując go bezpośrednio do wybranej oferty w systemie rezerwacyjnym.
Pozyskiwanie identyfikatorów z panelu NFHotel
- Pobieranie ID planu cenowego:
- Przejdź do sekcji Menu > Ustawienia > Cennik > Plany cenowe.
- Wybierz właściwy plan cenowy i kliknij przycisk Zarządzaj, a następnie Właściwości.
- Zidentyfikuj i skopiuj ID planu cenowego widoczne w lewym górnym rogu okna.
Pobieranie ID widgetu:
- Przejdź do sekcji Menu > Ustawienia > Booking Engine > Widgety.
- Zidentyfikuj właściwą konfigurację silnika na liście i skopiuj wartość z kolumny ID.
Wymagania techniczne i klasa CSS
- Wymagana klasa .nf-button:
- Zastosowanie klasy .nf-button w kodzie HTML przycisku jest bezwzględnie wymagane.
- Klasa ta służy jako techniczny wyzwalacz (trigger) dla skryptów systemowych NFHotel. Bez niej akcja otwarcia silnika rezerwacyjnego nie zostanie zainicjowana.
- Własne style:
- Dopuszczalne jest dodawanie własnych klas CSS obok klasy wymaganej w celu dostosowania wyglądu przycisku do stylistyki strony internetowej.
Atrybuty danych i parametryzacja
- data-settings-id: Należy wstawić pobrany identyfikator widgetu obiektu.
- data-offers: Należy wstawić identyfikator konkretnego planu cenowego lub pakietu.
- data-page="offers": Definiuje stronę docelową w silniku jako listę ofert. Jeśli chcesz otwierać kilka ofert w danym przycisku, należy dodać numery ID oddzielając przecinkiem, np.: "data-offers="2137,2115,6767".
- data-force_search="true": Wymusza automatyczne uruchomienie procesu wyszukiwania dostępności.
- data-date_from oraz data-date_to: Atrybuty opcjonalne. Należy je stosować wyłącznie dla ofert występujących w ściśle określonym terminie. Wymagany format daty to RRRR-MM-DD.
Przykład poprawnej implementacji kodu
Poniższy fragment kodu należy osadzić w strukturze strony, uzupełniając parametry o właściwe dane techniczne:
HTML<button type="button"class="nf-button (opcjonalnie własne klasy)"data-settings-id="(WSTAW ID WIDGETU)"data-offers="(WSTAW ID OFERTY)"data-force_search="true"data-page="offers"data-date_from="(RRRR-MM-DD)"data-date_to="(RRRR-MM-DD)">Rezerwuj teraz</button>