Webflow: Koszyk

0:00Witaj kolejnej lekcji w której chciałbym

0:01omówić koszyk jest to bardzo ważny element e-commerce więc poświęcimy na niego osobną

0:05lekcję do stylu jemy też koszyk który znajduje się w naszej nawigacji.

0:09A jeśli zerka też na to jak wygląda

0:10struktura to został dodany specjalny moduł specjalny komponent kart.

0:15Jeżeli przejdziemy do sekcji dodawania elementów znajduje się tutaj cały dział

0:18e-commerce który zawiera m.in. właśnie koszyk czyli kart.

0:22Mamy też card czyli specyficzny przycisk

0:25który będzie przy naszych produktach i pozwoli dodać taki produkt do koszyka.

0:30Natomiast kart rzeczywiście będzie te wszystkie produkty dodane listy.

0:34Ale też zawiera kilka innych fajnych opcji

0:37więc jeśli już dodamy kartę na stronę możemy przejść do jego ustawień w karcie

0:41link znajdziemy możliwość otworzenia koszyka czyli możemy pokazać

0:46jak ten koszyk się prezentuje po kliknięciu.

0:48Mamy tutaj możliwość umieszczenia go albo z prawej strony albo przykleja do lewej

0:52strony mamy możliwość też zrobienia takiego okna podanego z koszykiem które

0:57pojawia się na środku i przyciągnie całą stronę i mamy w końcu możliwość zrobienia

1:01koszyka który się rozwija tak jak rozwijane menu po kliknięciu.

1:04Więc sporo opcji do dostosowania również

1:07tutaj mamy do dyspozycji opcję wyrównania a także

1:11wybranie tego czy po najechali czy po kliknięciu ma taki koszyk się otwierać i z

1:16jakimi parametrami w końcu w koszyku możemy wybrać podgląd iluś elementów np.

1:22jednego dwóch trzech czy czterech i różne stany oczywiście ten podgląd jest

1:27po to żebyśmy mogli dobrze oscylować koszyk mamy też stan pusty.

1:31Na chwilę obecną jest tutaj tylko

1:33informacja że nie ma żadnych elementów w koszyku a także stan z błędem.

1:37Czyli przykładowo że produkt nie jest już

1:40dłużej dostępny gdybyśmy sobie taką stronę tworzyli np.

1:43za tydzień ten koszyk jest zapamiętywania miasteczku.

1:46Ale jeśli produkt nie jest już dostępny to dostaniemy właśnie taką informację czyli

1:51my będziemy korzystali z tego koszyka który jest zablokowany do prawej strony.

1:55Jest to bardzo podobne rozwiązanie do tego które jest teraz na

1:58stronie KDP i będziemy chcieli trochę go oczywiście do stylu.

2:02Jedna ważna rzecz jeżeli kwitnie ma na baton to zobacz że ten sam Card baton i

2:08schowany może teraz na chwilę kosze na open card.

2:11Sam Card baton też ma pewne dodatkowe opcje m.in. możemy włączyć lub wyłączyć

2:17wyświetlanie informacji o tym ile systemów jest obecnie w koszyku.

2:21Czyli jeżeli mamy trzy rzeczy dodane do

2:23koszyka możemy to pokazać albo ukryć i ten element który odpowiedzialny jest za

2:28wyświetlanie tych elementów jest to kart błąd i on tutaj jest dodane automatycznie

2:32gdybyśmy go usunęli to oczywiście by się nie pojawiał ale możemy właśnie go ukrywać

2:37również z tego poziomu oczywiście możemy go też dostosować bo to jest zwykły zbok

2:41no może nie taki zwykłe bo czerpie właśnie z kolekcji koszyka po to żeby

2:45zaprezentować ilość elementów wyświetlano tutaj.

2:48Mamy też możliwość przejścia do samego

2:50kartką od IT i ukrywania ilości w momencie gdy koszyk będzie pusty.

2:55Czyli jeżeli nie będziemy mieli żadnych

2:57systemów to wtedy w ogóle ten element zostanie ukryty i to dobrze ponieważ w ten

3:02sposób trochę lepiej będzie to wyglądało to lepiej będzie sterowane.

3:07Natomiast w samym przycisku mamy też

3:08możliwość podłączenia takiej specjalnej instrukcji warunkowej gdzie cały przycisk

3:13czyli cały w zasadzie koszyk może być ukryty pod jakimiś konkretnymi warunkami.

3:19Przykładowo jeżeli ilość elementów w koszyku będzie równa zero to możemy wybrać

3:25sejf i wtedy cały koszyk będzie niewidoczny dopiero wtedy gdy dodamy jakiś

3:29element do koszyka on się pojawi w tym określonym miejscu.

3:31Możemy takich warunków dodawać nawet kilka.

3:34Ja wyrzuciłem tam i chcę teraz do stylowo trochę wygląd koszyka i zrobię to na samym

3:40elemencie baton natomiast jeszcze wcześniej dodam tutaj

3:44obrazek wybieram a i stawiamy bata na mecz umieszczonego na samej górze.

3:49Następnie przejdźmy do wybrania obrazka.

3:52I tutaj wygrałem ten plik kart.

3:55Będzie to obrazek z koszykiem natomiast

3:58cały koszyk cały ten baton będzie miał brak czyli przezroczyste tło

4:03wybierzemy dla b Grand opcję transparent i ustalimy też kolor tekstu na kolor MID.

4:11Ten nasz standardowy i dodatkowo jeszcze

4:15chciałbym dodać te obramowanie czyli przejdźmy do sekcji border.

4:19Damy sobie 2 piksele owe obramowanie z

4:21każdej strony i jako kolor wybierzemy taki może jasno szary kolor w ten sposób.

4:27Teraz jeszcze przejdźmy do kart Contact on

4:30ma ustawione kolor tła kolor tekstu na białe.

4:35Też musimy zmienić go na nasz deblu.

4:37Rozmiar tekstu ustawiamy sobie na 16.

4:40On też ma z lewej strony na margines 8 pikseli i taki sam margines moglibyśmy

4:46tutaj stworzyć klasę kart i mecz moglibyśmy dodać 8 pikseli z prawej strony

4:52po to żeby odsunąć koszyk od text blokad kart.

4:54No i teraz wydaje mi się że jest fajnie

4:56aczkolwiek dobrze by było jeszcze zrobić na całym tym.

5:00Na betonie jakieś ciekawe stan Hoover więc możemy przenieść się teraz dostaną Hoover.

5:04I w tym stanie ustawić jako Ground kolor

5:08taki delikatny kolor szary dosłownie ledwie go widać.

5:11Ale jeśli teraz wyjdziemy z tego stanu Hoover to jest widoczne jeszcze jedna

5:16fajna rzecz tutaj przechodzi to domyślnie z tym koszykiem

5:19mamy mianowicie ustawione tranzystory czyli back Ground.

5:22Kolor opasek i kolor automatycznie się

5:25animozje w zasadzie nam chodzi o animacje tego parametru B Grand Color przez 4

5:31400 milisekund czyli cztery dziesiąte sekundy z leasingiem odpowiednim.

5:35Ta właściwość będzie się animowana w związku z tym jeszcze kursor jest

5:39ustawiony na piątek w związku z tym jeżeli teraz podejmiemy to i idziemy to

5:44to nie jest takie zapalenie 0:1 tylko jest taka automatycznie dodana tranzycie i to

5:48jest bardzo fajny sposób na to jak można stan Hoover reanimować i nie musi.

5:52Nie muszą jednocześnie tworzyć własnej

5:54kolejnej interakcji wystarczy przejść tutaj do sekcji tranzystory

5:58i te elementy które się zmieniają na tym przycisku po najechać będziemy musieli

6:02uwzględnić do animowana i wybrać po prostu konkretny czas.

6:06I w ten sposób mamy zrobione ten guzik ale teraz Guzik jeszcze po

6:11kliknięciu ma jakiś konkretny stan który warto by było o niego też zadbać.

6:15Po pierwsze jest tutaj widoczna sekcja

6:18produkt z której będziemy musieli zmienić indeks.

6:21Po drugie mamy koszyk który wygląda już

6:23naprawdę całkiem dobrze ale upewnij się że ten Drop będzie miał

6:28odpowiednio niższy indeks wybierzemy dla niego MSZ indeks zero a na elemencie kart

6:34mamy tutaj możliwość tworzenia sobie koszyka.

6:37Jak widzisz teraz już nie przykrywa on

6:40nie przykrywa naszego koszyka i poza tym wszystkie rzeczy możemy tutaj dostosować.

6:44Czyli mamy cały kontener kart raper i kart

6:48raper zawiera kontener w którym znajduje się napis your card a później mamy klops

6:54baton który jest z prawej strony no i poniżej znajduje się wszystko co mamy

6:59wewnątrz koszyka my to wszystko możemy dostosować wszystko możemy zmieniać zobacz

7:03że zawiera to kartę idziemy z których mecz czyli obrazek jest

7:08dane z produktu jak również wszystkie inne dynamiczne pola czyli przykładowo tekst

7:13który wyświetla nam cenę też bazując na produkcie.

7:16Mamy też kard.

7:17O'Brien list gdzie mamy taki raper w którym znajdują się opcje.

7:22Mamy spis dynamicznie za czytane z naszych

7:24opcji a także kolor więc to też możemy dostosowywać to też możemy zmienić.

7:30Możemy oczywiście stylowo itd więc wszystkie te rzeczy które dostępne są w

7:34ramach naszego produktu również możemy przekazać do koszyka i je tutaj wyświetlać

7:39i mecz też jest fioletowy jak widzisz też jest dumny z produktu.

7:42Jest to ten mecz jeżeli chcielibyśmy go zmienić w jakiś inny obrazek jeżeli byśmy

7:46mieli inne pola też moglibyśmy oczywiście to zrobić.

7:49Tutaj dynamiczne pole które wyświetla nam

7:51informacje o zespole import który wyświetla informacje

7:55o ilości w tym polu można zmienić dane po to żeby np.

7:58te przeliczyć koszyk i zamówić więcej produktów.

8:01To wszystko co zrobił dla nas w sposób automatyczny a my w zasadzie powinniśmy

8:06jedynie pamiętać że bazuje to na kolekcjach gdzie dane dynamiczne są

8:09przekazane na fioletowe i możemy wszystko stylowo z pomocą.

8:13Każdy element jest osobno dostępny możemy go ukryć.

8:17Mamy też taki guzik Romów który pozwala

8:20nam usuwać element z koszyka czy też automatycznie spod pięty.

8:24Jeśli chodzi o samą logikę koszyka nie za

8:27wiele możemy tutaj zmieniać natomiast wszystko to co jest nam tak naprawdę

8:31potrzebne i sam kart raper oraz wszystkie jego elementy też mają tę opcję kondycję.

8:36Bilety zatem można te informacje

8:38wyświetlać w zależności od dowolnych warunków które tutaj wybierzemy

8:42jak również oczywiście można tutaj dodawać rzeczy.

8:45Jeśli dodałbym kolejnego tekst z The

8:47Script mógłbym zaczerpnąć z produktów do sklepu.

8:50Mamy tutaj dostęp do wszystkich pól które są w produkcie czyli np.

8:53numer produktu itd.

8:54Więc to wszystko jest dynamiczne i mamy dostęp do kolekcji.

8:58Myślę że to jest zrozumiałe a jeszcze

9:01poniżej znajdują się opcje płatności jest to specjalny kontener który nazywa się out

9:07action i zawiera komponent ten komponent znajduje się w sekcji a gdy

9:12przejdziemy do sekcji e-commerce mamy tutaj Web Payment oraz PayPal osobno są to

9:16opcje płatności które możemy właśnie tutaj dodać i Web Payment jest odpowiedzialny za

9:22albo płacenie przez przeglądarkę w jego ustawieniach Things.

9:26Możemy wybrać żeby nie wyświetlał tutaj

9:27żadnego przycisku możemy wybrać a tutaj możemy też wybrać obrazek w momencie gdy

9:32ktoś ma zajętą kartę skromnym albo z Microsoft Edge.

9:36Wtedy z pomocą w zasadzie jednego

9:37kliknięcia będzie mógł z pomocą tego guzika zapłacić.

9:41Oczywiście możemy też trochę stylowo ten

9:45element z pomocą stylów aczkolwiek dużo tutaj zmienić nie możemy np.

9:49loga. Tutaj jest charakterystyczne.

9:51Użytkownicy kojarzą i nie mamy możliwości wpływania na to jak to do końca wygląda.

9:56Podobnie jest z Paulem aczkolwiek niektóre opcje tak jak wspomniałem.

9:59Stosować w przypadku Pitbulla który też jest osobnym modułem tutaj w sekcji

10:04e-commerce mamy nawet więcej opcji możemy wybrać leje Every skalne lub horyzont ale

10:10także w aucie skalnym automatycznie mamy taką animację i tutaj

10:14możemy jeszcze wybrać kolor tego przycisku np.

10:17wybrać sobie kolor niebieski.

10:19Możemy zdecydować czy ma być zaokrąglone czy kwadratowe i jeszcze zmienić label np.

10:24na PayPal.

10:25I to są w zasadzie te opcje Custom który mamy.

10:28Poza tym możemy to jeszcze trochę stylowo.

10:30Natomiast naturalnie oczywiście jeżeli nie wspieramy tych płatności to możemy się ich

10:35kompletnie pozbyć czyli zwyczajnie po prostu usunąć.

10:39Zarówno jeden i drugi element i wtedy

10:41będziemy mogli tylko przejść do podsumowania płatności.

10:44Continuum czeka aut gdzie będziemy mogli wypełnić nasze dane wypełnić dane karty.

10:49Oczywiście będziemy tam też mogli wstawić przyciski np.

10:52Apple Pay czy PayPal a

10:53co wy na tę operację i pokażę ci jeszcze później jak można skonfigurować płatności

10:58oczywiście na koniec będziemy podpisać Stripes oraz PayPal a więc pokażę ci jak

11:02to technicznie zrobić a teraz koncentrujemy się na stylach i style.

11:05Ja zostawię uważam że nie ma sensu

11:08ich modyfikować bo wszystko wygląda naprawdę bardzo fajnie.

11:11Pamiętaj proszę jednak o tym że zawsze jak

11:14robisz koszyk to poza tymi ustawieniami które Ci pokazałem pamiętaj żeby przejrzeć

11:18Empire State czyli zobaczyć czy ten pusty koszyk wygląda OK.

11:21No i jeszcze mamy stan error gdzie możemy dostosować to powiadomienie z błędem.

11:26Dla mnie jest w porządku to też nie jest kurs w którym nastawiamy się na

11:30jakieś grzebanie w stylach ponieważ robiliśmy to w pozostałych kursach.

11:33W związku z tym można powiedzieć że nasza nawigacja jest gotowa czyli teraz Jeśli

11:38poszedłbym przykładowo do strony Home i podejrzewał jej działania w ten sposób

11:42mogę kliknąć na produkt i stąd już przeniosła się do odpowiedniego działo.

11:45Mamy jeszcze nie te statyczne linki ale to jest też OK.

11:48Natomiast koszyk działa i teraz.

11:50Jeśli będę zmieniał zdanie np.

11:52wartości nie będzie przeliczane a cena to dlatego że musielibyśmy opublikować tą

11:56stronę w module e-commerce to samo nie będzie działał ten przycisk frejmów.

12:00Ale generalnie to nie jest po to tutaj

12:02powinniśmy zobaczyć to sterowanie dlatego też łatwo wyświetla.

12:05Domyślnie te trzy czy cztery wyniki które możemy ustalić w momencie gdy bierzemy pod

12:10lupę też nic się nie stanie dostaniemy tylko informację że w tym trybie nie

12:14będziemy mogli podejrzeć tego jak działa ta płatność natomiast jeśli wybierzemy

12:17Continuum to przeniesiemy się do strony czekały do strony w której mamy wszystkie

12:23rzeczy do wypełnienia związane z podsumowaniem zamówienia

12:26i te strony czekał to pokaże Ci jeszcze w kolejnej lekcji.

12:29Do usłyszenia.