Webflow: Omówienie projektu

0:00Cześć! Witaj w pierwszej lekcji tego kursu.

0:02Przed nami naprawdę ekscytujące wyzwanie polegające na stworzeniu całego

0:06kompletnego systemu e-commerce z pomocą Webflow.

0:09Na początku pragnę jednak dać tutaj jedno istotne zastrzeżenie.

0:12Mianowicie osoby, które nie mają wcześniejszego doświadczenia w pracy z

0:16Webflow, powinny zdecydowanie wcześniej przerobić kurs podstawowy oraz także kurs

0:22zaawansowany - ten, w którym omawiałem bloga w Webflow, w którym operowaliśmy na systemie CMS.

0:27Uważam, że w ten sposób dużo lepiej

0:29przygotują się do materiału, który chciałbym teraz ci zaprezentować.

0:32Dlaczego? Bo w tym materiale chcę iść na skróty i

0:35nie chcę pokazywać wszystkich tych rzeczy, które omawiałem już w poprzednich kursach Webflow,

0:39a chcę jak najszybciej, jak najbardziej

0:41wydajnie przygotować działający system e-commerce.

0:44Więc jeżeli jesteś osobą, która znalazła

0:46się w tym kursie niejako przypadkiem, bo chce na przykład

0:48stworzyć swój sklep albo otworzyć sklepy dla swoich klientów,

0:51ale nie masz jeszcze podstaw Webflow, no to oczywiście możesz obejrzeć kolejne

0:56lekcje, ale zastrzeżenie jest takie, że nie będę wszystkiego tłumaczył wnikliwie.

1:00Jeżeli nie będziesz czegoś rozumiał,

1:02zdecydowanie polecam przerabiać sobie kursy podstawowe.

1:05Z tym zastrzeżeniem możemy iść dalej i rozpocząć od stworzenia w Webflow nowego projektu.

1:09I możesz tutaj rozpocząć pracę na dwa sposoby.

1:11Po pierwsze, możesz zacząć od pustej strony i wtedy - po dodaniu samego modułu

1:16Ecommerce - będziesz miał do dyspozycji kolekcje, które zostaną stworzone

1:20automatycznie, ale każda strona tych kolekcji będzie pusta

1:23i będziesz musiał tam po prostu zbudować cały layout Webflow od podstaw.

1:27My, żeby przyspieszyć sobie prace, wykorzystamy Store

1:30Starter, czyli taki szablon, w którym już są predefiniowane jakieś

1:37layouty, jakieś podstrony, czyli jakieś dane na tych podstronach się znajdują. Będziemy mogli je po

1:42prostu modyfikować. Więc ja wybieram Store Starter i teraz tworzę projekt, który nazwę

1:47MKTP. Wybieram polecenie Create project i został dla mnie wygenerowany

1:52startowy projekt. Jeżeli ten projekt będzie się różnił w twoim przypadku,

1:56nie przejmuj się. Te szablony zmieniają się w Webflow. W zasadzie nie jest to dla nas kluczowe.

2:00Równie dobrze mógłbyś zacząć od czystego

2:02projektu, przejść do sekcji Ecommerce, a następnie utworzyć sklep i wtedy

2:06automatycznie te same rzeczy zostaną dla ciebie tutaj utworzone.

2:10Nam posłuży to tylko dlatego, żeby nie mieć tutaj pustych rzeczy, tylko jakieś placeholdery,

2:14które będziemy mogli dostosować. A będziemy pracować nad projektem strony

2:19mojkrajtakipiękny.pl. Ta strona już istnieje i jest to firma nasza zaprzyjaźniona tutaj,

2:23która sprzedaje bardzo fajne ubrania. Ma szereg kolekcji, które można przeglądać sobie

2:30w różnych kategoriach: kategorie Nowości i mamy jakieś Płaszczobluzy, Peleryny.

2:34Mamy zdjęcia z Instagrama i oczywiście po

2:38przejściu do takiego produktu możemy przeglądać sobie

2:41jego zdjęcia, zobaczyć opcje opisu, dostawy, a także wybrać odpowiednie właściwości dla

2:48tego konkretnego produktu, dodać go do koszyka.

2:50Ten koszyk nam się tutaj pojawia z dodanymi

2:53produktami, a następnie można przejść do sekcji Zamówienia.

2:56No i tutaj mamy koszyk, czyli

2:59te wszystkie kroki będziemy chcieli odtworzyć i może trochę zmienić wygląd,

3:04dostosować trochę wygląd sklepu MKTP do naszych potrzeb,

3:08może trochę go ulepszyć, może trochę usprawnić. I z tego powodu, że właśnie nie

3:11chciałem bazować dokładnie na tym, co jest tutaj gotowe,

3:14po prostu stworzyłem nowy projekt.

3:16W zasadzie ten projekt to jest taki prototyp, który wykonałem w Figmie. Możesz otworzyć

3:20ten link, który masz w źródłach, który tutaj dodaję, a następnie kliknąć na tą małą

3:26strzałkę obok nazwy pliku i wybrać polecenie Duplicate to your Drafts.

3:30W tym momencie będziesz miał tę edytowalną wersję w zasadzie tego prototypu na

3:35swoim koncie Figmy, które wcześniej trzeba założyć.

3:37Ono jest kompletnie darmowe i będziesz mógł również tutaj dostosowywać ten

3:41projekt, a także tworzyć inne swoje własne projekty.

3:44Jeżeli nie znasz Figmy, polecam ci kurs Figmy na eduwebie.

3:48To jest bardzo przyjazne darmowe narzędzie na przynajmniej podstawowe zastosowania

3:52w tej wersji darmowej, która pozwoli ci projektować interfejsy. I spędziłem

3:57w Figmie dosłownie godzinę, dwie, aby zaprojektować nowy layout strony, oczywiście

4:01zgodny ze wszystkimi wytycznymi i z takimi głównymi założeniami MKTP.

4:07Tutaj wstawiłem bardzo podobny schemat i

4:10układ tych miniaturek, które się wyświetlają, a także dodałem jakąś sekcję z newsletterem,

4:15gdzie można podać adres, no i też zaprojektowałem stopkę.

4:18W zasadzie to wszystko ze strony głównej, a strona konkretnego,

4:22konkretnej kategorii jest zaprojektowana w ten sposób, że mamy jej nazwę, krótki opis tej

4:26kategorii i kolejną znowu sekcję ze zdjęciami, czyli to są po prostu już miniaturki

4:32produktów, które można dodać później do koszyka. Sekcja Newsletter

4:36i znów taka sama stopka.

4:38I w końcu mamy jeszcze jedną stronę, czyli tę stronę właściwego produktu.

4:42W momencie, gdy wejdziemy w produkt, będziemy mieli bardzo podobną strukturę

4:45jak na samej stronie MKTP, z tym że tutaj, w tym miejscu będę chciał jeszcze dorobić

4:50slider taki, który wyświetla mi w lightboxie miniaturki i zdjęcia, jeśli tych zdjęć jest

4:55więcej dla produktu. I dodatkowo mam podział na trzy zakładki,

5:00które będzie można przełączać teraz tutaj.

5:03Poniżej można też wybrać sobie opcję,

5:05no i mamy guzik do koszyka. Także bardzo prosta struktura, nie

5:08projektowałem specjalnie koszyka, nie projektowałem strony podziękowania, strony

5:12zakupu, ponieważ te wszystkie rzeczy pokaże ci już bezpośrednio w Webflow.

5:17Skoro wiemy, jak główna koncepcja naszej strony wygląda, co w ogóle chcemy zrobić i

5:22mamy już gotowy layout, który będziemy chcieli przełożyć na działającą stronę w Webflow,

5:26no to wracamy do naszego projektu. Zobaczmy,

5:29jak ten projekt został w ogóle skonstruowany.

5:31Znaczy mamy tutaj kilka podstron wygenerowanych dzięki temu, że korzystamy z szablonu.

5:36Mamy stronę Home, mamy stronę About Us - nie będziemy jej w zasadzie dotykać, stronę

5:41kontaktową, którą też moglibyśmy przygotować.

5:44To jest prosty formularz, też mapka, a myślę że bardzo łatwo można wypełnić tutaj te dane.

5:50Ważne strony to takie strony, które będą listować nasze produkty.

5:54Tutaj mamy stronę z wszystkimi produktami

5:57czy z wszystkimi kategoriami. Też nie musimy jej robić. W tym szablonie

6:00jest też wariant strona bloga. Ponieważ my

6:03bloga robiliśmy w kursie zaawansowanym, nie będziemy też dotykać tych stron.

6:08No i jest też przygotowany Styleguide. I to jest miejsce, od którego warto zacząć.

6:12Dlaczego? Bo jeżeli poprawnie zdefiniujemy sobie wszystkie

6:15style dotyczące nagłówków, kolorów, tekstu, paragrafów, przycisków, rich text elementów.

6:21Oczywiście te, które są potrzebne na naszej

6:22stronie, no to wtedy będzie można bardzo szybko poszczególne podstrony budować z

6:26bloków, a te bloki, które są już stworzone, będą automatycznie przestylowane

6:32w momencie, kiedy zmienimy stylowanie w Styleguidzie.

6:34Dlatego jeżeli zaczynasz od czystej kartki od nowego projektu w Webflow,

6:38to polecam ci też na samym początku utworzyć sobie taką stronę Styleguide

6:43i to właśnie od niej zacząć.

6:45Jeżeli chcesz, to możesz sklonować sobie tą

6:47stronę, którą pokazywałem w kursie zaawansowanym.

6:50Tam uczyłem budować Styleguide

6:52i zawsze robię to na samym początku.

6:54Od tego zaczynam i staram się elementy,

6:56które znajdują się w projekcie, czyli w tym przypadku w Figmie,

7:00teraz przełożyć na język Styleguide'a, czyli wybieram np.

7:03konkretne elementy takie jak nagłówki, sprawdzam ich właściwości:

7:07jaki to jest rodzaj fontu, jaka to jest,

7:10jaki jest jego rozmiar,

7:11jaki jest line-hight. I te rzeczy będzie trzeba po prostu przenieść na Styleguide,

7:15czym zajmiemy się w jednej z kolejnych lekcji.

7:17Na razie jednak chciałbym przejść do tej struktury jeszcze raz.

7:19To są wszystkie statyczne strony, które były w tym szablonie.

7:22Mamy standardowe Utilities Pages, czyli Password i 404,

7:25ale mamy też strony e-commerce. To są Ecommerce Pages.

7:28Niektóre z tych stron zostały powiązane z kolekcjami, które zostały automatycznie

7:33wygenerowane przy tworzeniu sklepu, przy tworzeniu modułu Ecommerce.

7:37Niektóre też zostały automatycznie

7:38wygenerowane, ale nie są stricte powiązane z kolekcjami.

7:41Czyli mamy stronę produktów powiązaną z

7:43kolekcją produktów, stronę kategorii powiązaną z kolekcją kategorii, ale mamy

7:47też trochę stronę Checkout, czyli koszyk, Checkout dla PayPala i potwierdzenie zakupu.

7:51Te wszystkie strony zostały automatycznie wygenerowane przez Webflow.

7:54Ostatnia strona CMS Collection, czyli Blog Post Template

7:57- nie będziemy zajmować się blogiem, więc w zasadzie też będzie nam to niepotrzebne.

8:01Jeśli przejdziemy do strony Ecommerce,

8:03czyli do podglądu produktu, to tak wygląda prosty podgląd produktu w tym szablonie.

8:08Następnie mamy stronę Categories Template, czyli listę produktów w danej kategorii.

8:13Też warto skorzystać z tej dynamicznej strony, aby tutaj wyświetlać produkty.

8:17No i w końcu koszyk. Koszyk w kilku wersjach. Pierwszy Checkout

8:20to jest taki standardowy, drugi jest Checkout dla PayPala i trzeci - trzecia strona to jest

8:27Order Confirmation, czyli potwierdzenie zakupu.

8:30Jedna ważna rzecz, która różni w zasadzie

8:34moduł e-commerce od wszystkich innych, z którymi pracujesz w Webflow.

8:37Jeśli przykładowo przejdziesz do checkoutu, czyli

8:39do tej automatycznie wygenerowanej strony i gdybyś tutaj chciał np.

8:44pozbyć się Shipping Method List, czyli w

8:46ogóle usunąć listę tych opcji wysyłania, to okazuje się, że nie

8:51możesz tego zrobić, ponieważ lista tych metod nie może być po prostu usunięta.

8:56I rzeczywiście w przypadku modułu Ecommerce Webflow nie będzie nam pozwalał

9:00niektórych rzeczy zrobić, a w zasadzie usunąć, co jest dość nietypowe dla Webflow, no bo tutaj

9:05zwykle wszystko można sobie zreorganizować. O ile wszystko możemy ostylować,

9:08to niektórych newralgicznych rzeczy nie możemy usunąć

9:11i warto o tym wiedzieć już na początku.

9:13Natomiast na ogół to, czego nie możemy usunąć, wiąże się z setupem naszego sklepu.

9:18Jeśli założymy nowy moduł e-commerce, dostajemy coś takiego jak Setup guide

9:23i po kolei są tutaj kroki, które należałoby wykonać po to, aby stworzyć nasz sklep.

9:28Jeżeli przykładowo nie zdefiniujemy sobie jakichś

9:31różnych opcji dostawy, no to nie będą one kolekcją, która jest wymagana na checkoucie.

9:35Jeśli jednak je zadeklarujemy, nie będzie można ich z tych stron usunąć.

9:39W związku z tym ważne jest dla nas na początku, abyśmy po stworzeniu modułu

9:42e-commerce po prostu przeszli przez te wszystkie kroki po kolei.

9:46Może nie od razu, ale żebyśmy po kolei zobaczyli, jak ten setup sklepu wygląda i to

9:52zrobimy w kolejnej lekcji, na którą serdecznie cię zapraszam.