Przejdź do treści

Podstawowe shortcode’y

Simple Bike Rental Pro udostępnia różne shortcode’y do umieszczania systemu rezerwacji na stronach i we wpisach WordPress.

Poniżej znajdziesz podstawowe shortcode’y oraz informacje o tym, gdzie i jak ich używać:

Formularz rezerwacji

[simpbire_bike_rental]

Wyświetla formularz rezerwacji na stronie, umożliwiając użytkownikom wynajem rowerów.

Możesz dodać ten shortcode na publicznej stronie, na przykład „Zarezerwuj rower”, lub utworzyć nową stronę w WordPress i wkleić shortcode w edytorze.

Formularz można umieścić w dowolnym miejscu; dostosowuje się do szerokości kontenera. W tym przykładzie umieściłem go na pasku bocznym o szerokości 400px. Oto podgląd formularza:

formularz na stronie

Po wstawieniu formularz automatycznie pojawi się na stronie i wyświetli:

  • Wybór rodzaju wynajmu — jednodniowy, godzinowy lub wielodniowy
  • Kalendarz wyboru daty (i godziny, jeśli jest potrzebna)
  • Rowery dostępne w wybranym okresie
  • Dostępne akcesoria (opcjonalne, trzeba je włączyć w ustawieniach; zobacz Akcesoria)
  • Pola imienia i nazwiska, adresu e-mail oraz numeru telefonu klienta

Uwaga: Wynajem wielodniowy i akcesoria są dostępne tylko w wersji Pro.

Wyśrodkowany układ formularza

Od wersji 1.5.2 podstawowy shortcode obsługuje również wyśrodkowany, bardziej nowoczesny układ formularza na stronie dzięki atrybutowi layout="centered".

[simpbire_bike_rental layout="centered"]

Ten wariant jest szczególnie przydatny dla:

  • Stron rezerwacji
  • stron docelowych
  • Układów na pełną szerokość
  • Nowoczesnych motywów z dużymi kontenerami

Wyśrodkowany układ poprawia rozmieszczenie kart rowerów i czytelność formularza. Oto przykład wyśrodkowanego układu:

formularz na stronie

Dostosowuje się również doskonale do urządzeń mobilnych i tabletów.

Shortcode: układ dwukolumnowy

Od wersji 1.4.1 dostępny jest nowy shortcode zaprojektowany w celu usprawnienia rezerwacji, szczególnie w witrynach zarządzających dużą liczbą rowerów.

Jak go używać

Aby zastosować nowy układ, wstaw shortcode na stronie:

[simpbire_bike_rental_split]

Struktura układu

Układ składa się z dwóch kolumn:

  • Lewa kolumna: Zawiera elementy formularza (rodzaj wynajmu, daty i dane użytkownika)
  • Prawa kolumna: Wyświetla siatkę dostępnych rowerów

Ten układ sprawia, że proces rezerwacji jest czytelniejszy i szybszy, a dostępne opcje są zawsze widoczne.

Zachowanie kart rowerów

Zachowanie kart zmienia się automatycznie zależnie od wybranych dat.

Bez wybranych dat — tryb katalogu. Rowery są wyświetlane jako katalog do przeglądania: kliknięcie karty otwiera stronę szczegółów roweru (tylko jeśli w ustawieniach roweru wprowadzono Detail URL).

Po wybraniu dat — tryb rezerwacji. Gdy użytkownik wybierze daty:

  • Siatka jest filtrowana tak, aby pokazać tylko rowery dostępne w wybranym terminie.
  • Karty nie prowadzą już do strony szczegółów; kliknięcie karty bezpośrednio wybiera rower. Dzięki temu układ automatycznie staje się narzędziem szybkiej rezerwacji.

Kiedy go używać

Ten układ jest szczególnie odpowiedni dla witryn z dużą liczbą rowerów, wypożyczalni z wieloma kategoriami lub modelami oraz osób, które chcą wyświetlić wszystkie opcje jednocześnie. Układ pozostaje responsywny i prawidłowo ustawia kolumny jedna pod drugą na urządzeniach mobilnych.

Uwaga: Możesz przetestować ten układ na stronie demonstracyjnej.

Rezerwacja oczekująca

[simpbire_pending_confirmation]

Ten shortcode jest używany tylko przy wyłączonych płatnościach online (Stripe). W takim przypadku potwierdzenie rezerwacji jest wysyłane e-mailem.

Shortcode wyświetla komunikat użytkownikom, którzy przesłali rezerwację, ale jeszcze nie potwierdzili jej przez kliknięcie odnośnika wysłanego na ich adres e-mail.

  • Utwórz stronę o nazwie „Oczekiwanie na potwierdzenie” (lub podobnej)
  • Dodaj shortcode i wybierz tę stronę w ustawieniach wtyczki jako Post-booking redirect page.

Po przesłaniu formularza rezerwacji użytkownicy zostaną przekierowani na tę stronę i zobaczą komunikat podobny do poniższego:

Dziękujemy za rezerwację! Wysłaliśmy wiadomość e-mail z odnośnikiem do jej potwierdzenia. Aby dokończyć wynajem, kliknij odnośnik w najbliższym czasie.

przekierowanie po rezerwacji

Ten domyślny komunikat sprawdza się w większości przypadków. Jeśli wolisz własny komunikat, możesz pominąć shortcode i po prostu dodać swoją treść na stronie.

Potwierdzenie rezerwacji

[simpbire_token_messages]

Ten shortcode również jest używany tylko przy wyłączonych płatnościach online. Zarządza komunikatami związanymi z weryfikacją tokenu potwierdzającego wysłanego e-mailem i je wyświetla.

  • Utwórz stronę zatytułowaną „Potwierdzenie rezerwacji” (lub podobnie).
  • Dodaj shortcode i skonfiguruj tę stronę w ustawieniach wtyczki w polu Confirmation Messages Page.

Gdy użytkownicy klikną odnośnik potwierdzający w e-mailu, trafią na tę stronę. Zależnie od wyniku pojawi się komunikat potwierdzający lub komunikat o błędzie.

pomyślne potwierdzenie tokenu

Siatka rowerów

[simpbire_bike_grid]

Shortcode '[simpbire_bike_grid]' wyświetla katalog wszystkich rowerów. Każda karta zawiera:

  • obraz roweru (klikalny, jeśli dostępna jest strona szczegółów)
  • nazwę
  • cenę za dzień
  • przycisk działania „Check availability”

Przycisk działania (i obraz) automatycznie prowadzą do odnośnika ustawionego w polu details_url roweru. Jeśli 'details_url' nie jest ustawione, przycisk jest nieaktywny, a obraz prowadzi tylko do pliku obrazu.

Liczba kolumn

Atrybut columns pozwala określić liczbę kolumn na komputerach:

[simpbire_bike_grid columns="4"]

siatka rowerów

Zalecane wartości:

  • 3 dla wygodnej siatki z większymi kartami
  • 4 dla bardziej zwartego układu, przydatnego przy dużej liczbie rowerów

Uwaga: Układ jest responsywny. Na mniejszych ekranach karty dostosowują się automatycznie (tablet: 2 w wierszu, telefon: 1 w wierszu).

Filtrowanie według typu roweru

Jeśli chcesz wyświetlić tylko konkretny typ roweru, użyj atrybutu 'type'. Trzeba wpisać dokładnie tę nazwę, która została użyta w polu „bicycle type”. Przykład:

[simpbire_bike_grid columns="4" type="e-bike"]

Wartości:

  • type="all" (domyślnie) wyświetla wszystkie rowery
  • type="..." wyświetla tylko rowery z taką wartością w polu „bicycle type”

Ważny wymóg: szerokość kontenera

Aby uzyskać estetyczną siatkę (szczególnie przy 3–4 kolumnach), należy umieścić shortcode w sekcji na pełną szerokość lub przynajmniej w odpowiednio szerokim kontenerze.

Wiele motywów WordPress, zwłaszcza domyślnych, stosuje układ z treścią pośrodku o ograniczonej szerokości. W takich przypadkach:

  • przy columns="4" karty mogą być zbyt wąskie
  • przyciski i tekst mogą zawijać się częściej, niż to konieczne

Praktyczna wskazówka: jeśli edytor lub kreator stron na to pozwala, użyj sekcji „Full width” (lub odpowiednika) na stronie zawierającej siatkę.

Wyświetlanie obrazów i object-fit

Domyślnie obrazy rowerów w siatce korzystają z następującego CSS:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Wartość cover sprawia, że obraz zawsze wypełnia dostępną przestrzeń, ale zależnie od proporcji zdjęć rowerów niektóre części obrazu mogą zostać przycięte.

Jeśli wolisz zawsze pokazywać cały rower, możesz zmienić object-fit na contain:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}

Przy użyciu contain wokół obrazu może pojawić się pusta przestrzeń. W razie potrzeby możesz określić własny kolor tła obszaru obrazu:

.sbr-bike-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  background-color: #ffffff !important;
}

Najlepsza opcja zależy od formatu i proporcji obrazów używanych w katalogu rowerów.

Powiązanie strony szczegółów

Aby prawidłowo korzystać ze ścieżki rezerwacji „katalog → strona pojedynczego roweru”, każdy rower musi być powiązany z własną stroną szczegółów.

To powiązanie jest zarządzane przez ustawienie bicycle details URL w konfiguracji roweru.

adres URL szczegółów roweru

Jak to działa

Shortcode siatki rowerów [simpbire_bike_grid] wyświetla listę rowerów z przyciskiem „Check availability”.

Gdy dla roweru ustawiony jest details URL, przycisk ten (i obraz) prowadzą do wskazanej strony.

Ta strona musi zawierać shortcode pojedynczego roweru: [simpbire_bike id = "X"]

X jest ID odpowiedniego roweru. ID znajdziesz w tabeli rowerów w panelu administracyjnym (kliknij w menu: Bicycles).

Wymagana konfiguracja

Aby ta ścieżka działała prawidłowo:

  • Utwórz osobną stronę dla roweru (lub każdego typu roweru).
  • Umieść shortcode[simpbire_bike id="X"] na tej stronie.
  • Otwórz ustawienia roweru w panelu administracyjnym.
  • W polu URL details ustaw adres URL nowo utworzonej strony.

Uwaga: Jeśli details URL nie jest ustawiony, przycisk „Check availability” będzie nieaktywny.

Strona pojedynczego roweru

[simpbire_bike id="4"]

Wstaw ten shortcode na stronie (lub we własnym typie wpisu — CPT), aby wyświetlić szczegóły roweru i formularz rezerwacji. ID roweru znajdziesz w kolumnie ID tabeli w „Bicycles”.

Atrybuty

  • id (wymagany) ID roweru, który ma być wyświetlany (jest to ID zapisane w tabeli rowerów wtyczki).
  • show_calendars (opcjonalny) Wyświetla miniaturowe kalendarze dostępności:
    • true, aby je wyświetlać
    • false, aby ich nie wyświetlać (domyślnie)
  • months (opcjonalny) Liczba miesięcy wyświetlanych w miniaturowych kalendarzach, gdy show_calendars="true"

Przykład:

[simpbire_bike id="4" show_calendars="true" months="3"]

shortcode pojedynczego roweru

Kiedy go używać

Ten shortcode jest idealny dla ścieżki „katalog → szczegóły”, na przykład:

  • użytkownik widzi siatkę rowerów [simpbire_bike_grid]
  • klika „Check availability”
  • trafia na stronę szczegółów pojedynczego roweru i formularz rezerwacji
  • jeśli miniaturowe kalendarze są włączone, również będą widoczne

Uwaga dotycząca miniaturowych kalendarzy

Miniaturowe kalendarze pomagają szybko zorientować się w dostępności w nadchodzących miesiącach. Nie zastępują końcowej kontroli przeprowadzanej przez formularz rezerwacji: dostępność jest zawsze sprawdzana przy wysyłaniu zgłoszenia.

Praktyczna wskazówka: osobna strona dla każdego roweru

Aby zapewnić przejrzystą i uporządkowaną obsługę, utwórz osobną stronę (lub CPT) dla każdego roweru i ustaw jej URL w polu details_url roweru. Dzięki temu użytkownik zostanie automatycznie przeniesiony z siatki na właściwą stronę.

Miniaturowy kalendarz dostępności

[simpbire_mini_calendar bike_id="1" months="3" legend="1"]

Ten shortcode wyświetla kompaktową siatkę miesięczną pokazującą dostępność konkretnego roweru. Działa we wpisach, na stronach i w obszarach widżetów.

miniaturowy kalendarz

Atrybuty

  • bike_id (wymagany) – ID docelowego roweru (widoczne na stronie z listą rowerów w panelu administracyjnym WordPress).
  • months (domyślnie: 1) – Liczba kolejnych miesięcy do wyświetlenia.
  • start (domyślnie: pierwszy dzień bieżącego miesiąca) – Miesiąc początkowy w formacie YYYY-MM-01 (na przykład 2025-10-01).
  • legend (domyślnie: 1) – Pokazuje legendę (1) lub ją ukrywa (0).

Na tej stronie znajdziesz przykłady użycia.

Uwagi

  • Wartość początkowa musi wskazywać pierwszy dzień wybranego miesiąca (YYYY-MM-01).
  • Jeśli nic się nie pojawia, sprawdź ponownie bike_id i upewnij się, że rower istnieje w katalogu.
  • Na jednej stronie możesz umieścić wiele kalendarzy dla różnych rowerów.