Aplikacje no-code z Bubble: Sekcja bookings - host

0:00Witaj w kolejnej lekcji, której tym razem

0:02zajmiemy się przygotowaniem sekcji Bookingu.

0:04Ja już oczywiście przygotowałem

0:06odpowiednie elementy pomiędzy lekcjami, a teraz chciałbym je tutaj z Tobą omówić.

0:10A więc przełączamy się do widoku Full HD.

0:13Jak widzisz, w tym przypadku starałem się

0:15uprościć sobie życie i wykorzystałem Isabell element o nazwie Gestapo Kings.

0:20W tym przypadku jedyna poważna zmiana to dodanie tutaj pola typu search box.

0:26Za jego pomocą w przyszłości użytkownik

0:28będzie mógł odpowiednio sobie filtrować te listingu.

0:32Natomiast kolejnym bardzo ważnym elementem, o które tutaj musiałem zadbać

0:36był fakt, że w poprzedniej lekcji, kiedy tworzyliśmy sekcję dla konta gościa,

0:41zapomnieliśmy przygotować odpowiednią stronę prowadzącą na poszczególny booking.

0:47A więc teraz ją utworzyłem i po kliknięciu właśnie w taki element

0:51jak widzisz tutaj pojawia nam się ikonka rączki, a więc mamy dodane jakiś workflow.

0:55Zerknijmy na nie.

0:56W moim przypadku takie workflow zostało dodane do grupy Booking Card Group.

1:02Oczywiście tą grupę również moglibyśmy

1:03zamienić na element, do czego oczywiście jak najbardziej zachęcam.

1:07Ja natomiast postanowiłem pozostawić ją w

1:09takiej formie i jedynie dodać tutaj odpowiednie workflow.

1:14Na samo workflow prezentuje się w ten

1:16sposób, że kierujemy użytkownika na nową stronę o nazwie Booking.

1:21Otwieramy ją w nowej zakładce i dodatkowo przekazujemy tam znany Ci już parametr L.

1:27Do którego znów przekazujemy OZ Listing

1:30Display, czyli dokładnie to samo, co robiliśmy już wcześniej strony listingu.

1:35Natomiast jak prezentuje się taka gotowa strona?

1:38Otóż jeżeli kliknę tutaj.

1:41Otwiera mi się strona takiego pojedynczego bookingu.

1:45Tak, wiem, że będzie to oznaczało tylko

1:47tyle, że będziesz musiał wdrożyć tutaj kolejną stronę.

1:50Natomiast uwierz mi, że jest to ostatnia

1:52strona, jaką będziemy przygotowywać w całym tym sprincie.

1:56Dodatkowo, jak widzisz, mamy tutaj elementy zaczerpnięte z innych stron.

2:00Tak więc myślę, że bezproblemowo sobie z tym zadaniem poradzisz.

2:03A ja chciałbym pokrótce omówić co tutaj w zasadzie zrobiłem.

2:07W pierwszej kolejności zadbałem o nav bar oraz o footer.

2:13Całą stronę stworzyłem planując ją ze

2:15strony Sarge i zauważyłem, że na stronie Serge jeżeli jedziemy tam do Pottera

2:20mieliśmy ten container ograniczony do 1200 pikseli.

2:25Dlatego też ja postanowiłem dla strony

2:27bookingu oraz strony Serge usunąć oczywiście to ograniczenie.

2:32Przejdźmy może do edytora.

2:34Otwórzmy footer.

2:38Zaznaczmy tutaj cały ten container.

2:40Jak widzisz dodałem tutaj.

2:43Odpowiedni conditions,

2:45który odnosi się do Current Page name i w sytuacji kiedy nazwa takiej strony to

2:50search lub booking, to ustawiamy maksymalną szerokość na 1200 pikseli.

2:55I dokładnie to samo robimy dla naszego.

2:58A tam jeszcze dodatkowo zadbałem również o to, aby ta grupa z linkiem.

3:05Teraz zerknijmy jak ona się tutaj nazywa.

3:10Jest to grupa na w miarę links group z tym linkiem.

3:12Become a host

3:13pojawia się tylko i wyłącznie wtedy, kiedy jesteśmy na stronie index owej.

3:17A więc ten dotychczasowy Condition all zmieniłem właśnie na taki.

3:21Odnoszę się do Page Name znów

3:23i tylko do strony index i wtedy właśnie pokazuje taki element.

3:27A w każdej innej sytuacji taka grupa jest po prostu domyślnie ukryta.

3:30Oczywiście zaznaczamy tutaj collapse hidden.

3:34A jak wygląda natomiast strona samego bookingu?

3:39Otwórzmy ją sobie.

3:40Tak jak mówiłem, skopiowałem ją ze strony Sarge.

3:43Pozbyłem się niepotrzebnych elementów.

3:46Ustawiłem to w ten sposób, że zarówno lewa jak i prawa grupa mają równo po 50%.

3:52Tutaj oczywiście damage wrapper ustawiamy sobie.

3:56Odpowiedni time content

3:59przekazujemy tutaj data source naszego parametru l z paska adresu URL.

4:04I potem oczywiście przekazujemy to dalej.

4:06Tu mamy grupę wyciętą bezpośrednio ze strony listingu.

4:10Podobnie z resztą.

4:11Ten obrazek.

4:13Tutaj musisz zadbać, żeby pousuwać

4:15wszelkie jakieś conditions, ale jeżeli one są dodawane pamiętaj o tym.

4:19Jeżeli kopiujesz i wklejasz elementy z różnych stron.

4:22Tu mamy standardowe grupy, które w większości są statyczne.

4:26Oczywiście tutaj poza tymi dwoma.

4:28Gdzie widzisz takie odwołanie do S listing

4:32Tutaj znów w zasadzie kopiowałem to co mieliśmy na stronie listingu.

4:37Dodałem tylko statyczne ikonki, które możesz tutaj sobie teraz sprawdzić.

4:42Możesz wykorzystać te, z których ja korzystam i dodać nowe.

4:45Jeżeli uważasz, że moje nie do końca pasują do tych tekstów.

4:49To oczywiście pozostawiam Ci całkowicie wolną rękę.

4:52W tym miejscu z kolei wklejamy stałe teksty.

4:55W przyszłości będziemy musieli oczywiście

4:57zadbać o to, aby nasz host mógł takiego listingu dodać odpowiednie zasady, a także

5:02informacje o tym, jak do takiego lokalu odpowiednio trafić po jego zablokowaniu.

5:07Na samym dole mamy kolejną prostą grupę.

5:11Standardową informacją.

5:12Tutaj znów jest to wpisane na sztywno

5:15i guzikiem, który będzie kierował użytkownika do dashboard u.

5:18Moim przypadku jak widzisz tutaj chwilowo nic nie robi.

5:20Jest on tylko za modelowane.

5:22A więc tak prezentuje się cała strona bookingu.

5:25Jestem absolutnie pewien, że nie powinna Ci ona zająć więcej niż 15 minut.

5:29Polega to wszystko na tym, aby odpowiednio kopiować i wklejać właściwe elementy i

5:34dostosować sobie już istniejącą stronę do naszych nowych wymagań.

5:38A więc możemy ją sobie tutaj zamknąć.

5:41I skoro sekcje Booking dla naszego konta host w dashboard mamy już gotową, to ja

5:46chciałbym Ci podziękować za uwagę i widzimy się już w kolejnej lekcji.