Aplikacje no-code z Bubble: Strona listingu

0:00W kolejnej lekcji.

0:01Ale zanim przejdziemy do działania, chciałbym jeszcze na chwilę wrócić do

0:04Popup u, który zbudowaliśmy w poprzedniej lekcji.

0:08A więc otwórzmy go na chwilę.

0:11Jak widzisz mamy tutaj ten popup.

0:13Chciałbym go jeszcze raz bardzo króciutko omówić.

0:15Przede wszystkim zastosowałem dla całego pop upu układ Align to parent.

0:20Ponieważ chciałem, żeby zarówno ta sekcja

0:22header jak i ta sekcja footer zawsze była w tym samym miejscu, czyli ta

0:26u góry, ta na samym dole tego elementu I dodatkowo, aby obie te sekcje,

0:31a w zasadzie oba te elementy przykrywa nam tutaj ten content.

0:34Dodatkowo dla całego foldera jak pamiętasz ustawialiśmy stałą wysokość równą 760

0:39pikseli, natomiast tutaj dla tej grupy tej grupy content, która zawiera całą tą

0:43właśnie treść, ustawiliśmy 640 pikseli również stałej wysokości.

0:49Nie jest to wartość przypadkowa, ponieważ zarówno header jak i nasz footer

0:54mają tutaj oczywiście po 60 pikseli, a więc 760 120 daje nam właśnie 640 pikseli.

1:03Natomiast jeżeli wrócimy tutaj na chwilę do edytora, tak jak pamiętasz dla całej

1:07tej grupy, ustawiliśmy tutaj tą opcję a'la Vertical Scroll Link.

1:12Ta grupa ma stałą wysokość 640 pikseli, natomiast ta treść w środku jest

1:16oczywiście dużo większa, a za pomocą właśnie tego check boxa mówimy bubble owi.

1:21Wyświetlam grupę o stałej wysokości, ale

1:24jeżeli masz tutaj w środku za dużo treści, to po prostu dodaj score Ball, dzięki

1:28czemu użytkownik będzie mógł się tutaj przeskalować.

1:31Jak widzisz ten skrót, ale nie jest dodawany do całego popup u, a jedynie do

1:34tej grupy z tą treścią, która nam się po prostu tutaj nie mieści.

1:38Dzięki temu uzyskujemy taki bardzo fajny

1:40efekt, który zresztą ja lubię bardzo stosować w przypadku pop upów.

1:44Kolejna kwestia, na którą jeszcze chciałbym tutaj zwrócić Twoją uwagę to ten

1:47problem tutaj z tą ikonką, która powinna zamykać nasz popup.

1:50Wróćmy do edytora.

1:52Jak pamiętasz.

1:53Dodaliśmy tutaj odpowiednie workflow.

1:57Która mówi nam, że po kliknięciu w tą

1:59ikonkę powinniśmy zamknąć nasz pop up, a w zasadzie ukryć go tutaj.

2:03Czasami jeżeli dodajesz różne elementy, zwłaszcza z pluginów.

2:07Tak jak wspominałem w poprzedniej lekcji, pojawiają się tutaj różne triggery.

2:11Ja ostatnio szukałem właśnie tego, który

2:13jest tutaj w sekcji Elements a i Config script.

2:17Natomiast niezależnie od tego czy wybiorę

2:18tą opcję i potem wskażę właśnie odpowiednią ikonkę, czy zrobię to w taki

2:23sposób jak zrobiłem wcześniej, efekt był ten sam.

2:27Dlaczego więc nasz popup się nie zamyka?

2:30Otóż jeżeli wrócimy do designera, a w

2:32zasadzie do podglądu, to zastanówmy się co to może być nie tak?

2:38Odśwież My już teraz świetny pop up.

2:41Jak pamiętasz, w jednej z poprzednich

2:42lekcji, kiedy rozmawialiśmy, Mark Frost, mówiłem, że w momencie, kiedy dodajemy

2:46jakąś akcję do elementu label, ikonka zmienia się na ikonkę rączki.

2:51Czyli na razie mamy tutaj tylko zwykłą

2:52ikonkę strzałki, a powinna nam się w tym momencie pojawić ikonka rączki,

2:56ponieważ dodaliśmy jakąś akcję do elementu.

2:59I to jest właśnie wskazówka, która podsunęła mi tutaj rozwiązanie.

3:02Babel Będziesz często trafiał na takie perełki, na takie drobne zagwozdki i

3:06trzeba się po prostu chwilę zastanowić, żeby znaleźć odpowiednie rozwiązanie.

3:10Tutaj powinniśmy mieć akcję i rzeczywiście ją dodaliśmy.

3:13Natomiast Babel zachowuje się tak, jakby ta akcja w ogóle tutaj nie została dodana,

3:17a w zasadzie tak, jakbyśmy nie mogli kliknąć w ten element.

3:19Wróćmy więc do edytora.

3:22Przejdźmy do zakładki Design.

3:25Tutaj do tej ikonki.

3:27Jak się okazuje rzeczywiście tak jest,

3:28ponieważ nie zaznaczyliśmy tej opcji i klikamy.

3:31Dopiero jeżeli kliknę tutaj.

3:34Taka ikonka jest normalnie idealna i będzie mogła nam uruchamiać nasz workflow.

3:39Przejdźmy teraz do podglądu.

3:40Odświeżamy.

3:43Otwórzmy nasz popup.

3:45I teraz dopiero jak widzisz, kiedy dajesz nam na ikonkę.

3:49Tutaj tego zamknięcia.

3:50Ikonka kursora, ikonka kursora myszy mi się zmienia na taką właśnie rączkę.

3:54I co oznacza, że teraz właśnie ta akcja może zostać wykonana klikając tutaj.

3:58Nasz popup zostanie zamknięty.

4:00A więc rozwiązaliśmy pobrane z poprzedniej

4:01lekcji i teraz możemy przejść do dalszego działania.

4:05Przejdźmy tutaj do strony listing, którą ja już zacząłem tutaj po części budować.

4:14Jak widzisz, w dużej mierze jest ona już tutaj gotowa.

4:16Dlaczego?

4:17Ponieważ będę chciał, abyś od tej lekcji jak najwięcej rzeczy budował sam.

4:21Jak zresztą sam zauważyłeś, w poprzedniej

4:23lekcji, kiedy budowaliśmy razem pop up, zajęło nam to ogromną ilość czasu.

4:28Dlatego też będę starał się jak najwięcej tych rzeczy przerzucać na Ciebie.

4:31W ten sposób będę się mógł bardziej skupić

4:33na tłumaczeniu pewnych funkcjonalności, niż po prostu budować to właśnie krok po

4:37kroku i marnować na to ogromną ilość czasu.

4:39Dlatego też chciałbym, abyś teraz skupił się na tym, co widzisz na ekranie.

4:44Ja zaraz powoli przez króluje całą tą stronę, a Ty na razie nie zwracaj uwagi na

4:48style, a jedynie zastanów się w jaki sposób.

4:52I za pomocą jakich układów skomponował byś cały układ tej strony.

4:55Czyli np.

4:56tutaj powinien być column, to powinien być ROW itd.

5:00Jak widzisz mamy tutaj standardowy nabór, Tutaj to taką grupę na top.

5:05Tutaj jakieś odpowiednie informacje o naszym listingu.

5:10W to miejsce wrzucimy później grupę ze zdjęciami.

5:13Na chwilę obecną po prostu wrzuciłem tutaj zwykłą grupę nic do środka.

5:16Jedynie nadałem jej kolor, aby ją zamalować.

5:20Kolejna.

5:21Mamy tutaj sekcję Features Description i informacja o hoście po lewej stronie.

5:26Po prawej grupę, która chwilowo rozciąga się na całą szerokość, tak żeby po prostu

5:32łatwiej Ci było to chwilowo rozplanować i sobie wyobrazić.

5:40Tutaj ten box host nie powinien Ci sprawić problemu.

5:42Jak widzisz jest to dosyć prosty układ.

5:44Zresztą z większością tych elementów mieliśmy już doczynienia.

5:47A jak widzisz te grupy w wielu miejscach

5:49się powtarzają, więc będzie Cię czekało z pewnością dużo kopiowania.

5:53Mamy tutaj kolejną całą sekcję Basic Info.

5:57Całą sekcję z ułatwieniami.

5:59W przypadku River znów mamy tylko ten nagłówek i zapada lewa grupa.

6:04Tym też zajmiemy się w jednej z kolejnych lekcji.

6:07Następnie mamy Location i wrzucono tutaj mapkę.

6:13Kolejno tutaj popularne wyniki wyszukiwania w Twojej okolicy.

6:18Z takiej listy też już korzystaliśmy, więc myślę, że na pewno sobie z tym poradzisz.

6:22I oczywiście na dole nasz footer.

6:25Dodatkowo jak widzisz całość tutaj posiada wbudowany container,

6:28ponieważ mamy określoną szerokość całego contentu.

6:32A więc nie przedłużając przejdźmy do edytora i omówmy sobie całą tą strukturę.

6:39Przechodzimy do strony Listing.

6:44I tak standardowo mamy tutaj dodany nasz element.

6:49Czyli nasz awatar oraz CCleaner usuwa element czyli nasz footer.

6:55Cały page listing to oczywiście jak się

6:58domyślasz będzie column to standardowe wartości.

7:02Następnie raper.

7:07Musimy kliknąć jest skoczył ustawiony na rogu z marginesem górnym równy 97 pikseli.

7:16I oczywiście tutaj w centralną zawartością.

7:19Kolejna mamy tutaj container.

7:23Rok 32 piksele Typ kolumn.

7:26Maksymalna szerokość to oczywiście 1200.

7:29Padding w tym przypadku to 48 pikseli, u

7:31góry, 0 na dole i 32 po lewej i po prawej stronie.

7:38W środku mamy grupę TOP.

7:42Czyli zawierającą. Może przesuń w to miejsce te elementy.

7:46Tutaj mamy kolumn 24 piksele.

7:51W środku mamy grupę.

7:55Top Buttons Group.

7:58Tutaj row elementy rozszerzone do

8:00przeciwnych krawędzi za pomocą z Facebook Twin.

8:03Tutaj tą grupę to po prostu sobie

8:05skopiowałem i przeniosłem ze strony Password Recovery.

8:09W tym przypadku mamy kolejną grupę, która nam zbiera te dwa batony do środka.

8:14Kolumna ustawiony na 24 piksele.

8:18Ten styl dodałem sobie specjalnie na potrzeby właśnie takiego buttona.

8:23Mamy tutaj tak stałą wysokość 40 pikseli, padding 8 pikseli góra dół 16 pikseli lewa

8:29prawa strona kolumn GAP ustawiony na 8 pikseli.

8:33Layout oczywiście row.

8:38Flat color. Nasz kolor biały.

8:41Zaokrąglenie narożników równe 8 pikseli Border solid 1 piksel neutralny 300.

8:47Dodatkowo ustawiłem tutaj tranzycji dla background tile oraz border color.

8:53Jeżeli przejdę do edycji tego stylu.

8:58Mamy tutaj tylko condition, ale

9:00które działają dla statusów hover imprez i zmieniamy tutaj

9:05border color na Primary 600 albo Primary 900 i w obu przypadkach background color

9:11ustawiony na 25%, czyli na nasze Primary 25.

9:16Wróćmy do dizajnu i zerknij na ikonki.

9:21Jest ikonka share.

9:24Tu mamy ikonkę wishlisty.

9:29Następnie mamy tutaj grupę.

9:32To tekst.

9:34W tym przypadku ramka 108 pikseli.

9:38Układ typu kolumnowy.

9:40W środku mamy top info tutaj Row column gap 8 pixeli.

9:46Tą grupę skopiowałem po prostu z naszego Rio za element czyli listing kart.

9:53To jest zwykły tekst.

9:55Kropeczka.

9:56Aby wstawić taką kropkę wystarczy kombinacja klawiszy Alt albo Option i 8.

10:02Tomasz Style Body XS 12 pikseli 400.

10:06Dokładnie taki sam styl mamy zastosowany

10:08tutaj i taki sam zastosowałem również tutaj.

10:13Następnie wstawiłem tutaj nagłówek drugiego typu jeżeli chodzi o style.

10:17Natomiast na potrzeby cała zmieniłem go na H1, ponieważ każda strona powinna zawierać

10:22taki jeden bardzo ważny nagłówek, który jest odczytywany właśnie tutaj przez SEO.

10:27A ja chcę, żeby w tym przypadku była to po prostu nazwa naszego listingu.

10:31Kolejna mamy tutaj Body MD, szesnaście pikseli i nazwa miasta.

10:40Jeszcze dla całego kontenera mamy 32 piksele ROW u.

10:44I następnie mamy tutaj grupę Photos.

10:47Jak widzisz wstawiłem tutaj tylko zwykłą grupę i nadałem jej wysokość 100 pikseli.

10:53Minimalną i ustawiłem kolor.

10:55Na razie zostaw to w ten sposób.

10:56Potem będziemy nad nią pracować.

10:59Kolejna mamy tutaj.

11:00Tu kolor grup.

11:02W tym przypadku mamy tutaj RoF i kolanka ustawione na 96 pikseli.

11:07Minimalną wysokość możemy sobie wyzerować.

11:14W środku mamy dwie grupy Assault Group.

11:16Tutaj znowu chwilowo rozciągnęły @ sobie na całą wysokość i nadałem jej tylko kolor

11:22Primary 700 i ustawiłem maksymalną szerokość 360 pikseli.

11:28Znacznie więcej dzieje się tutaj w tej grupie content.

11:32Mamy ustawiony layout typu kolumn

11:35rozmiar 48 pikseli, minimalna wysokość niepotrzebna.

11:41A w środku jedziemy od początku.

11:43Mamy tutaj grupę Features.

11:46Kolumn 24 piksele.

11:49W środku tekst.

11:51To jest H4 24 piksele i taki kolor tutaj czcionki Neutral 800.

11:58Następnie mamy tutaj dodany Option Set Features, który będziesz

12:02musiał sobie dodać, oczywiście bazując na tabeli table, którą Ci udostępniłem.

12:08Jest to Listing Features.

12:11Jak widzisz nie ma tutaj nic trudnego.

12:12Natomiast zastosowałem tutaj opcję, której

12:14jeszcze nie korzystaliśmy, a mianowicie wskazałem, że chcę mieć tutaj

12:19oznaczoną stałą liczbę rzędów, ponieważ nie wiemy ile tak naprawdę takich ficzerów

12:24będzie się wyświetlało dla danego listingu.

12:27O ile użytkownik, czyli host, który będzie wynajmował taki lokal wskaże.

12:31Dlatego chcę tutaj mieć zawsze tylko dwie kolumny, a tutaj ustawić

12:35określoną liczbę rzędów, a minimalną wysokość ustawić na 100%, czyli na.

12:41100%, czyli wysokość tej grupy, którą sobie tutaj zdefiniujemy.

12:46Ustawiłem tutaj separator typu solid 24 piksele i kolor biały.

12:52Tu mamy grupę z poszczególną funkcjonalnością.

12:57Nic trudnego.

12:59Ikonka pochodzi oczywiście z setu.

13:03Jej wymiary to 24 na 24 piksele, kolor Primary 600.

13:08Ubrana jest tutaj w grupę.

13:11Nazwałem po prostu Grupa Icon jako styl.

13:14Kolor typu flat o wartości primary 25

13:18zaokrąglenie narożników 4 pixele i nasz stały border równy 1 piksel.

13:23Layout to jak się domyślasz oczywiście

13:25align to parent i wysokość 44 na 44 piksele.

13:30Ten tekst.

13:32To body SM 14 pikseli 500.

13:37Te grupy tutaj będą się powtarzały.

13:38Czyli tutaj znowu mamy szesnaście pikseli.

13:42Znowu mamy te same wartości jak mieliśmy tu.

13:47Ten tekst.

13:49To body m2 16 pikseli 400 i oczywiście wstawiony tutaj opis.

13:53Gdyby Cię interesowały jeszcze odstępy

13:55pomiędzy tutaj tą grupą z ikonką a tekstem to jest to.

13:59Szesnaście pikseli.

14:04Tu jak się domyślasz mamy znowu grupę typu kolumn.

14:09Ten tekst.

14:11To body XS 12 pikseli 400.

14:14Tą grupę sobie po prostu skopiowałem z naszego bloga.

14:19Jedyne co zmieniłem tutaj to kolor tego tekstu na ten neutral 800, a tutaj dałem

14:24czcionkę pod 114 pikseli 400, a tu jest ta sama czcionka tylko o grubość 500.

14:32Tutaj wstaw dowolne zdjęcie.

14:33Na razie jest ono statyczne, potem zadbamy o to, aby było dynamiczne.

14:38Taki styl dla tekstu.

14:42Tutaj znowu masz niemal dokładnie to samo, co mieliśmy tutaj.

14:47Jedyny wyjątek to właśnie, że te teksty

14:50są dwa zgrupowane w grupę, a możemy ją nazwać, ale to później.

14:55Nie mamy żadnego spisku, po prostu grupę typu column.

15:00I tak ten tekst.

15:02To jest body SM 14 pikseli 500.

15:05Neutral 800.

15:08Odys M 14 pikseli 4.

15:09Jest to dokładnie to samo, co było tutaj dla tego hosta, czyli użytkownika.

15:16I jeszcze tak ikonki.

15:18To są następujące home linear tutaj dla listingu dla review taka ikonka.

15:29Dla języków to będzie globus linear.

15:33To będzie kalendarz Linear dla joint.

15:38Tutaj mamy znowu standardową grupę powielenie tekstu, powielanie odstępów.

15:43Wstawiłem znów tą samą grupę.

15:46I także dokładnie te same style i tylko ikonki to building seminar.

15:53User Group round add linear.

15:57Sofa 3 Linear.

16:00PAF linear i tutaj jeszcze close square linear.

16:07To jak się domyślasz jest 800.

16:11Znów dokładnie takie same ustawienia,

16:13więc nie powinieneś mieć z tą grupą najmniejszych problemów.

16:17Tutaj znowu powielenie grupy.

16:19Musimy ją tylko nazwać Reviews.

16:26Skrót.

16:29Ten sam układ layoutu, te same odstępy.

16:32Tutaj dodałem na razie snapa, który będzie modelować.

16:35Później trawił dane.

16:38Nic skomplikowanego.

16:40I znów powielenia.

16:4324 piksele.

16:44Tu mamy teksty odsunięte od siebie o 8 pikseli.

16:47Location i tekst.

16:49Tutaj oczywiście wstawiona mapka.

16:52Jedyne co zrobiłem to ustawiłem na niej Aspect ratio równe 16:9.

16:58Znów powielana ta grupa powyżej.

17:02Także to jest 24 piksele, tutaj 8.

17:06I tutaj wstawiłem tylko nasze po prostu

17:09repeat group z OZ listing i ustawiłem 1 rząd 3 kolumny.

17:16Na koniec mamy tutaj footer i to w zasadzie cały układ tej strony.

17:23Dlatego też chciałbym, abyś w tym momencie

17:24złapał za to wideo i postarał się najpierw za pomocą własnych sił

17:29tutaj wdrożyć całą tą stronę listingu, a z video korzystał tylko wtedy, kiedy

17:34chcesz wstawić odpowiednie style dla tekstów, poustawiać odpowiednie czcionki

17:38albo podpatrzeć z jakich ikonek ja korzystałem.

17:41Natomiast postaraj się cały typ układu, cały typ layoutu, czyli właśnie ten cały

17:46główny układ strony wdrożyć samemu bazując na naszej stronie wzorcowej.

17:51Pamiętaj, że zawsze jako back up możesz

17:53skorzystać z linku do mojego edytora i podpatrzeć jak ja to zrobiłem.

17:57Natomiast ja chciałbym jeszcze w tej lekcji poruszyć jeden bardzo ważny temat.

18:01Przejdźmy do podglądu naszej strony, czyli tej zbudowanej strony listingu.

18:07Jak widzisz mamy tutaj masę elementów,

18:09natomiast mamy tutaj również jeden bardzo ważny problem.

18:12Jaki?

18:13Otóż ta strona na chwilę obecną jest statyczna.

18:15Ja będę chciał, aby użytkownik klikając w

18:18kartę listingu był przeniesiony na tą stronę, ale żeby te elementy, które się

18:22tutaj wyświetlały dotyczyły właśnie tego listingu, który kliknął.

18:26Czyli żeby to nie było zawsze Desert Adobe Sanctuary.

18:29Czyli jeżeli kliknę sobie na jakiś inny listing, to te rzeczy mi się tutaj

18:32odpowiednio zaciągnęło i wyświetlą dynamicznie.

18:35Z dynamicznym przekazywaniem danych już mieliśmy do czynienia.

18:38Pamiętasz? Skoncentrowaliśmy nasz ruch, elementy

18:41listing cart i potem stawialiśmy go tutaj do Reporting Group i przekazywaliśmy tam

18:45dane, a po tym samym elemencie odpowiednio je sobie tutaj wyciągaliśmy i wyświetlamy.

18:51Ja chcę dokładnie taką samą operację

18:52zrobić tutaj, teraz dla całej strony listingu.

18:55Natomiast w jaki sposób przekazać dane między stronami?

18:58Otóż Babel.

18:59Jest to niesamowicie proste i zaraz Ci to udowodnię.

19:02Wracamy do edytora.

19:07OK. Jesteśmy w edytorze i najpierw przejdźmy

19:10sobie tutaj do Listing Card Label Element i dodajmy pierwsze workflow.

19:16Która będzie tutaj dotyczyła całej tej grupy.

19:18Listing Group.

19:20Chcę, aby po kliknięciu w całą tą grupę, czyli w zasadzie w tą całą kartę listingu

19:25dodać workflow, które będzie kierowało użytkownika.

19:28Oczywiście, jak się domyślasz na samym listingu.

19:31Natomiast jeszcze takie działanie nie przekazuje nam żadnych danych.

19:34Jak to zrobić?

19:35No pewnie, widzisz tutaj opcje data to send.

19:38I z tej opcji będziemy korzystać tylko

19:40wtedy, kiedy będziemy przekazywać dane bezpośrednio z bazy danych.

19:45My chwilowo tego nie robimy.

19:46Nie mamy listingu ustawionego jako typ w bazie danych.

19:49Mamy go natomiast ustawionego jako SET.

19:53Jak więc przekazać dane z opcją setup pomiędzy stronami?

19:56Musimy w tym celu wykorzystać coś, co się nazywa URL parameters.

20:00Jest to opcja, z którą już miałeś do

20:02czynienia, mimo że pewnie nawet nie masz pojęcia, że tak było.

20:06A kiedy taka opcja nam się wyświetliła?

20:08Otóż w momencie, kiedy wyświetla nam się na stronie debuggera.

20:11Wróćmy na chwilę do strony index owej.

20:15Kliknij na stronę index.

20:17Jestem w stanie listingu przejść do strony index owej.

20:19Reszta obojętnie jaka strona.

20:22Tylko po to, aby móc tutaj kliknąć Preview.

20:26Jak pamiętasz wybierając tą opcję wyświetli nam się debugger.

20:30Pamiętasz?

20:30Zresztą to pokazywałem Ci również w jednej z poprzednich lekcji jak go usunąć.

20:35Musieliśmy wywalić tą część, czyli znak zapytania obok @ to równa się true.

20:39I to jest tzw.

20:41URL parametru.

20:43To jest jego nazwa Debug mode.

20:46Następnie mamy To równa się i jego wartość.

20:50Ten parametr jest dodawany automatycznie, kiedy klikamy sobie tutaj Preview, a my

20:54teraz będziemy chcieli taki parametr przekazać ręcznie.

20:57I zaraz Ci pokażę jak to zrobić.

20:58Zamknijmy to okno.

21:00Wróćmy znów do tej listing.

21:03Karta Element to naszego workflow.

21:07I musimy wykorzystać tą opcję.

21:09Send more parameters to the page.

21:11Zaznaczamy i możemy teraz dodać nowy parametr.

21:16Najpierw wpisujemy kij, czyli jego nazwę.

21:18Może być ona dowolna, natomiast stosujemy tu z reguły

21:22zabawę, nazewnictwo, brak spacji, bo tych nie możemy tutaj wstawić.

21:26Dlatego też ja najczęściej stosuję tutaj jak najbardziej skrócone nazewnictwo.

21:30Czyli jeżeli to ma być listing to po prostu wstawiam tutaj plot listing.

21:35I teraz baba prosi mnie o podanie wartości

21:37co my tutaj chcemy przekazać, chcemy przekazać.

21:41Parent. Group as listing, czyli ten listing, który

21:44przekazaliśmy właśnie do naszej karty, czyli np.

21:47Sakura Heaven, które nam się tam wyświetlało.

21:50Ustawiłem to i mam tutaj informację, że coś jest nie tak.

21:53Mabel twierdzi, że mamy tutaj problem.

21:56Dlaczego?

21:57Ponieważ ten cały element oraz listing to jest jeden rekord z naszego setu.

22:02On ma różne tam pamiętasz kolumnę, więc nie możemy tego przekazać, bo

22:06parametr URL może zawierać tylko i wyłącznie tekst.

22:09Dlatego też musimy tutaj przekazać jakąś wartość tekstową z naszego rekordu.

22:13Może to być na przykład.

22:16Display, czyli po prostu nazwa takiego listingu.

22:19I teraz zobacz, jak to zadziała.

22:21Wróćmy sobie na stronę index ową.

22:24Zanim jednak to zrobię, to chcę jeszcze

22:26zaznaczyć tę opcję, aby ta strona otwierała mi się w nowej

22:29karcie, tak żebyśmy nie przechodzili na kolejną.

22:32I zaraz zobaczysz, jak to zadziała.

22:34Przechodzimy na stronę index ową.

22:38W zasadzie może przejdźmy tutaj do

22:40podglądu i tylko ręcznie przejdź na stronę index.

22:49Jesteśmy na stronie indeksowe i tam gdzie

22:51mieliśmy właśnie nasz ost listing zastosowany czyli w tym miejscu.

22:55I teraz klikam tutaj na ten pierwszy element pierwszą kartę otwiera mi się nowa

23:01karta i jak widzisz otwiera mi się tutaj 100 na listingu.

23:04Na razie dalej jest ona tutaj statyczna,

23:06my tylko przekazaliśmy dane, jeszcze ich nie odbieramy.

23:09A gdzie je przekazaliśmy?

23:10Oczywiście w pasku adresu.

23:12Jak widzisz mamy tutaj dodany nasz

23:13parametr L równa się wartość atrybutu display, którą właśnie przekazaliśmy.

23:19Po prostu to zawsze musi być tekst.

23:21A więc tak w ten sposób przekazujemy dane między stronami.

23:24Teraz nauczmy się je odbierać.

23:27Czyli będąc na stronie listingu musimy

23:29wyciągnąć te dane z URL a z naszego tutaj tego parametru l i wtedy kolejno przekazać

23:34je do elementów na stronie, aby móc dynamicznie wyświetlać te wartości.

23:39Zamknijmy to.

23:42Przejdźmy do edytora na strony listingu.

23:49Jeżeli przekazujemy coś za pomocą

23:50parametrów to najprościej będzie to przypisać do Page Wrapper Group.

23:57Pewnie się zastanawiasz, dlaczego nie robimy tego już na etapie całej strony.

24:01Otóż.

24:03Tutaj możemy przepisać content, ale tylko z bazy danych.

24:06Jeżeli sobie kliknę tutaj

24:08to nie mam dostępu do przęseł, mogę wybrać tylko właśnie bazę danych.

24:12A ponieważ nie mamy listingu

24:14ustawionego jako typ danych, tylko po prostu jako set, to nie mogę tutaj wybrać.

24:19Muszę przejść do jakiegoś elementu na stronie.

24:21Dlatego ja właśnie zawsze stosuję page

24:23wrapper, czyli taki główny element, który zabiera w zasadzie całą treść na stronie.

24:27I tutaj teraz mogę wybrać typowy content.

24:30Wskazać, że chcę tutaj przekazywać Oz listy Things.

24:35Skąd chcę wybrać sobie dane?

24:37Wyciągnąć je z URL a? Jak to zrobić?

24:38Klikam w to miejsce.

24:40Nie wskazuję konkretnej opcji, ponieważ one będą przekazywane dynamicznie.

24:45Ja nie wiem w jaką kartę użytkownik

24:46kliknął i jakie dane chcę sobie wyświetlić, więc muszę się odnieść do URL.

24:50Zaczynam sobie wpisywać URL i wybieram opcję Get data from page URL.

24:57Teraz tak. Skąd te dane chcę pobierać?

24:58Z parametru, czyli zostawiam.

25:01Tutaj to łapię jak się ten parametr nazywa.

25:03Jest to L.

25:06Jaki typ danych tam przekazywaliśmy.

25:08Był to OZ Listing.

25:11Czekamy. I to tyle.

25:14I tak na stronie indeksowe kliknę sobie w kartę.

25:17Przeszliśmy do strony listingu.

25:20W parametrze przekazaliśmy pojedynczy listing właśnie pod parametrem L.

25:24A teraz na stronie listingu

25:26to sobie pobieramy z URL a i będziemy chcieli wyświetlić te wartości.

25:29A więc jak się domyślasz, skoro wpisaliśmy to tutaj do naszego page wrapper,

25:34to poprzez ten znany Ci już łańcuszek musimy przekazywać to dalej do

25:37zagnieżdżonych elementów w środku, czyli na container.

25:40Wybieramy tutaj OZ Listing.

25:43I Parents Group, a jest listing.

25:45To samo zresztą pamiętasz, co robiliśmy

25:47tutaj dla Izabela Element dla karty z listingu, karty z blogiem itd.

25:52Ja chcę wyświetlić tak naprawdę tylko sam tytuł etc.

25:56Więc muszę sobie tak przekazać to jeszcze tutaj do tej grupy top.

26:05Rozwijamy ją. W środku mamy buttony.

26:08To nas nie interesuje, ale interesuje nas ta grupa Top Text Group.

26:12Tutaj znowu jest listing.

26:16Teraz to mam już zwykłe teksty w środku,

26:19więc mogę sobie przekazać dynamicznie wartości.

26:22A więc chcę powiedzieć, że jest to parents group a six things

26:25display w tym przypadku, czyli nazwa takiego listingu, a tutaj będzie to City.

26:33To jest parametr City.

26:36Oczywiście moglibyśmy przekazywać te wartości do pozostałych grup i jeżeli

26:40będziesz chciał, to oczywiście możesz to zrobić.

26:43Wiesz już teraz, w jaki sposób tutaj przekazywać te wartości od rapera

26:47głębiej do poszczególnych zagnieżdżonych elementów.

26:49Natomiast chwilowo zostawmy sobie tylko te dwa i sprawdźmy, czy nam to zadziałało.

26:55Przejdźmy do podglądu.

26:58Ale jesteśmy na stronie index owej.

27:01Klikam Villa Tosca na Delight.

27:06Jak widzisz otworzyła mi się strona

27:07listingu i ten tekst zmienił się dynamicznie na Villa Toskania.

27:12Dawajcie to, bo to ładniej Otwórzmy jakieś inne np.

27:16Urban Skyline, Loft.

27:18Klikam.

27:20Jak widzisz, te wartości zostały przekazane dynamicznie.

27:24W ten sposób za pomocą parametrów możesz przekazywać dane pomiędzy stronami.

27:28I potem właśnie odnosząc się do relacji konkretnego parametru, wyciągać te dane i

27:33przekazywać je dalej do elementów na stronie.

27:37Dziękuję Ci za uwagę.

27:38Tak więc mam nadzieję, że

27:40po pierwsze zbudujesz tą stronę z listing GEM od podstaw samemu, a następnie

27:45wykorzystasz wiedzę zdobytą w tej lekcji do tego, aby jak najwięcej informacji na

27:49tej stronie wyświetlić dynamicznie i pobrać je właśnie z naszego setu.

27:53A ja dziękuję Ci za uwagę i widzimy się już w następnej.