MVP aplikacji w rekordowym czasie z Bubble: Jak dodać filtry do wyszukiwarki
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Witam Cię w kolejnej lekcji i zanim przejdziemy do działań jeden
bardzo ważny komunikat.
Otóż moim zdaniem jest to jedna z najtrudniejszych lekcji w tym module.
Dlatego też chciałbym, abyś teraz szczególnie skupił się na tym, co tutaj
robię, w jaki sposób ustawiam te wartości i dlaczego doszedłem do takich
wniosków, a nie do innych.
Wyszukiwanie i filtrowanie rekordów w Babel jest niesamowicie potężne, ale
niesie ze sobą również cały szereg różnych dziwnych pułapek, na które możesz się
natknąć, zwłaszcza kiedy jesteś tutaj początkującym deweloperem.
Dlatego też proszę, nie przejmuj się, jeżeli za pierwszym razem
tutaj nie wszystko zrozumiesz.
W takim przypadku po prostu odpocznij chwilę, uruchom lekcję od początku i
przejdź przez te wszystkie ustawienia, które ja tutaj będę dodawał jeszcze raz,
krok po kroku, ponieważ jeśli zrozumiesz jak to wszystko działa oraz na jakie
problemy możesz natrafić i jak je rozwiązywać, zapewniam Cię, że będzie Ci
się potem w przyszłości dużo prościej pracowało z Babel i odpowiednio filtrowało
rekordy we własnych aplikacjach.
Tak więc tyle tytułem wstępu i przystąpmy już teraz do działania.
Przede wszystkim w poprzedniej lekcji udało nam się przekazać część parametrów z
naszej wyszukiwarki i tym samym zawęzić wyniki do tych, których
poszukiwał nasz user.
Dodatkowo dodaliśmy też opcję wybrania kategorii i w tym przypadku zmienialiśmy
tylko custom state i jego wartość przekazywaliśmy sobie jako
constrain do naszej grupy.
Co z resztą teraz widzisz na ekranie?
Wyszukujemy tutaj listingów, zawężamy je do miasta znajdującego się w odległości
50 km od tego, które wskazał user.
To wartość pobieramy sobie oczywiście z parametru URL.
Podobnie tutaj ograniczamy liczbę gości, a także kategorię, którą w tym przypadku
ustawiamy po prostu na wartość statusu o nazwie current category.
Natomiast czy z takiego samego rozwiązania możemy skorzystać w przypadku
naszego pop upu z filtrami?
Otóż niestety nie.
A to z tego prostego powodu, że funkcjonuje on u nas jako
element i nie ma bezpośredniego powiązania ze stroną, a więc w takim przypadku
będziemy musieli przekazywać filtry wybrane przez naszego usera bezpośrednio
do parametrów URL, a potem pobierać sobie te wartości i to na nich
opierać się w naszych constrain.
Natomiast aby nam to zadziałało, musimy najpierw dodać w naszym pop upie
odpowiednie customstate'y i oczywiście logikę do obsługi takich filtrów, czyli
wszystkich tych, które tam posiadamy.
Ja już to zrobiłem i mogę Ci to teraz udowodnić.
Jeżeli przejdę sobie najpierw tutaj na naszą stronę,
otworzę nasz popup z filtrami, to tutaj po kliknięciu jak widzisz zaznaczają
mi się odpowiednie wartości.
Tak samo i tutaj i w tych miejscach.
Natomiast na razie są to tylko custom states i tylko i wyłącznie to robię.
Zmieniam CustomState'y, dodaję tutaj odpowiednie conditionale, czyli dokładnie
to, co robiliśmy na przykład na stronie New Listing, gdzie najpierw właśnie
ustawialiśmy sobie takie conditionale.
Jeżeli wrócę teraz do pop upu, czyli do naszego edytora, mogę sobie to zamknąć,
Przejdź do elementu filter z pop up.
Re Ustawiłem tu właśnie takie sprite'y.
Chciałbym, żebyś je teraz dodał do swojego pop upu.
Dam Ci na to chwilę.
Ok, mam nadzieję, że to już jest gotowe.
A teraz przejdźmy tutaj do zakładki Workflow.
Jak widzisz, nie ma tutaj nic trudnego.
Po prostu po kliknięciu przycisku ustawiamy odpowiedni state.
To samo robię tutaj dla tych grup z udogodnieniami, językami
i pozostałymi filtrami.
Natomiast potem po prostu tylko tutaj mamy odpowiednie condition, ale które wyciągają
sobie wartość takiego custom state.
Porównują go właśnie tutaj z current cell i odpowiednio dodają tutaj style.
Więc myślę, że jest to całkowicie zrozumiałe.
Znów dam Ci chwilę, abyś sobie to spokojnie ustawił i zaraz
przystąpimy do dalszej pracy.
Zanim natomiast przejdziemy do działania, chciałbym jeszcze tutaj zwrócić Twoją
uwagę na ten element price range.
Korzystamy tutaj z slider input, czyli właśnie takiego slidera.
I zobacz mam tutaj ustawioną wartość minimalną maksymalną oraz krok czyli co?
Ile będziemy zwiększać te wartości przesuwając właśnie tymi slajderami.
I tu możesz trafić na pierwszy problem.
Zobacz, mam tu 0 i 100 i krok po 10.
Czy to nam zadziała bezproblemowo? Wracamy.
Otwieramy.
0 Minimalna. 100.
Maksymalna. Przesuwam sobie ten slider.
No wygląda na to, że wszystko jest ok.
Te wartości mi się tutaj zmieniają o 10.
Taki step mamy ustawiony i tutaj i tutaj.
Natomiast zobacz co się stanie, jeżeli ustawię tutaj wartości, które nie
do końca będą pasować do tego stepu.
Czyli na przykład wartość maksymalna to 99.
Wracamy.
Odświeżamy.
I na dzień dobry wygląda, że wszystko jest ok.
Mamy wartość 0, mamy 99 tak jak to ustawiliśmy.
Ale jeżeli przesunę tutaj tą wartość to jak widzisz właśnie ta wartość maksymalna
mi się dostosowała do tego kroku.
Po prostu nie będziemy w stanie osiągnąć wartości 99 przesuwając ten slider, a w
zasadzie właśnie jeden z tych ramion o 10, czyli taki step jaki ustawiliśmy.
Dlaczego o tym wspominam?
Otóż właśnie z takiego powodu, że będziemy tutaj potem przekazywać wartości minimalne
i maksymalne z naszych listingów.
Jeżeli ustawisz zły step, to właśnie ta maksymalna może Ci się właśnie
tutaj błędnie zmieniać.
Dlatego też ja tutaj zawsze w tych slajderach ustawiam sobie jeden.
Jeżeli mam takie właśnie niepełne wartości, wtedy zawsze mam pewność, że tu
mi się właśnie nic nie zmieni i Babel sobie tego automatycznie nie dostosuje.
Skoro to mamy omówione, to przejdźmy sobie do naszej strony z wyszukiwaniem,
czyli strony Search.
I to co chciałbym teraz zrobić, to jeszcze zastanowić się w jaki sposób chcemy tutaj
pracować z naszymi rekordami W tym przypadku ustawiłem tutaj ten
constrain dotyczący kategorii bezpośrednio właśnie tutaj, czyli w naszym search for.
Jak pamiętasz, w takim przypadku takie ograniczenie zadziała już właśnie na
etapie naszego serwera, czyli Bubble w momencie pobierania rekordów z niego.
Sprawdzi sobie to category jeżeli jakieś wykryje to właśnie ograniczy tą liczbę
rekordów do tych, w których właśnie ten kod strony się będzie zgadzał.
Ja natomiast chcę do tego zagadnienia podejść w nieco inny sposób i najpierw
pobrać z naszej bazy danych jak najwięcej listingów, które będą spełniały
te podstawowe kryteria.
A dla mnie te podstawowe kryteria to te, które mamy ustawione w naszym na w barze,
Czyli w naszym przypadku będzie to przede wszystkim miasto oraz liczba gości.
Tak jak wspominałem, z datami pracuje się znacznie gorzej, więc do tego
przejdziemy sobie później.
Natomiast chciałbym teraz to kategorii przerzucić stąd do filtrowania,
czyli pozbywamy się tego.
Tutaj pobieramy sobie tylko te listingi, które właśnie to miasto jest godne I tutaj
liczba gości w ten sposób uda nam się za pierwszym razem pobrać
jak najwięcej rekordów.
Tak, potrwa to oczywiście troszkę dłużej.
Natomiast pamiętaj, że mamy tutaj ustawione właśnie
sztywne wyświetlanie liczby rzędów i kolumn, w związku z czym Babel
bierze sobie te rekordy na tyle inteligentnie,
że nie pobierze ich wszystkich naraz, czyli będzie pobierał je sobie po 9
i jeżeli dodamy odpowiednią paginację, to będziemy mogli się między nimi przełączać.
Natomiast ja chcę mieć właśnie tutaj jak największą bazę listingów,
na których możemy pracować.
I potem tylko właśnie z tej ogromnej bazy, którą sobie za pierwszym razem pobierzemy,
odpowiednio zawężać te wyniki.
Czyli tutaj dodajemy sobie teraz filtret.
I przenosimy nasz pierwszy constrain, czyli kategorii w to miejsce.
I karę tę kategorię.
Oczywiście musimy zaznaczyć ignore icons trains.
Wróćmy. Odświeżamy.
Jak widzisz, teoretycznie nic się nie zmieniło, a tutaj nasz kategorii też
działa, ale zawęża sobie po prostu tą listę już wcześniej pobranych rekordów.
Wracamy więc tutaj.
Przystępujemy do dalszego działania.
Naszym kolejnym krokiem będzie dodanie odpowiedniego workflow w naszym pop up ie
w taki sposób, aby te filtry, które ustawił nasz użytkownik zostały
przekazywane do właśnie paska adresu URL jako parametry.
A więc przechodzę do filters pop up here.
I tutaj po kliknięciu w ten button show results dodajemy sobie workflow.
I tu mam folder o nazwie General.
Chcę go tutaj przenieść.
Dajmy tutaj kolor zielony.
Ok? I ok, dodajmy odpowiednie workflow.
No to oczywiście navigation Go to page.
Nasza strona. Search.
I oczywiście musimy tutaj przekazać odpowiednie parametry.
Natomiast w pierwszej kolejności chciałbym tutaj ustawić te najprostsze.
Czyli będzie to tak.
Liczba łazienek.
Liczba łóżek.
Property type.
Oraz type of place.
To wszystko mamy.
Jak pamiętasz, ustawione w naszych custom statach.
A więc stamtąd będę chciał sobie właśnie pobierać te odpowiednie wartości.
Czyli odnosimy się do naszego całego pop up'u i wyciągamy
sobie właśnie tutaj odpowiednią wartość.
Tutaj będzie to liczba łóżek.
W tym przypadku property type.
I tutaj oczywiście Type of place.
Natomiast jeżeli zrobimy to w taki sposób, no to nie do końca nam to zadziała.
Dlaczego?
Ponieważ te parametry, które tutaj przekażemy, nadpisują tamte,
które mamy już dodane.
Czyli nasze Location check in check out. Liczba gości.
No to nie do końca jest takie rozwiązanie, o jakie nam chodzi.
My chcemy do tych istniejących już parametrów URL dodać właśnie te kolejne.
Jak to zrobić?
Wystarczy tylko, że zaznaczymy sobie ten checkbox, czyli prześlemy zarówno tamte,
jak i te nowe, które tutaj teraz ustawiliśmy.
Wracamy Do podglądu.
Mamy cztery rekordy. To nam się zgadza.
To jest właśnie to ograniczenie tutaj z naszego Navbara, czyli na razie
miasto i po prostu liczba gości.
Otwieram sobie tutaj te filtry, dodaję house, klikam show results.
Ok.
Musimy jeszcze zadbać oczywiście o zamykanie naszego pop upu, Natomiast
przejdźmy sobie do paska adresu i zobaczmy, co się tutaj stało.
Mamy tutaj location, mamy check in, check out, a także
jak widzisz mamy tutaj guest number.
I teraz liczbę łazienek, liczbę łóżek.
Property type, która akurat tutaj ma jakąś wartość, natomiast reszta jest pusta.
Nie musimy się przejmować tym, że przekazujemy tutaj puste wartości tych
parametrów, ponieważ zaraz ustawimy sobie te odpowiednie constrain, a tam oczywiście
zaznaczyliśmy, że te wartości mogą być puste.
Natomiast mógłbyś oczywiście odpowiednio zadbać o dodatkową logikę i sprawdzać, czy
rzeczywiście użytkownik przekazał sobie tam jakiś customstatus.
Jeżeli na przykład rzeczywiście ustawił liczba łazienek, to dopiero
wtedy dodawać go jako parametr.
Natomiast moim zdaniem jest to trochę przerost formy nad treścią i dużo więcej
roboty, a możemy to zrobić właśnie w ten sposób i uzyskać dokładnie taki sam efekt.
A więc skoro przekazujemy te parametry, to teraz w pierwszej kolejności
zamknijmy sobie tutaj ten pop up.
Czyli musimy go najpierw zamknąć, ponieważ go to page musi być zawsze
ostatnią akcją w naszym workflow.
Gdybym to zrobił właśnie na odwrót.
Zobacz, mamy 11 błędów.
Przesuwam to w ten sposób i już mamy 12.
Babel mi krzyczy właśnie tutaj.
Chcemy to mamy.
Jeśli nam właśnie tutaj ten warunek, że goto page has been the last
action in the workflow.
A więc zróbmy to porządnie.
Czyli zamieniamy kolejność.
Najpierw zamykamy, potem przechodzimy do strony search.
Przekazujemy sobie te parametry.
Teraz chcę je pobrać i oczywiście dodać do naszych constrain.
A więc przechodzimy tutaj.
Mamy filtrowanie i dodajemy oczywiście kolejne.
Będzie to tak.
Liczba łazienek.
Liczba łóżek.
Property type.
I type of place.
I oczywiście wyciągamy te z parametrów URL.
To jest to listing numbers i tutaj będzie to po prostu taka skrócona nazwa.
Mogę sobie to Skopiować.
Tutaj.
Liczba łóżek, czyli po prostu parametr o nazwie bed.
Tu będzie to property type.
I tak mamy nazwany nasz parametr.
Tutaj będzie to type of place.
Przejdźmy. Odświeżamy.
I wygląda na to, że coś nam zadziałało.
Z czterech rekordów zrobiło nam się trzy.
Z tego prostego powodu, że tutaj właśnie zadziałał jeden z tych filtrów.
Natomiast żeby Ci to udowodnić, muszę wrócić tutaj na stronę główną i
jeszcze raz sobie tutaj to wyszukać. Czyli np.
New York.
Daty pobytu ośmiu gości.
Klikam search.
Mamy cztery listingi.
Przechodzę do filtrów.
Dajmy ograniczenia do Property type ustawione na House Show Results.
I to rzeczywiście działa.
Natomiast teraz w jaki sposób tutaj przywrócić te poprzednie listingi,
czyli właśnie dodać tą opcję clear all?
W naszym przypadku całość będzie sprowadzała się po prostu do tego, żeby
znowu przejść na stronę Serge i przekazać tylko te bazowe parametry, czyli te, które
właśnie mamy ustawione w na w barze i pozbyć się pozostałych.
A więc możemy sobie wrócić tutaj do edytora.
Do elementu filter pop up klikamy na Clear or, dodajemy nasze workflow.
Wrzućmy je tutaj do General.
Dajmy kolor, na przykład czerwony.
I teraz pierwszym krokiem będzie oczywiście przejście na stronę Search go
to page search i przekazanie właśnie tylko tych podstawowych.
Tym razem już nie zaznaczamy tej opcji.
Chcemy się pozbyć tych właśnie z naszych filtrów i ustawić tylko te,
które tam były, czyli Location.
Check in.
Check out oraz guest number.
Te wartości oczywiście możemy już sobie pobrać z naszego paska URL, ponieważ
mamy tam je wszystkie, czyli URL.
Odpowiednie tutaj wartości.
Tutaj będzie to oczywiście date.
Zmieniamy tylko nazwę i dodajemy jeszcze właśnie tutaj liczbę gości.
W ten sposób przekażemy tylko te, oczywiście podstawowe.
Tutaj nasze parametry pozostałe zostaną usunięte.
Musimy jeszcze oczywiście zadbać o ukrycie naszego tutaj pop up u
i oczywiście przenieść go to page na ostatnie miejsce, czyli na krok numer dwa.
Natomiast musimy zadbać jeszcze o to, żeby przy okazji wyczyścić sobie custom statuy,
które mamy w naszym pop upie, tak żeby użytkownik, gdy ponownie kliknie, miał
je tutaj odpowiednio wyczyszczone.
A więc jeszcze ustawiamy status.
Oczywiście bez literówek.
Nasz element i zerujemy sobie tutaj wszystkie custom staty jakie mieliśmy.
I teraz nasze workflow jest już gotowe.
Przejdźmy odśwież. My.
Nadal mamy tutaj te trzy rekordy, a przynajmniej powinniśmy Tak dalej mamy
to zawężenie do property type ustawione w naszym URL ale mogę przyjść
sobie tutaj kliknąć roll.
Jak widzisz, już nam to teraz odpowiednio przeskoczyło.
Dodatkowo, jeżeli kliknę tutaj i wybiorę np.
Apartment Show results mamy 1.
Mogę wrócić Clear all.
Pokazujemy wszystkie cztery, a tu te staty nam się wyzerowały.
Natomiast teraz tak chciałbym przejść do kolejnego elementu, który chwilowo
pomijaliśmy, czyli do naszego tutaj price range.
Skąd w ogóle przekazywać sobie takie wartości?
Jak pamiętasz, tutaj przekazujemy sobie te staty jako parametry.
Nieważne czy one są uzupełnione, czy są puste.
Natomiast tutaj jeżeli przekazalibyśmy te domyślne wartości 0 i 99.
No to na pewno nam to w jakiś sposób zadziała i zawęzi te wyniki.
A skąd mamy wiedzieć właśnie jaka wartość jest minimalna dla wszystkich naszych
wyszukanych rekordów, A jaka jest maksymalna i co tu w
zasadzie w ogóle ustawić?
Otóż możemy to zrobić w bardzo prosty sposób.
Już Ci pokazuję, jak przechodzimy sobie w pierwszej
kolejności te filtry z pop up retu.
Do całego pop up u.
Mogę przekazać dodatkowe property.
My będziemy potrzebować dwóch.
Jak się domyślasz, będzie to price mean.
Tutaj wybieramy Dynamic value i typ to będzie number.
Klikamy a to on może być opcjonalny.
Tutaj oczywiście możemy jeszcze sobie powybierać te różne wartości.
Ja to zostawię w taki sposób.
I dodam drugi price max.
Tutaj też będzie to number.
I teraz mając te dwie wartości możemy je przekazać sobie tutaj do naszego slidera.
Oczywiście odnieść się w ten sposób, wyciągnąć sobie price mean
i wyciągnąć sobie z tego pracę. Max.
Natomiast w jaki sposób ustawić te wartości?
Oczywiście moglibyśmy to robić na załadowanie się takiego pop up'u i za
każdym razem wyszukiwać nasze listingi i przekazywać tam dokładnie te same tutaj
constraint, które mamy, te podstawowe.
Natomiast moim zdaniem jest to całkowicie bez sensu, ponieważ każde tworzenie pop
upów w tym przypadku generowałoby kolejne zapytanie, a my te dane już mamy, więc
musimy je właśnie tylko sobie tutaj przekazać poprzez naszą stronę.
Search. Namierzmy tutaj nasz pop up.
Jak widzisz teraz mi to wyskoczyło i mogę się odnieść do naszej
tutaj grupy Result Group.
Do wszystkich rekordów.
Z nich wyciągnąć sobie Price i kolejna.
Poszukać tutaj wartości minimalnej, czyli po prostu wybrać mine.
Namierzy nam wszystkie ceny i z tego wybierze cenę minimalną.
I to samo robimy sobie tutaj dla ceny maksymalnej.
Jak widzisz jest to super proste.
Mamy zarówno tutaj Avril jak i min oraz Max.
Zerknijmy czy teraz to działa.
Mamy wszystkie listingi.
Mamy tutaj najniższą wartość równą 77 dolarów.
Najwyższą 500.
Zerknijmy więc, czy rzeczywiście zostało to przekazane.
Wygląda na to, że tak.
Natomiast zobacz, co się stanie, jeżeli tutaj zrobię to teraz.
W ten sposób zawęże sobie na przykład to do apartment.
Ok, wyszukał mi się jeden tutaj ten record.
Klikam filters.
Jak widzisz tutaj od razu też mi się to zmieniło.
Niestety odnosimy się do tej grupy, którą zawężyliśmy i zamiast
przekazywać tam wszystkie ceny, to przekazujemy właśnie to
od razu, tylko zawężone.
No nic, będziemy musieli to odpowiednio właśnie sobie tutaj Dostosować.
Natomiast w pierwszej kolejności oczywiście zadbajmy o to, żeby te
wartości, te z pop upa, które użytkownik tutaj sobie ustawi,
przekazywać jako parametry URL.
I potem właśnie tutaj dodatkowo przekazywać do naszej wyszukiwarki.
A więc wracamy sobie tutaj do naszego workflow, gdzie mamy showresults.
I dodajemy tutaj jeszcze price min.
Oraz.
Price Max.
To będzie tutaj.
Od razu oczywiście odniesienie do naszego slidera czyli price
slider input value min.
To value max, więc w ten sposób najpierw przekazujemy sobie właśnie te wartości.
Teraz musimy je tutaj odpowiednio odebrać.
Czyli przechodzimy tutaj do Resource Depending Group
i dodajemy właśnie te filtry.
Czyli tutaj przepraszam, tutaj musimy odnieść się do Price i odpowiednio
sobie to tutaj dostosować.
Natomiast właśnie zanim to zrobimy, no to znowu ten problem z tymi cenami.
Jak w ogóle chcemy przekazywać te ceny?
No tak jak ci pokazywałem, nie możemy się odnieść do tej właśnie
tutaj naszej grupy z tymi filtrami, ponieważ będzie nam to
właśnie zawężało, pokazywało tylko te, które mamy wyszukane.
Jak więc to obejść?
Ja chciałbym tutaj właśnie poprzez Price min i Price Max przekazywać właśnie tylko
te ceny, które pobraliśmy w pierwszym naszym głównym zapytaniu.
Czyli jeżeli wrócimy tutaj do edytora, to właśnie w tym.
Czyli gdzie mamy tylko City i Get number.
Z tego chciałbym sobie wyciągnąć właśnie Price i Price Max i tam przekazywać.
Tedy użytkownik będzie mógł zjeżdżać dodatkowo zawężać sobie właśnie te
rezultaty na przykład właśnie do Property type, a ceny zawsze będzie miał te główne.
Natomiast jak się teraz odnieść do tego?
No skoro tu mamy jeszcze dodane filtrowanie.
Hmm, bezpośrednio nie uda nam się tego zrobić.
Natomiast uda nam się to zrobić wykorzystując tak zwane
zmienne pomocnicze.
Ja bardzo często z nich korzystam i są niesamowicie przydatne, a ich
ustawienie jest banalnie proste.
To co robimy to dodajemy sobie tutaj pop up, ponieważ nie chcemy ich
nigdzie tutaj pokazywać.
Dodajemy tutaj pop up, nazwijmy go pop up.
Możemy tutaj dać też standardowe style.
Dajmy tutaj row. To nie ma najmniejszego znaczenia.
Dajmy jakiś padding.
I tak to co chcę zrobić teraz, to kopiować sobie to wyrażenie.
Przejść do naszego pop upu.
I dodać tutaj grupę, którą nigdzie nie będziemy wyświetlać, a
będziemy się do niej odnosić.
Ja to zaczynam zawsze takie nazwy od Uutils i potem tutaj będzie
ToListingsrypt Group.
Type of Content to listing.
Wklejam sobie tutaj nasze Expression.
Pozbywam się tego filtrowania i nie chcę go w tym miejscu.
Ja chcę mieć tylko właśnie to pierwsze.
To pierwsze główne wyszukiwanie.
Tutaj nie musimy ustalać żadnych stylów.
Ja to robię najczęściej w taki sposób, że nadaje takiej grupie jakieś określoną
wysokość i szerokość, np.
50 pikseli, żeby łatwo było w to kliknąć.
No i mamy taką pierwszą zmienną pomocniczą, Czyli mamy najpierw właśnie
wyszukane te wszystkie listingi, które tutaj mamy.
Z tego chce sobie wyciągnąć teraz price min i price max, tak żeby te
filtry na mnie nie wpływały.
A więc przechodzę sobie tutaj i zamiast właśnie tutaj tych results RG
mogę się odnieść do JS.
I z tego wyciągnąć sobie właśnie price min i price max.
A skoro mamy to samo wyszukiwanie tutaj i potem dopiero filtrowanie, no to znowu
odnieśmy się do tego w ten sposób.
Tutaj zamiast Searchh spróbujmy sobie to zrobić
tak, żebyśmy nie musieli tego wszystkiego kopiować, ale obawiam się, że
chyba jednak będziemy musieli.
Czyli właśnie żeby się pozbyć tego Searchh.
Tu chcę przekazać niestety właśnie nasze.
Stiles No nic, nie da się tego zrobić w prosty sposób.
Klikamy Clear Expression.
Odnosimy się najpierw do naszej tej grupy pomocniczej.
Z niej wyciągamy sobie właśnie te wszystkie listingi, czyli jest
to odpowiednik naszego właśnie Dual search for.
I teraz dopiero tutaj dodajemy to filtrowanie.
No niestety jest tym sporo roboty, ale właśnie tak działają.
Niestety te zmienne pomocnicze nie zawsze da się tutaj to wszystko fajnie ustawić.
A więc pierwsze było category.
Potem z tego co pamiętam mieliśmy tutaj liczbę łazienek,
liczbę łóżek, property type.
Of place, price min i price max.
Czyli price i price.
IBRIS, ponieważ w taki sposób zaraz się do tego odniesiemy.
No nic, musimy na nowo to poustawiać i cena takiego listingu musi być
większa bądź równa cenie minimalnej.
URL.
Raise mean.
Oraz mniejsza bądź równa cenie maksymalnej, czyli musi się
zawierać właśnie w tym przedziale.
Jeżeli mamy tam przedział od powiedzmy jednego dolara do stu, no to ta cena tutaj
musi być albo minimalnie 1, albo maksymalnie 100.
Czyli wklejam sobie tutaj i to będzie price max.
Oczywiście ignorant i constrain.
A więc tak, tutaj przekazujemy sobie naszą grupę Tipsów.
W ten sposób możemy się do niej odnieść również w tym miejscu, w
którym potem do pop upów.
Wyciągamy sobie tutaj price min i price max.
Zawsze mamy te właściwe ceny, a tutaj dodatkowo jeszcze sobie to ograniczamy.
I zaraz zobaczę, że naprawdę bardzo fajnie nam to zadziała.
Przejdźmy, odświeszmy.
Na początek może wysrujmy sobie tutaj to.
Ok.
Mamy znowu 4 listingi.
Odpowiedni tutaj price range.
Ograniczmy sobie to do House ShowResults.
Mamy teraz 3.
Ale zobacz tutaj nic nam się nie zmieniło.
Dalej mamy wyciągnięte wartości z tych czterech pierwotnych, które
wyszukaliśmy od 77 do 500 dolarów.
Właśnie to był ten jeden z problemów, który na pewno byś natrafił.
Natomiast myślę, że rozumiesz, jak ja sobie rozwiązałem, dlaczego
korzystam z tych irysów.
Dlaczego właśnie one są tak niesamowicie tutaj przydatne?
A jeżeli nadal to stanowi pewien problem, to proszę, przejdź sobie przez
to jeszcze raz, krok po kroku.
Myślę, że na pewno to zrozumiesz.
Natomiast ostatnim krokiem, o który musimy zadbać, to przekazywanie tutaj tych
dodatkowych filtrów odnośnie amenities oraz języków hosta.
Tutaj mamy pewien problem, ponieważ w tym przypadku nie przekazujemy pojedynczą
wartość, tak jak robiliśmy to w tych pozostałych filtrach, na przykład
tutaj liczbę łazienek czy liczbę łóżek.
Tutaj będziemy musieli przekazać już listę, ponieważ użytkownik może zaznaczyć
1, ale może również zaznaczyć dwa elementy.
I żeby to zrobić bezproblemowo, pokażę Ci, jak to należy ustawić.
To jest mój sposób.
Działa przetestowany, ponieważ przekazywanie listy do parametrów sprawia
pewien problem, ponieważ pamiętaj, tam przekazujemy tekst.
A więc jak się do tego odnieść?
Przede wszystkim wracamy sobie do naszego elementu filter re.
Kolejno przechodzimy tutaj do naszego workflow i dodajemy teraz
te kolejne parametry.
Czyli udogodnienia oraz liczba języków jak tutaj ma.
Właśnie bez literówek.
Jak tutaj ma zadziałać? To porównanie.
Chcemy porównać parametr display, czyli tekst na przykład właśnie tam
English albo Polish czy też inne.
Właśnie tutaj to wartość display z naszego optionsetu.
Mamy tutaj na przykład amenities, czyli na przykład właśnie ten tekst, czyli parametr
display do tego tekstu, który właśnie tam przekażemy do naszego parametru URL.
Jak to zrobić?
Tutaj workflow.
Odnosimy się oczywiście do Customstatu.
Do naszego stage o nazwie Amenities.
Teraz z tego chce sobie wyciągnąć id itemdisplay.
To nam da.
Tutaj jak zobaczysz liczbę tekstów mamy to właśnie tu.
Evaluate a list of text.
A my musimy sobie to zamienić na jeden text, jeden prosty text, który najpierw
będziemy mogli właśnie te wartości tutaj do niego przekazać jako jeden ciąg
tekstu, a potem go sobie rozbić.
Wiem, brzmi to dosyć skomplikowanie, ale już pamiętasz robiliśmy coś takiego,
kiedy robiliśmy właśnie format.
AS text.
I tutaj chcę się odnieść do tego tekstu, czyli do tego właśnie
tej wartości display.
I tutaj ten limiter, czyli jakim znacznikiem chcemy to dzielić.
Wykorzystywaliśmy to na stronie Mój profil.
Tam jak pamiętasz, gdzie wyświetlaliśmy przy hoście listę jego języków.
Ja tutaj chcę wstawić taki znacznik, który na pewno nam się nie pojawi nigdzie,
czyli właśnie taki rozgranicznik.
I to samo dokładnie chcę zrobić tutaj dla listy języków.
Czyli odnoszę się tutaj do tego customstatu.
Robię sobie dokładnie to samo.
Teraz przechodzimy do strony Search i mogę Ci pokazać jak to będzie wyglądało.
Skopiujemy sobie na przykład ten tekst i wyciągnijmy sobie
właśnie coś tego parametru.
Tutaj jest to zwykły tekst.
Odświeżymy.
Chodźmy tutaj, wyczyścimy te wszystkie filtry i przekażmy teraz tylko właśnie
jakiś tutaj parametr ten i ten Showresult.
I widzisz, wygląda to w ten sposób.
Mamy tutaj pierwszy display znaczek hash.
Drugi display to jest po prostu jeden długi string, czyli jeden długi ciąg
znaków, a my musimy go sobie teraz kupić na listę, ponieważ w przypadku udogodnień
będziemy porównywać listę do listy.
Czyli też już to wcześniej robiliśmy, czyli tutaj, w naszym filtrowaniu,
nie możemy się do tego odnieść właśnie w ten prosty sposób, ponieważ tutaj
nie mamy contains list, musimy właśnie wykorzystać Advanced i to właśnie teraz
możemy zrobić, czyli this listing a menu This contains List, czyli czy
zawiera listę, którą teraz przekażemy, jeżeli będzie zawierał oba.
2 3 4 5.
Nieważne, ile elementów będzie na drugiej.
Jeśli ta pierwsza lista będzie zawierała wszystkie, no to tutaj otrzymamy.
Jest i ten filtr nam tutaj zadziała.
A więc odnosimy się do URL a.
Tutaj ustawiamy sobie to jako tekst.
Ja sobie pozwolę skopiować nazwę tego parametru, żebym się nie pomylił.
No i teraz będziemy problem, ponieważ to ewoluuje nam do tekstu, a my ten
tekst musimy rozbić na listę.
Jak to zrobić?
Wykorzystujemy tutaj opcję Split buy i podajemy ten dimeter, czyli w tym
przypadku separator pomiędzy poszczególnymi tekstami.
U nas jest to znaczek hasha i tyle.
I teraz już nam tutaj zadziała.
To oczywiście nie zadziała, ponieważ musimy porównać tekst do tekstu
Przepraszam, czyli this listing Amen.
I this is item display.
To nam dopiero da tą listę tekstów, czyli właśnie te wszystkie wartości.
I tutaj dopiero będziemy to porównywać.
Musimy to zrobić w ten sposób.
Przepraszam Cię najmocniej URL.
I teraz dopiero split buy.
Zobaczymy czy teraz działa.
Mamy niebiesko.
To pierwsze daje nam tutaj listę tekstów i to drugie poprzez liczby
też nam daje listę tekstów.
Bardzo podobny warunek, chociaż.
Nieco bardziej skomplikowany, musimy zastosować dla języków.
Pamiętaj, że te warunki Advanced spowodują, że to filtrowanie
będzie znacznie wolniejsze.
Oczywiście czasami nie da się tego uniknąć.
Tak jak widzisz tutaj nie możemy mieć prostego contains list.
Niestety musimy korzystać z Advanced.
Dlatego proszę uważaj na te warunki.
Staraj się je maksymalnie uprościć, tak żeby tutaj nie było jakichś mega
długich właśnie wyrażeń, ponieważ strasznie spowolni Ci to właśnie
filtrowanie i wyszukiwanie rekordów.
U nas drugi wygląda w ten sposób.
Jest listing host i odnosimy się do listy jego języków.
Z niego wyciągamy sobie tutaj display.
I znowu właśnie Contains list.
I teraz parametr URL.
Kopiujemy sobie to.
Przeskoczyłem za daleko.
Tutaj znów wybieram Split Buy i podobnie jak wcześniej wstawiam tutaj znaczek H.
H.
Nie mamy żadnych błędów, nic nam nie świeci na czerwono.
Wygląda na to, że to wszystko działa.
Ale zerknijmy i przetestujmy.
Wyzerujmy najpierw wszystkie istniejące filtry.
Mamy cztery rekordy, a więc zerknijmy, czy nam to zadziałało.
Już wcześniej sprawdzałem i filtr State ID powinny posiadać 2 z nich.
Ok, a year sayid i COVID 19 secure.
Tylko jeden działa.
Wygląda na to, że działa. Czyli zawieramy.
Przekazaliśmy taki tekst, potem rozbiliśmy go po tym znaczniku na listę i porównujemy
właśnie tą listę z listą tych udogodnień, które posiada właśnie ten dany listing.
Dodatkowo ja dobrze pamiętam, że nasz host obsługuje tylko język angielski,
a więc teraz powinniśmy mieć tutaj 2.
2 wyniki. Zgadza się.
Natomiast nie ma na pewno języka polskiego.
Jeżeli dodam teraz Polish, to powinno nam się właśnie tutaj wyzerować te wyniki.
Jak widzisz te filtry działają.
Jeżeli odznaczę sobie Polish.
Angielski i francuski, no to będzie to nam wszystko tutaj odpowiednio działało.
Mogę wybrać clear all i przywrócić sobie właśnie te oryginalne.
Jak widzisz mamy tutaj całkiem zaawansowane operacje,
sporo różnych dziwnych trików, które musieliśmy zastosować,
aby nam to zadziałało.
Tam jest tak jak mówiłem, jest to jedna z trudniejszych lekcji.
Tak więc nie przejmuj się, jeżeli teraz od razu wszystkiego nie zrozumiałeś.
Wróć sobie do tego na spokojnie i przeanalizuj dokładnie
to, co ja tutaj zrobiłem.
Natomiast to, co nam tutaj jeszcze zostało, to wyświetlanie właśnie
tej liczby tutaj wybranych filtrów.
Ja chciałbym Ci to zadać jako pracę domową i możesz do tego podejść
na kilka różnych sposobów.
Możesz na przykład właśnie w pop upie dodać sobie jakiś kolejny state i
sprawdzać, czy użytkownik na przykład wybrał jakieś property type.
Jeżeli tak, to zwiększać go o 1.
Jak wybrał Type of Places to kolejne 1.
I sprawdzać Tak właśnie każdy z tych state of każdy z filtrów i przekazywać to jako
parametr i potem sobie to tutaj wyciągać.
Jest to jedno z rozwiązań.
Drugie to na przykład sprawdzanie tutaj już na stronie search, czy na przykład
właśnie parametr type of place z URL jest pusty.
Jeżeli nie jest, to dajemy 1.
Jeżeli type of PC i property type URL, a nie są puste, no to jest to wartość 2.
I tak dalej, i tak dalej.
To jak do tego podejdziesz to już zależy od Ciebie.
Ja czekam na jakieś fajne rozwiązania.
A teraz już dziękuję Ci za uwagę.
Była to bardzo długa lekcja, a my widzimy się już za moment.