Webflow: Strony Kategorii

0:00Cześć Witaj w kolejnej lekcji.

0:01Można powiedzieć że nasza główna strona jest już praktycznie gotowa.

0:05Wygląda całkiem dobrze moglibyśmy dopracować ją gdzieniegdzie ale tutaj nie

0:10mamy takiego głównego celu aby wszystko wyglądało idealnie.

0:13Naszym zadaniem jest opanować dobrze e-commerce.

0:15Ważną funkcjonalnością którą będziemy musieli dorobić jest zapis na nim z Letter

0:20w momencie gdy ktoś poda swój adres e-mail i wybierze przycisk syna.

0:24Będę chciał aby dopisać go do naszej listy

0:26na nim także ale zrobimy to w ostatniej części kursu tam gdzie będę pokazywał ci

0:30też maile transakcyjne wysłane z naszego systemu.

0:33Teraz natomiast koncentrujemy się na stronach e-commerce.

0:36Są tutaj dwie strony które musimy oscylować zajmowaliśmy się już czekałem

0:40ale teraz przyszedł czas na strony produktowe a także stronę kategorii.

0:44W momencie gdy klikamy w rozwijane menu lub też z dowolnej sekcji tutaj na

0:49przykład przejdziemy do New Orleans albo do produktów typu bluzy Chris Jump.

0:55To wtedy automatycznie wyląduje na stronie produktowej ta strona produktową jest już

1:00wykonana w ramach szablonu i pozwala nam przełączać się pomiędzy produktami jak

1:05również wyświetlać wszystkie produkty które znajdują się na naszej stronie.

1:09Wygląda ona całkiem nieźle ale jest trochę

1:11niespójna z naszym autem więc odrobinę poprawimy jej wygląd.

1:14Natomiast sama funkcja zobacz że w zasadzie jest już gotowa out of the box

1:19mamy po kliknięciu w produkt jeszcze stronę drugą produktową.

1:23Tutaj również stosujemy trochę wygląd ale

1:25także nieznacznie bo w zasadzie pokrywa się ona w dużej części z naszym projektem.

1:31Więc przejdźmy teraz może do strony kategorii.

1:33Na początku i tutaj możemy przełączać się pomiędzy kategoriami które mamy

1:37zdefiniowane i są oczywiście dynamicznie wyświetlane.

1:40Produkty te które należą do danej kategorii.

1:42Ta strona ma tę zaletę ponieważ jest

1:44fioletowy to że mamy dostęp bezpośrednio do wszystkich rzeczy dynamicznych które

1:49znajdują się w kolekcji kategorii zobacz w ustawienia dla H1 np.

1:53możemy pobrać tekst dla kategorii i wybrać sobie tutaj odpowiednie pole.

1:57Mamy także tutaj już zdefiniowane jakieś papiery właśnie np.

2:01z kolekcji i kategorii linków do

2:04odpowiednich kategorii dynamicznie więc fajnie by było z tego skorzystać.

2:08Na razie zrobimy to w ten sposób że ten Harding nie będzie nam potrzebny.

2:13Będę chciał podzielić leja na dwie części

2:15po lewej stronie zrobimy menu i po prawej stronie zrobimy wyświetlanie produktów.

2:20Może przejdźmy do sekcji New która listę

2:22więcej produktów tak abyśmy mogli pracować na lepszym widoku.

2:26I mamy taką strukturę gdzie mamy dwie

2:28sekcje w pierwsza to jest właśnie z menu druga to jest sekcja z produktami.

2:32Możemy nad tym pracować ale potrzebujemy jeszcze dodatkowych elementów.

2:36Proponuję umieścić tutaj sekcję wewnątrz

2:39sekcji wyrzucić kontener i ten kontener do.

2:42Tak jak zwykle to robiliśmy określając dla niego max czyli 1200 46 w tym przypadku i

2:49teraz do tej sekcji i do tego kontenera po prostu wrzucić.

2:53Te dwie sekcje które tutaj już zostały przygotowane.

2:56Natomiast po drodze chciałbym żebyśmy

2:58zrobili jeszcze w zasadzie jeden kontener na tę sekcję i będzie to grid które

3:02pozwoli nam je rozłożyć czyli umieścić tutaj sobie leje out GRID.

3:06Możemy to zrobić właśnie w ten sposób

3:08czy automatycznie jest dodawane element który ustawiony ma display na GRID

3:13my możemy do niego wciągnąć te dwie sekcje wspomniane.

3:18I teraz zmienimy ich kolejność.

3:21One rozkładają się już dobrze do lewej do prawej aczkolwiek my chcielibyśmy zmienić

3:26parametry tak wygląda w ten sposób że zostawimy jedną frakcję.

3:30Natomiast to znacznie zmniejszymy np. 0 25.

3:34I tutaj problem z

3:36szerokością polega na tym że mamy jakieś stałe szerokości ustawiona na te elementy.

3:40Mamy w ogóle tutaj taką dosyć rozbudowaną strukturę czyli jest nasza sekcja ale w

3:44środku znajduje się kontener i jeszcze tor kategorii Trap.

3:47W zasadzie moglibyśmy to przerzucić bezpośrednio nawet na GRID.

3:51W ten sposób i usuwamy tą całą sekcję ona nie jest potrzebna i z kategorii rap.

3:56Zobaczmy jak jest skonstruowane bo tutaj

3:59ma różne parametry Display zmienimy z Flex na po prostu blok.

4:02Na razie żeby ułożyć te elementy jeden po drugim na samej liście.

4:07Tutaj też chciałbym zmienić display na

4:10blok też łączymy to jedno po drugim już wygląda to dużo lepiej.

4:13Czyli dwie szybkie zmiany i mamy to prawie gotowe.

4:17Tutaj jest jakiś jeszcze dodane ujemny margines.

4:19W zasadzie zależy mi na tym żeby go

4:21zresetować zatem klikamy po prostu na tablicę i zostało to zarejestrowane.

4:27Margines od góry mamy 25.

4:29To co teraz chciałbym zrobić to wstawić tutaj jeszcze do kategorii rap 1 text

4:34Block i wpisać że są to moje kategorie czyli kategorie.

4:39Następnie przeniesiemy go tu na górę i dodamy mu klasę Label.

4:45Mamy 25 pikseli marginesu tutaj więc będzie to wyglądać już dobrze.

4:49Następny element chcemy dodać do sekcji ze zdjęciami.

4:53Będzie to raper który będzie zawierał informacje o konkretnej kategorii czyli

4:58możemy wrzucić zwykłego bloga a do niego do środka wrzucić 2 klasyczne

5:03elementy czyli Harding a następnie paragraf.

5:07Teraz jeśli chodzi o hejt może wróćmy ten element od razu tam gdzie powinien być

5:11czyli na górę i sam Block możemy nazwać kategorię R.

5:18Raper.

5:20Będziemy go chcieli stylowo ale zanim to

5:23zrobi jeszcze u mnie jeszcze w Herning 1 odpowiednie dane czyli weźmiemy tekst z

5:28obecnej kategorii i będzie to jej nazwa a następnie w akapicie weźmiemy sobie The

5:34Script czyli opis tej konkretnej kategorii.

5:37No i teraz jeszcze kategorie raper

5:39ustalamy dla niego odpowiednie style czyli wycen tekst.

5:43Następnie ustala dla niego back Ground Color.

5:45Tutaj znajduje się kolor którego

5:47chcielibyśmy użyć czyli kolor który jest również u nas myślę że zastosujemy go

5:52jeszcze zróbmy zaokrągleniu dziś Border 12 a następnie link zrobimy jeden pośrodku.

6:00W ten sposób

6:01około 32 pikseli było w projekcie a następnie zrobimy sobie jeszcze margines

6:06od dołu tak żeby odróżnić te kafelki od naszego tytułu.

6:11I taka sama.

6:12Te kafelki chciałbym jeszcze zmodyfikować

6:14w taki sposób jak widzisz one teraz pojawiają się na wycenę środkową.

6:19Tutaj mamy w kolekcji raptem

6:21fajna Center chciałbym zrobić to na start i już będą dobrze się pokazywać.

6:25Teraz nawet jeżeli będzie jeden obrazek tutaj tylko czy jeden produkt to nie

6:29będzie na środku tylko będzie fajnie wyrównany do lewej

6:33to już mi się podoba i zobacz że poświęciliśmy naprawdę dosłownie chwilę na

6:36to żeby dostosować tą stronę do naszych potrzeb.

6:39I w sumie mam taki pomysł żeby całe to menu zostało zablokowane np.

6:43wersja jest pasywna i tutaj będziemy mieli wiele produktów na tablecie.

6:47Fajnie by było żeby to było w jednym miejscu.

6:50I teraz przejdźmy do kategorii rap tutaj

6:53mamy osobno te elementy potrzebowali byśmy jeszcze jakiś jeden

6:56techniczny GIF który by to wszystko spisał razem.

6:59Czyli w środku właśnie w kategorii rap wrzucili byśmy label Lee i cała kolekcja

7:07list raper to może być kategoria zmieni możemy na niego dać pozycje stoliki i

7:13odsunąć go na przykład o 40 pikseli od górnej krawędzi czyli jak przejdziemy.

7:18Zobacz jak to będzie wyglądało przejdziemy na 40 pikseli od góry to on

7:22się po prostu zablokuje i będzie sobie jeździł.

7:25Tylko że nasz mały błąd jest taki że zrobiliśmy to tylko w wariancie tablet

7:28owym jeżeli chcielibyśmy mieć to dodatkowo na desktop.

7:30To przejdźmy na desktop.

7:32Upewnij się że na kategorię my też mamy wrzucono pozycję

7:37styki i też to jest 40 więc warto by było to w pierwszej kolejności wrzucić na

7:42desktop to byłoby wszędzie dziedziczone natomiast już w tych

7:45wariantach mobilnych wydaje mi się że to nie jest dobry pomysł.

7:48Czyli wybierzmy tutaj pozycję statek dla Lancer portret i zrobimy to w ten sposób

7:53że cały GRID zmienimy go także usunie tę jedną część lewą.

7:59Po to żeby menu znalazło się na górze i w zasadzie tyle jeżeli chcielibyśmy je

8:04ewentualnie wyrównać to pamiętaj proszę o tym że po pierwsze Grid ma swoje

8:07ustawienia wyrównania ale nie chcemy cenzurować wszystkich elementów.

8:11Chcielibyśmy w centra tylko to store kategorii rap ponieważ jest to dziecko

8:14grilla bezpośrednie to dzieci grilla również mają.

8:17I możemy bez problemu sobie takie dziecko

8:20wyrównać do środka i wydaje mi się że to jest fajne.

8:23Na tym mobilnym aucie będzie tak wyglądało.

8:27Tutaj moglibyśmy ewentualnie też wydaje mi

8:30się że te marginesu są nieco za duża to jeszcze jest wygląda to ok

8:34ale w tym wariancie mobilnym może byśmy trochę zmienili parking.

8:39Parking jest za duży na całym tym kontenerze np.

8:43zmniejszymy go tam i tak jest dodane ekstra 20 spadek więc jest OK.

8:46Jeżeli chcemy zmienić np.

8:48produkt czy rap i trochę zmniejszyć to

8:50możemy to zrobić możemy dać combo klasę żeby to było tylko na stronie kategorii.

8:53Generalnie oczywiście mamy tutaj wszystkie możliwości edycji jakie są w łeb.

8:58Moim zdaniem tak jest w porządku więc wróćmy do tej wersji sklepowej.

9:02Można uznać że w zasadzie stronę kategorii mamy gotową z jednym małym wyjątkiem

9:06zobacz że znajduje się tutaj poza Collection i raperem ten link o produkt.

9:11Dlaczego tak jest. No bo nie mamy takiej kategorii która

9:14wyświetla nam wszystko mamy co prawda która w jakiś sposób to reguluje ale

9:17produkcje zrobione w tym przebrania zupełnie inaczej mianowicie zamiast

9:22kategorii jest zrobiona po prostu strona produkt i ten link OL product linku do tej

9:26strony zobacz że jest ona klonem tego co mieliśmy wcześniej

9:30aczkolwiek jest osobną stroną stroną produkcji więc musielibyśmy jeżeli

9:34chcielibyśmy zachować spójność po prostu przenieść tę kategorię tablet wiec jeżeli

9:39chcielibyśmy mieć stronę z wszystkimi produktami ta do której która jest

9:42publikowana to musielibyśmy do niej przerzucić te wszystkie rzeczy

9:46i to nie byłoby aż tak proste dlatego że np.

9:49niektóre rzeczy stąd czyli happening nasz

9:52i paragraf korzystają z danych ze strony kategorii czyli w sumie

9:57to co moglibyśmy zrobić chyba jakbyśmy pozbyli się tego kategorii Hero raper

10:01tylko na chwilę kupowali tą sekcję to zobaczymy czy uda mi się ją wstawić do

10:05produktów usunął sobie sekcję pod nawigacją i ok udało mi się w związku z

10:09tym będzie to działać poprawnie bo mamy też kategorię i odpowiednie linki i

10:14kolekcje No będę musiał jedynie odtworzyć ten element tą sekcję którą mieliśmy

10:20wcześniej ze nagłówki em ale myślę że można to bardzo szybko łatwo tutaj zrobić.

10:25W środku był holding i jeszcze był paragraf.

10:29Następnie przejdźmy do sterowania tego sam blog miał na daną klasę.

10:34Z tego co pamiętam kategorię R raper

10:38i jeśli z niej skorzystamy to już będziemy w domu.

10:41Możemy to teraz przenieść na samą górę nie

10:45tylko tej sekcji o właśnie w to miejsce mając taki raper.

10:49Jeszcze raz przeniesiemy go do kategorii

10:51pokażę ci jaka jest różnica bo tworzymy go jeszcze raz.

10:55Jeżeli go wrzuca do tej sekcji i wstawia na górę to tutaj na stronie kategorii

10:59ponieważ jest fioletowy bardzo łatwo możemy w ustawieniach wykorzystać tekst z

11:04kategorii czyli dać nazwę a tutaj jako tekst z kategorii.

11:08Natomiast na tej stronie nie mamy tych

11:09danych ale też tych danych w tym momencie nie będziemy potrzebować ponieważ tutaj są

11:13wszystkie nasze produkty więc na sztywno po prostu zrobimy o produkt.

11:17Gdybyśmy tych danych potrzebowali

11:18oczywiście możemy sobie wstawić kolekcję z opcji łeb Flow jeśli wybierzemy a to

11:23możemy wstawić Collection listę dodać dynamiczne dane

11:26ale tutaj wystarczy że piszemy o product zestawie może jakieś zwykłe remiksów.

11:32No i teraz mamy już dobrze działające

11:34czyli stronę produkt która link oszukuje tutaj.

11:38Tutaj będziemy mieli stronę New Jam.

11:40Wszystkie dane są dynamiczne a gdy

11:42przejdziemy do All produkt to wygląda to tak samo.

11:45Ale tak naprawdę jest zupełnie inną stroną nie powiązaną z kolekcją.

11:50No i super udało nam się zrobić tę stronę teraz będziemy chcieli przejść do

11:53omówienia strony produktu i przygotowania dla niej szablonu.

11:56Do usłyszenia.