Aplikacje no-code z Bubble: Sekcja reviews - guest

0:00Poprzedniej lekcji zbudowaliśmy wspólnie sekcję bookingu dla stanu Full state.

0:06Ja w międzyczasie między lekcjami

0:08prowadziłem tutaj kilka bardzo drobnych poprawek.

0:10Przede wszystkim dodałem tutaj background na tym przycisku, dzięki czemu

0:15to wygląda jakby ten stan był tutaj aktywny.

0:17Dodatkowo zadbałem również o to, aby te teksty mi się wszędzie pojawiały.

0:21Pamiętasz? Kupowaliśmy je tutaj

0:23jako kopię tego tekstu i tam były odpowiednie warunki, które je ukrywały.

0:27Musisz o to zadbać.

0:28Dodatkowo zadbałem również o to, aby w tym miejscu wyświetlały mi się różne stany.

0:33I zaraz pokażę Ci, w jak prosty sposób można to uzyskać.

0:36A jeszcze kolejna rzecz to oczywiście.

0:40Tutaj stany mobilne.

0:41W tym przypadku jak widzisz tylko

0:43przesuwam sobie te treści na dół, a ten guzik pojawia mi się tutaj.

0:47Tamten po prostu ukrywam, a ten tekst wyświetlam w tym miejscu.

0:50To naprawdę wszystko, co tutaj zrobiłem.

0:54A więc nie ma tutaj nic trudnego.

0:56Wróćmy do normalnego widoku.

0:59Natomiast teraz oprócz tego, że pokażę Ci

1:01jak to działa, chciałbym tutaj jeszcze jeden bardzo ważny komunikat ogłosić.

1:06Jest to ostatnia sekcja, którą budowaliśmy wspólnie.

1:09Od tej pory ja będę je sobie przygotowywał między lekcjami, a na lekcjach omówię

1:14główne funkcjonalności, jakie tam wdrożyłem.

1:17Nie będę już omawiał stylów.

1:19W każdej chwili możesz sobie sprawdzić

1:20moim edytorze lub zastosować całkowicie inne.

1:23Jeżeli uważasz, że ta czcionka jest za mała, bo w złym kolorze.

1:26Nic nie stoi na przeszkodzie, abyś zastosował jakiś własny styl.

1:29Ja stawiam w tej mierze oczywiście na Twoją kreatywność.

1:32Być może osiągniesz dużo fajniejsze efekty niż ja.

1:35A więc wróćmy do edytora i w tym przypadku.

1:40Tutaj w panelach odniosłem się do Current Cell Index.

1:44Jest to genialna funkcjonalność Babel,

1:46ponieważ możesz się odnieść jak widzisz do konkretnego indeksu danej komórki.

1:50Ja w tym przypadku powiedziałem, że jeżeli

1:52wyświetlamy rekord numer dwa to po prostu zmieniam background color i font color.

1:57I to samo robię tutaj dla set index numer 3.

2:01I oczywiście zmieniam sobie te teksty,

2:03dzięki czemu wygląda to tak, jakbyśmy mieli tutaj wszystkie te stany,

2:07a w zasadzie statusy tych bookingu, czyli app coming ended i active.

2:14A więc coś takiego.

2:17Skoro to mamy już wyjaśnione.

2:18Mam nadzieję, że z resztą sobie poradzisz sam.

2:22Przechodzimy teraz do sekcji riffu, ponieważ tutaj wykorzystałem kilka

2:25ciekawych trików, które chciałbym Ci zademonstrować.

2:28To stan Empty State, który już wcześniej przygotowaliśmy.

2:31Natomiast mój stan full state wygląda w ten sposób.

2:36Założyłem sobie. To jest takie moje własne założenie.

2:39Nie musisz z niego korzystać, ale wydaje mi się, że jest to całkiem słuszne,

2:43aby w momencie kiedy użytkownikowi skończy się dany booking,

2:46tworzyć w naszym serwisie taką automatyczną, pustą recenzję i w ten

2:51sposób wyświetlać mu je tutaj właśnie w sekcji FW.

2:54Jak widzisz w tym miejscu mamy informację jaki to był listing.

2:57Ja dodatkowo zadbałem o to,

2:59aby po kliknięciu tutaj ten listing nam się otwierał, więc użytkownik w każdej

3:03chwili może sobie sprawdzić gdzie był i sprawdzić szczegóły tego listingu.

3:07A tutaj dodatkowo za pomocą tego buttona

3:10będziemy otwierali pop up nie może zostawić swoje riffu.

3:13W ten sposób może nie tyle wymuszamy, co

3:16delikatnie sugerujemy użytkownikom, aby wystawiali właśnie recenzje do bookingu,

3:21które mają już za sobą, ponieważ jak pamiętasz naszej aplikacji chodzi o to,

3:25aby polecać jak najlepsze listingu, a więc również takie, które są jak najwyżej

3:28oceniane, a trudno zdobyć ocenę, jeżeli użytkownicy nie będą ich wystawiać.

3:33A więc w ten sposób delikatnie nakierowuje

3:35ich na to, aby właśnie takie opinie wystawiali.

3:39Dodatkowo mam tutaj dwa staty.

3:41Ten jest ustawiony na new czyli po

3:46danym bookingu użytkownik może wystawić recenzję, a tu widzi wszystkie czyli takie

3:51gdzie zarówno on już wystawił opinie jak i host, bo tak to ma działać.

3:56Użytkownik wypełnia właśnie tutaj to review wystawia swoją opinię.

4:00Host danego lokalu może na to odpowiedzieć, ale o tą funkcjonalność to

4:04zadbamy już oczywiście kiedy przejdziemy do konta hosta.

4:08Natomiast jak widzisz nie ma tutaj nic trudnego.

4:10Jest teraz takie powielenie tego co

4:12robiłem właśnie tutaj dla new, czyli wykorzystałem niemal te same rep

4:16grupy, tylko tutaj dostałem właśnie te komentarze.

4:21Dodatkowo zadbałem również o to, aby to było oczywiście w pełni responsywne.

4:25Jak widzisz będę sobie tutaj zjeżdżał, to w tym widoku to komentarze pojawiały mi

4:30się już jeden na drugim i tak to zostawiłem.

4:32Dodatkowo właśnie to info tutaj będę ukrywał.

4:36O ile dobrze pamiętam chyba w tych rozdzielczościach poniżej 576.

4:40Tak, zgadza się w ten sposób mamy tutaj tylko właśnie odniesienie do listingu.

4:44Mamy komentarze

4:46i możemy się oczywiście przełączyć, możemy przejść na new, to musielibyśmy

4:50również zadbać o to, żeby ten background się tutaj guziku pojawiał.

4:53Ale ja się tym nie przejmuję.

4:54To są takie drobne szczegóły, które

4:56będziemy sobie potem wprowadzać w przyszłym sprincie.

4:59Natomiast tu, w tym miejscu, zamiast

5:00sortowania po dacie, będziemy mieć w przyszłości sortowanie po typie

5:04komentarzy, czyli od wszystkich, poprzez pozytywne, neutralne, aż do negatywnych.

5:10A skoro wiemy, jak to ma działać, to wróćmy sobie.

5:14I teraz przejdźmy już do edytora.

5:18I omówmy jak ta cała sekcja w zasadzie jest skonstruowana.

5:23Jest to oczywiście kolejny element, jak nazwałem po prostu best reviews are.

5:29Skopiowałem sobie w zasadzie to, co

5:31mieliśmy poprzednich element, czyli gest booking.

5:36Ten układ u góry jest niemal identyczny.

5:38Mamy tutaj przyciski.

5:39Ja tylko po prostu zmieniłem tutaj tekst.

5:43Zmieniłem ten tekst i oczywiście dopasowałem sobie tą grupę.

5:46Fokus.

5:47Dla całego tego riffu.

5:49Element dodałem tutaj Custom State.

5:53O nazwie VU. Jest to zwykły tekst i domyślnie ustawiam

5:56go na new a za pomocą tych dwóch przycisków oczywiście go sobie przełączam.

6:00Możemy przejść do.

6:02Workflow.

6:03Jak widzisz tutaj tylko zmieniam ten state właśnie na new.

6:08Albo na all.

6:09To są po prostu wartości wpisane na sztywno.

6:11Tutaj nie musimy dbać o jakieś sety, bo mamy tylko dwie te wartości.

6:17Moglibyśmy tutaj oczywiście wykorzystać.

6:19Też warto jest, No ale ja stwierdziłem, że

6:21dużo łatwiej będzie po prostu zastosować tutaj zwykły tekst.

6:25Wracamy więc do designu.

6:29Ukryjemy sobie tą fokus, żeby nam nie przeszkadzała.

6:32I rozwiniemy sobie tutaj ten wrapper.

6:38Tu mamy górkę z filtrami, natomiast tutaj.

6:43Mam pierwszą grupę, która mi się pojawia i zobacz jak ja to skonstruowałem.

6:47Domyślnie jest ona ukryta.

6:49Pokazuję ją oczywiście wtedy, kiedy ten custom statywu jest równy.

6:53New to po prostu znowu na sztywno wpisane.

6:57Natomiast.

6:59Type of content ustawiłem tutaj jako s review i oczywiście wyświetlamy S review.

7:06I tak samo tutaj ustaliłem, że to będą trzy rzędy jedna kolumna.

7:11Możesz tutaj sobie to pozmieniać według własnego uznania.

7:13Natomiast zobacz jak to działa w środku.

7:17Do tej grupy pierwszej przekazuje o s

7:19review po prostu Karen Self, natomiast do ośrodka.

7:25Mam tutaj tą grupę, która odpowiada za listing.

7:28I tu jak widzisz od razu wybrałem sobie najpierw content is listing.

7:32Dlaczego? Dlatego, że jak pamiętasz w Review mamy

7:34kolumnę, która kieruje do takiego listingu i ma taki typ.

7:38A więc w ten sposób mogę się odnieść do Parent Group Review Listing i w ten sposób

7:43wyciągać w środku informacje dotyczące listingu.

7:47Dodatkowo kliknięcie całej takiej grupy.

7:51Przenosi użytkownika na Page listing przekazując tutaj odpowiedni parametr, a

7:55więc dokładnie to, co już wcześniej robiliśmy.

7:57A więc jak widzisz wewnątrz grup może stosować różne

8:02typy contentu i odnosić się właśnie do tego, albo właśnie poprzez takie łańcuszki

8:06parent review lub poprzez nawet opcję GT option.

8:10Tutaj już wcześniej pokazywałem.

8:12Tu mamy standardowy przycisk, który będzie nam otwierał właśnie preview pop up.

8:17I tutaj też zastosowałem kolejny bardzo ciekawy trik.

8:21Jak pamiętasz, do tej pory, kiedy dostawaliśmy pop upy,

8:24gdzie przekazywaliśmy jakieś dynamiczne dane, ustawialiśmy je na sztywno.

8:27Możemy zresztą nawet do tego wrócić.

8:29O ile dobrze pamiętam, było to chyba na stronie listingu.

8:32Zerknijmy.

8:34Tak, tu mamy Gallery Popup.

8:36Jak pamiętasz, zdefiniowaliśmy sobie Type of Content i Data Source.

8:40Zabieraliśmy sobie spać w rapera, ponieważ tutaj zawsze był to ten jeden listing.

8:45Podobnie zresztą tutaj.

8:46Dla razu też mogliśmy się odnieść do tego stałego listingu.

8:50Natomiast jeżeli wrócimy do Guest Reviews Error XML Element.

8:55Po każdym z powrotem całą tę grupę.

8:59Niestety tylko top.

9:02O właśnie tą.

9:05No to tutaj jest problem, ponieważ ja

9:07chciałbym w PO papie, który się otwiera, również wyświetlać właśnie ten listing.

9:13Natomiast nie wiem tak naprawdę właśnie,

9:16który tutaj review użytkownik sobie kliknie.

9:19A więc musimy takie RW przekazać

9:21dynamicznie do papu i zobacz jak ja to zrobiłem.

9:23Na review popup ustawiłem Type of content, ale data sort zostawiłem sobie puste,

9:28ponieważ nie wiem na ten moment jaki tutaj rekord wyskoczy.

9:33Ale jak taki rekord przekazać do POPUP u?

9:36Jest to znów niesamowicie proste.

9:38Wystarczy, że.

9:39Tu w momencie, kiedy otwieram pop up.

9:42Najpierw korzystam z opcji Display Data.

9:45Odnoszę się do Parent Group Review, czyli

9:49aktualnego review, które użytkownik kliknął.

9:51I ten rekord przekazuję właśnie tutaj do popup u.

9:54On zostanie ustawiony dynamicznie.

9:57Potem go po prostu pokazuję. I zobacz jak to działa.

10:00Teraz, jeżeli przejdziemy do podglądu. To np.

10:03tutaj mamy Bali Olson Front.

10:06Klikając ten przycisk przekazałem sobie to oz review.

10:09Z niego wyciągnąłem ten listing i wyświetlam tutaj właściwe informacje.

10:13W tym miejscu zastosowałem całkiem fajny plugin, który pozwala mi właśnie na

10:18dodanie takiego ratingu, właśnie takiego animowanego błyskami.

10:23Natomiast jego minusem jest to, że

10:24niestety nie mamy tutaj połówkowe ocen, musimy wystawiać całościowe.

10:29Ogólnie pluginów do wystawiania ratingów w formie gwiazdek znajdziesz w Babel kilka.

10:36Możesz je przetestować.

10:37Większość z nich jest darmowa.

10:39Te najbardziej popularne, stworzone przez

10:41Saba Babel rzeczywiście pozwoli Ci właśnie wystawiać takie oceny połówkowe.

10:45Natomiast wygląda on strasznie brzydko.

10:47Dlatego ja też zdecydowałem się na ten.

10:49Zaraz Ci pokażę, który to jest.

10:52Natomiast jak widzisz mogę sobie zamknąć

10:53tutaj to review, a w zasadzie ten popup, w którym będę wystawiał review.

10:57Jeżeli kliknę teraz tutaj na ten record na

11:00to review, to przekażę to dynamiczne wartości.

11:03Jak widzisz odpowiednio nam się tutaj

11:05zgadza, a więc takie dane grupa elementów możesz przekazywać również

11:11za pomocą workflow, co właśnie teraz Ci udowodniłem.

11:15Wystarczy wybrać tą opcję Display Data.

11:18Wybrać element, do którego chcesz takie dane przekazać.

11:21I tutaj wysłać dane, które chcesz tam wyświetlić.

11:23W naszym przypadku jest to po prostu określony rekord.

11:26Z tego stos Reviews.

11:30W przypadku pluginów tutaj wykorzystałem

11:32Animation Rating Start od 0 Cloud o ile się nie mylę.

11:37Tak od 00 to oni mają całkiem fajne pluginy.

11:41Polecam z nich korzystać.

11:42Część jest darmowa a część płatna, ale zawsze znajdziesz coś ciekawego.

11:46Tak więc zachęcam Cię do sprawdzenia tego lub po prostu jakiegoś innego

11:51pluginu do wystawiania właśnie takiego ratingu w formie gwiazdek.

11:59To było chyba na tyle.

12:00W tej lekcji wydaje mi się, że.

12:03Tutaj już nic więcej tłumaczyć nie muszę.

12:06Sam będziesz w stanie właśnie sobie tutaj to stworzyć.

12:10Tu jak widzisz mam dokładnie to samo.

12:12To jest ten review all, które tutaj wyświetlam.

12:16Właśnie, kiedy ten state jest równy all? Tak.

12:20Bo to jest dokładnie kopia

12:22tej Rapid Ink grupy stosuje dokładnie tutaj

12:25te same elementy, a więc ten listing tutaj jak widzisz to jedno review

12:30pobieram sobie dynamicznie z naszego setu, czyli tą recenzję.

12:34Natomiast tutaj skopiowałem tą grupę, pozbyłem się odniesień dynamicznych i po

12:39prostu na sztywno wpisałem tutaj jakieś informacje, wgrałem zdjęcie,

12:42dodałem informacja o hoście i to w zasadzie wszystko.

12:46Tak więc zachęcam Cię do tego, abyś albo

12:49spróbował odwzorować to co ja tutaj wdrożyłem.

12:52Zerknij sobie najpierw na to jak to działa.

12:53Spróbuj to zaprojektować samemu.

12:57Spróbuj również przynajmniej na samym

12:58początku dodać tutaj workflow, które ja wykorzystuję.

13:02Spróbuj sobie pomyśleć jak to powinno działać, jak to powinno być poustawiane.

13:07A jeżeli masz jakieś wątpliwości, jeżeli coś jest niejasne, to oczywiście zawsze

13:11możesz skorzystać z mojego edytora i tutaj sobie to sprawdzić.

13:15A zanim jeszcze skończymy tą lekcję, to

13:17oczywiście ten guzik, który pokazuje bądź ukrywa empty state.

13:21Jak się domyślasz działa to dokładnie tak samo jak tutaj dla tej sekcji Books.

13:25Ja po prostu dodałem

13:27kolejne pole, tym razem Reviews Number 1 naszego rekordu w bazie danych.

13:33Jeżeli przejdziemy tutaj.

13:34Jak widzisz, zdefiniowałem już wszystkie

13:36trzy, czyli Back in Stamp, które mieliśmy w poprzedniej lekcji ustawione.

13:41Dodałem sobie reviews number. To też jest number.

13:44I wish list number też jest number.

13:46Nie ma tutaj nic trudnego i stosuję niemal dokładnie to samo co workflow.

13:50Odnoszę się po prostu do właściwego

13:52atrybutu i zmieniam wartość zera na 1 albo z 1 na 0.

13:57I to wszystko. A więc dziękuję Ci za uwagę.

13:59Zachęcam Cię do działania i widzimy się już kolejnej lekcji.