Webflow: Strony Produktu cz. 2

0:00Cześć Witaj w kolejnej lekcji gdzie zaczynamy dokładnie w miejscu gdzie

0:03skończyliśmy poprzednio czyli kontynuujemy pracę z naszą stroną produkcji Temple.

0:07Teraz zajmiemy się dopasowanie przycisku

0:10Dodaj do koszyka i pokaże ci jak wygląda ta sekcja a także ją postulujemy.

0:14No dobrze to teraz daj męczyć i w ogóle co

0:17to jest to sam produkt Information czyli informację o tym jaka jest waga produktu.

0:23Te teksty bloki które w tym momencie są

0:25ukryte ale gdybyśmy mieli przekazane w produkcie informację czyli długość wymiary

0:30szerokość i wysokość to byłoby tutaj wyświetlane.

0:34Problem polega na tym że cały ten list w zasadzie jest nam niepotrzebny.

0:40Jeżeli nasze produkty miałyby rzeczywiście te opisy

0:43to też w sumie nie chcielibyśmy tego wyświetlać w taki sposób a jedynie ukrywać

0:46tekst bloków które zawierają właściwe liczby tylko warto by było przejść do

0:51ustawień a następnie skorzystać z sekcji City.

0:54Więc warto zamiast usuwać ten list po prostu zrobić tutaj warunkową widoczność.

1:00W momencie kiedy te dane są wypełnione i tutaj szukamy różnych danych i mamy np.

1:05łaty with listę leków.

1:07Więc jeśli mielibyśmy jedną z tych danych

1:10szerokość wysokość długość to moglibyśmy wyświetlać całą tą listę.

1:15Czyli jeżeli Unit w ogóle jest wypełnione czyli będziemy to pokazywać

1:21tylko wtedy jeżeli to jest setki i set jest wypełniona wybieram polecenie save.

1:26I w tym momencie zniknęło ponieważ rzeczywiście tam te dane nie są wypełnione

1:31i to samo zrobimy z tym drugim hitem się na bilety.

1:34W tym przypadku chodzi nam o wagę produktu czyli VAT jeżeli VAT jest wypełniony czyli

1:40is set to dopiero wtedy będziemy to pokazywać.

1:42Jeśli nie jest wypełnione zniknęło. Następna rzecz.

1:45Tutaj mamy jakiś filtr label który jest

1:48nam niepotrzebny mogę go spokojnie usunąć ale ogólnie bardziej interesujące jest w

1:52zasadzie to co to w ogóle jest za komponenty czyli znajdziemy tutaj coś

1:56takiego jak obszerna lista i skąd się wzięła ta lista.

1:59Czy ona jest dostępna tutaj.

2:00Otóż lista jest elementem czegoś takiego jak ADD Card.

2:05Gdybyśmy to chwilowo usunęli to jeżeli

2:08przejdziemy do dodawania a będziemy mieli tutaj w sekcji e-commerce poza tymi już

2:12elementami które wyjaśniliśmy coś takiego jak Act card czyli przycisk Dodaj do

2:16koszyka okazuje się jednak że to nie jest sam przycisk.

2:20Czyli poza tym że dodajemy tutaj taki

2:23przycisk on trafił do naszego lidera to w środku znajduje się specyficzna

2:27konstrukcja gdzie mamy właśnie tą obszerną listę mamy zresztą tutaj.

2:32The Old State i drugi stan to jest stan

2:35out of stock czyli informacja o tym że produktu nie ma obecnie na magazynie.

2:41Jeżeli monitorujemy stan magazynowe to w

2:44momencie gdy produkcja na magazynie skończy zero to będzie wyświetlana na

2:49stronie produktu właśnie taka informacja którą oczywiście możemy stabilizować.

2:53Możemy napisać że oczekujemy dostawy za

2:55tyle i tyle i ogólnie bardzo fajna opcja jeśli chodzi o samą listę no to mamy tutaj

3:00możliwość wyboru opcji które są przyporządkować je do naszego produktu

3:05automatycznie zaciągane a lista opcji produktu przypominam że w produktach.

3:10Jeżeli przejdziemy do opisu jakiegoś

3:12produktu mamy zdefiniowane te opcje są dla nas dwie opcje.

3:16Kolor prawda a więc to właśnie te opcje

3:18są tutaj dostępne jako taka specjalna sub kolekcja produkt która znajduje się w tym

3:24specyficznym tworzę artu kart czyli przycisku wydania koszyka no i teraz

3:29wszystkie te opcje domyślnie są dostępne czyli zarówno single kolor.

3:33Możemy to naturalnie sobie stylowo.

3:35Możemy to zmieniać mamy też możliwość

3:37wybrania słowa które będzie tutaj przed nazwą tej opcji czyli np.

3:42moglibyśmy zmienić Select na plus.

3:44W ten sposób już sam kolor.

3:46Co więcej możemy też wskazać w samych

3:49preferencjach obszedł listę żeby był zaznaczony wcześniej ten domyślny wariant.

3:54Czyli jeżeli wybierzemy jest to tutaj na liście zostanie zaznaczony wariant

3:58domyślne lub pierwszy który jest dostępny w kontekście skrzyżowania różnych opcji i

4:03w połączeniu z naszym tokiem więc jest to w miarę inteligentnie tzn.

4:06Następnie zmienimy trochę sterowanie czyli

4:09Select Field zaznaczył a następnie przejdę do opcji może dajmy do niego klasę.

4:14Będzie to obszar Select

4:17i teraz celujemy w ten sposób że zmienimy na pewno kolor tła na kolor biały.

4:22Chciałbym też zgodnie z projektem aby

4:25miało to pole wysokość 48 i zrobimy też na sztywno szerokość na 200 pikseli.

4:30Dodatkowo dodam 12 pikseli marginesu z prawej strony ponieważ chciałbym całą

4:34listę ustawić na Xboksa tak żeby te elementy znalazły się obok siebie.

4:38No i to wygląda już OK.

4:40Błąd Citi czyli ilość którą wybieramy

4:43w zależności od wybranej ilości zostanie przeliczone koszyk i co ważne też Jeżeli

4:47podamy kontakt czyli ilość większą niż mamy w magazynie na stoku.

4:51Wtedy dostaniemy odpowiednią informację tutaj mamy poniżej dwa przyciski a kart

4:56oraz b oczywiście różnią się one tym że albo możemy dodać do.

5:00Nasze zakupy albo możemy przejść od razu

5:02do strony płatności za ten jeden konkretny produkt.

5:04W naszym przypadku przycisk nam nie będzie potrzebny.

5:07Skorzystamy tylko z kart i dodamy do niego naszą standardową prasę baton.

5:12żeby go przez celować jeszcze będę potrzebował umieścić ten

5:16przycisk po prawej stronie od Quantitative w związku z tym dodał tutaj taki

5:20techniczny The Block który zamknie kontakty oraz Buttona.

5:27I możemy go nazwać ba baton Section może.

5:39Może nadajemy mu nazwę kard.

5:42.

5:43I wybierzmy dla niego.

5:47Może dajmy mu szansę a tu karty Section

5:53i teraz ustaw się dla niego flag Xboksa i

5:56będziemy chcieli też trochę to przez tyle samo kontakty zmienimy w taki sposób że z

6:00resetu jemy ten margines od dołu ustawiamy dla niego jeśli ustawi teraz

6:05wysokość auto to powinno się to automatycznie do wysokości kontenera

6:08dostosować czyli również do wysokości przycisku.

6:11Ustalmy też margines z prawej strony

6:13podobnie jak na tych polach na 12 jeszcze szerokość może zmieniać na 80

6:18będzie trochę szersze to pole wygląda dobrze zróbmy też kolor wypełnienie białe

6:23tak jak mieliśmy tutaj i myślę że mamy to zrobione teraz

6:26zauważyłem że mam tutaj jeszcze jakieś niepotrzebne DVD czy jakąś taką kreskę.

6:30Zobaczymy bo ona pojawia się też tutaj.

6:33W zasadzie to nie wiem może to wynika z

6:35jakiegoś błędu ale tutaj też jest taki DVD w którym znajduje się herb nim ten ten

6:41guzik tu kartę może przerzucić ten guzik poza DVD.

6:45Sam lider ten możemy usunąć i ten może

6:49zostać aczkolwiek fajnie by było zmienić jego kolor.

6:52Może ten kolor jest trochę zbyt ciemny.

6:54To jest akurat kolor biały

6:57smok i będzie teraz tak delikatnie widoczny ok to jest w porządku.

7:00Można więc założyć że tą sekcję mamy gotową zanim dokończy stronę produktu.

7:04Chciałbym na niej zrobić jeszcze jedną

7:06fajną rzecz mianowicie pożyczkę ze strony Home choć w zasadzie

7:10nawet nie musiałbym tego robić w ten sposób.

7:12Tutaj jest taka kolekcja z kafelki i

7:14chciałbym jej użyć i wklej je całą tę kolekcję na produkt stempla.

7:18Co prawda produkt stempla jest na fioletowy więc zawiera wszystkie dane

7:21produktów więc w sumie nie musiałbym korzystać z kolekcji mogłyby rzucić

7:24kafelki podpiąć pod dane ale tak nie jest łatwe.

7:27A taką kolekcję też możemy tutaj bez problemu wrzucić.

7:30Ona jest powiązana z produktami ja tymczasem ze strony Home pożycza sobie

7:34jeszcze ten cały kontener z nagłówki i też wrzuca to na produkt tablet.

7:39Tym razem nad

7:42tą metodą body może ale przesunie się nad Collection list raper i napiszemy że

7:49produkt ma tę ligę i zrobimy tutaj produkty w tej kolekcji

7:54które są powiązane z tym wyświetlaczem obecnie produktem.

7:58Teraz to czego byśmy nie mogli zrobić na stronie głównej mając taką kolekcję a

8:02możemy zrobić to na stronie produkcji Apple.

8:04To jest pewien kontekst produktowe czyli

8:07tutaj Apple doskonale wie jaki produkt przeglądałem.

8:11Czy to jest serwer czy np.

8:13adres datę mi i ponieważ wielu to wie to

8:16my możemy w ustawieniach tego kolejny list rapera wybierzmy wszystkie ustawienia

8:21możemy sobie wybrać filtrowanie i będziemy chcieli trenować i pokazać tylko te

8:26powiązane produkty które mają te same kategorie czyli te same kategorie które ma

8:31product Dress nad tymi które oglądamy i czyli kontakty zawiera.

8:36I tutaj mamy właśnie tą magię strony produktowej gdzie z piorunem mamy dowolną

8:41kategorię obecnego produktu czyli produkt który jest bieżąco wyświetlany z datami.

8:46Jeżeli miałby przypisane np.

8:475 kategorii to moglibyśmy dzięki temu

8:50wybrać wszystkie inne produkty które mają dowolną z pięciu tych kategorii.

8:54Oczywiście możemy wybrać tylko bluzy tylko tutaj itd.

8:58Ale w naszym przypadku to jest naprawdę

8:59fajna opcja która pozwoli dynamicznie dopasować i dodać produkty które być może

9:05zainteresują osoby kupujące ok i w ten prosty sposób nasza strona produktową jest

9:10gotowa jeszcze jedną rzecz mają ci pokazać jeśli chodzi o kart baton ma on dwa stany

9:15jest to Die Welt tekst i Waiting Dexter w momencie gdy ktoś klik nie dodawanie do

9:20koszyka to on zmienia się i możemy tutaj zdefiniować sobie treść np.

9:24ring Card możemy to zmienić w tym momencie

9:26produkt jest dodawany do koszyka i jest informowane o tym użytkownik więc to jest

9:30fajne bo pokazuje ci że te dwie opcje tutaj są.

9:34Natomiast to co jest jakby super fajne w stronach produktowych to jest to że łeb

9:39będzie dynamicznie pozwalał nam pokazać odpowiednie opcje.

9:43Przykładowo gdybyśmy np.

9:45wybrali sobie jakąś inną kategorię która nie ma

9:48jednej z tych opcji przypisanych czyli na przykład możemy tylko wybrać kolor

9:52chociaż powinniśmy mieć tutaj rozmiar ale zobacz że jest to dynamicznie dostosowane.

9:56Więc jeżeli byśmy wybrali coś to tutaj w podgląd nie wybierając nawet

10:03rozmiar też automatycznie będzie limitowane te opcje które są dostępne dla

10:08danego rozmiaru przykładowo nie mamy już na stoku sukienki w rozmiarze M i w

10:12kolorze zielonym możemy tylko wybrać zieloną albo fioletowe.

10:15Jeżeli byśmy tego nie zrobili to wtedy nie

10:18da się dodać do koszyka mamy informację o realizacji.

10:20Jeśli to zrobimy i np.

10:23przekroczymy tutaj kontakt które jest

10:25dostępne to też UEFA nie pozwoli nam to akurat przez to że jesteśmy w piwie.

10:29Może nie ma pod ręką tej bazy nie może tego zmierzyć ale generalnie też nie

10:33pozwoli nam tego dodać do koszyka więc tutaj wszystkie opcje będą przez łeb

10:37dostosowane dynamicznie a nam udało się zrobić fajną stronę produktową na której

10:42wydaliśmy zakładki zrobiliśmy dodatkową galerię z boksem z dynamicznymi zdjęciami.

10:47Obserwowaliśmy rozmaite opcje zostawiliśmy

10:49te które nam są potrzebne w kontekście dodawania do koszyka i jeszcze dawaliśmy

10:53sekcję która pozwala przeglądać powiązane produkty.

10:56Ostatnia rzecz która została nam do zrobienia to wariant response.

10:59Możemy zobaczyć jak to wygląda nie za

11:01dobrze a więc na pewno trzeba skoncentrować się na

11:04dostosowaniu wariantów pasywnych w pierwszej kolejności tablet.

11:08Myślę że już w tym widoku warto by było

11:10ułożyć te elementy pionowo czyli przejść do naszego GRID a może zmienić mu od razu

11:15nazwę klasy może zrobię to w widoku tutaj product GRID a następnie

11:20przeniesiemy się do widoku tablet owego w ten Grid i potrzeba usunąć jedną kolumnę

11:26a to co możemy zrobić żeby nie zmieniać kolejności elementów w HTML u bo chcemy

11:31zdjęcie umieścić pod opisem to możemy przejść do takiego dziecka danego GRID.

11:35Mamy tutaj możliwość

11:37zmiany pozycji jeżeli mamy pozycję auto to elementy będą rozmieszczone

11:42w każdym kolejnym bloku tak jak są ułożone w kodzie.

11:45Jeżeli jednak zmienimy na mapie będziemy

11:47mogli pomiędzy tymi elementami i tymi obszarami

11:51rozmieścić w dowolny sposób nawet zostawiając jakieś np.

11:54puste miejsce pomiędzy nimi.

11:56W tym przypadku jednak moglibyśmy skorzystać po prostu z order.

11:59Dodatkowo każde dziecko Krisa ma możliwość

12:02otrzymania takiego parametru order który pozwala zarządzać ich kolejnością.

12:07Możemy użyć opcji first albo last czyli jeżeli plik nie ma teraz lat to

12:10automatycznie ten element będzie ostatni w kolejności.

12:13Ale zobacz że mamy też możliwość wybrania tutaj opcji na przykład 1.

12:18Jeżeli zrobimy jeden no to będziemy to

12:20będzie na pozycji zero to będzie na pozycji 1 a więc możemy łatwo dla każdego

12:23z elementów zadecydować o jego pozycji i to są właściwości CSS.

12:26W związku z tym nie będzie to miało

12:28związku z pozostałymi rozdzielczością tylko na tej rozdzielczości tabletu.

12:33Teraz jeszcze możemy

12:35wykonać jakieś podstawowe operacje w kontekście tekstu wyrównać go do lewej.

12:39Wydaje mi się że tak jest już OK.

12:41Trzeba by było też zresetować ten margines.

12:45I tutaj na sam produkt i raper warto by

12:48było dać jakiś link chyba 24 to był ten wabik naszego

12:53projektu czyli w okolicach dwudziestu czterech.

12:56I tutaj też ewentualnie moglibyśmy sobie trochę zmienić te inne produkty.

13:00Ja to zostawię tak jak jest.

13:01Zobaczymy jeszcze na szybko te rozdzielczości telefon nowe.

13:04Tutaj ten parking 48 będzie za duży w

13:06związku z tym zatem możemy go zmniejszyć jeszcze dodatkowo mamy chyba około 15 cali

13:12parkingu na tym kontenerze więc możemy nawet zrobić tutaj 0.

13:15To wygląda już całkiem nieźle.

13:17No i pozostałe produkty też można by było trochę dostosować czyli w tym

13:21Collection listę papieża można dać dodatkowo jakiś parking właśnie taki jaki

13:25mieliśmy na tych naszych zdjęciach na galerii tutaj i widok telefonu.

13:32Widzę że on nie jest jakiś idealny.

13:34Coś tutaj się psuje i dodatkowo jeździ na boki.

13:37Jeżeli widzisz taki problem to jest dlatego że jakiś element z elementów

13:42ma najprawdopodobniej ustaloną szerokość i blokuje nam ten j przed złamaniem.

13:48Więc zastanów się nad tym

13:50czy przypadkiem na którymś z elementów nie ustalał stałej szerokości.

13:54Ja sobie przypominam że na pola Select Field ustawiały szerokość 200 pikseli.

13:58No i to jest właśnie ten problem ponieważ one są obok siebie zajmują 200.

14:02I jeszcze dodatkowo mają jakiś margines a rezultat jest taki że to wszystko nie

14:05mieści się na szerokości 320 i tak naprawdę wszystkie te kontenery.

14:10Więc to co zrobili byśmy na liście po prostu wyłączyć wyświetlanie jako Flex

14:15albo zmienimy pozycję na werdykt ale też możemy to zrobić czyli możemy zrobić sobie

14:19tutaj opcję weryfikacji i już wszystko wróciło do normy.

14:22Proszę bardzo.

14:23Moglibyśmy też wyrównać elementy do środka.

14:25W zasadzie tutaj można jeszcze sporo

14:26różnych innych rzeczy zrobić tak samo dostosować trochę ten produkt i mecze

14:31raper czyli zabrać margines od góry morze czy może zmniejszyć go

14:36w ten sposób może umieścić te elementy wewnątrz tego rapera też jest niepotrzebne

14:41spadek w środku który teraz moglibyśmy zresetować.

14:44No i zdjęcia mogą albo zostać tak albo

14:47możemy spróbować zdecydować się żeby umieścić je obok siebie.

14:50Cały Product Image raper ma ustawione na Flex i mamy Direction Horizon.

14:55Moglibyśmy zmienić na wersji K albo ewentualnie moglibyśmy zabijać i to

15:00też dałoby podobne efekty więc naprawdę mamy tutaj różne opcje do wyboru i

15:05proponuję żebyś już zrobił to we własnym zakresie.

15:07Myślę że to jest tylko kwestia ale ja tu

15:09chciałem doprowadzić do takiego w miarę przyzwoitego wyglądu.

15:13Wygląda na to że tutaj Shipping lepszym jeszcze nie jest wyrównane.

15:17Co prawda wydaje mi się że trzeba właśnie wymusić tą opcję ale

15:21trzeba chyba by było to zrobić nawet w domyśle aby upewnić się że jest równo.

15:25No ale dobra mamy zrobione.

15:27Polecam Ci jeszcze eksperymentować z tym

15:29ewentualnie stylowo coś na rozmaitych widełkach.

15:32Czasem zależy nam głównie na tym widoku.

15:34Dysk topowy i on jest w porządku a także

15:36mamy omówiono całą stroną całą stronę produkcji.

15:40Dostaliśmy trochę rzeczy skonfigurować byśmy musieli dodania do koszyka.

15:43Możemy przejść dalej.