Webflow: Dodawanie produktów

0:00Witaj w kolejnej lekcji.

0:01Cały Setup guide, w którym pracujemy w ramach Webflow, jest podzielony na trzy główne sekcje.

0:05Pierwsza sekcja to jest wstępna konfiguracja sklepu,

0:08następnie mamy projektowanie sklepu, a

0:10kolejno mamy uruchomienie sklepu. Rzecz jasna, w takiej kolejności będziemy

0:14pracować, a ze wstępnego Setupu zostało nam zdefiniowanie produktów.

0:18Jeżeli przejdę do sekcji produktów na tym sklepie, który stworzyliśmy sobie z gotowego

0:23presetu, to zobacz, że tutaj już znajdują się jakieś produkty.

0:26Jeśli jednak przejdę do

0:28tego sklepu, który stworzyliśmy w lekcji drugiej od czystej kartki, to chciałbym ci

0:32pokazać, że również tylko po utworzeniu samego modułu e-commerce

0:37też znajduje się tutaj specjalna kolekcja z produktami, ale tych produktów tu nie ma.

0:42Mamy coś takiego jak Products, Categories, Discounts

0:45i to wszystko możesz porównać do kolekcji

0:47CMS-a, jeżeli wcześniej się z nimi spotkałeś, czyli po prostu są to osobne

0:51tabele w bazie danych, w których będziemy definiować osobno produkty,

0:55kategorie, discounty, czyli zniżki. Posiadają one jakieś swoje predefiniowane

1:00właściwości, czyli Webflow, jeśli klikniemy na tę

1:02małą ikonkę koła zębatego,

1:04stworzył dla nas kolekcję produktów,

1:06która ma odpowiednią nazwę, ma odpowiedni URL.

1:09Możemy to naturalnie zmienić, natomiast posiada już predefiniowane rozmaite pola.

1:14Tych pól ja nie stworzyłem. Webflow stworzył to razem z modułem e-commerce

1:18i nie da się ich zmienić. Jeśli chodzi o te podstawowe pola,

1:21mamy możliwość - dokładnie tak jak w CMS-ie

1:23- tylko dodawania jakichś naszych własnych Custom fields, czyli dodatkowych

1:27pól, które w jakiś sposób, by jeszcze ponadto opisywały ten produkt.

1:31Natomiast to, co zostało tutaj stworzone, to mamy

1:34Nazwę, Slug, Description, czyli opis takiego produktu,

1:36Kategorie, do których może należeć, jest to pole typu multi references.

1:40Mamy obrazki, czyli Main image

1:43i More images - to jest miejsce, gdzie możemy wkleić wiele obrazków.

1:46Kolejną mamy cenę takiego produktu.

1:49Mamy jeszcze taką specjalną sekcję Compare

1:51at price, czyli cenę porównania, mamy klasę podatkową, którą możemy przypisać

1:57- o tym jeszcze będę mówił, identyfikator produktu, SKU, np.

2:00w naszym magazynie.

2:02Później jeszcze właśnie możemy trackować taki produkt w magazynie oraz jego ilość.

2:08Możemy zarządzać opcjami wysyłki, czyli Shipping, nadając tutaj rozmaite parametry takie

2:14jak waga - Weight, szerokość, wysokość, czy wielkość opakowania produktu.

2:19I zauważ, że jeśli skorzystalibyśmy np.

2:22z Weight, to w powiązaniu z tym, co mówiłem w poprzedniej lekcji, Webflow automatycznie

2:26mógłby wyliczać za nas cenę wysyłki w zależności od wagi, którą tutaj podamy.

2:30To jest właśnie to pole. Kolejno, taki produkt może

2:35zawierać jakieś rzeczy do pobrania i taką rzecz możemy dołączyć jako plik.

2:40Natomiast niektóre z tych pól tylko są obowiązkowe.

2:42Zobacz z prawej strony, że obowiązkowe

2:45przedefiniowanie produktu jest tylko jego nazwa, slug, czyli skrócona nazwa, która

2:49zostanie wygenerowana automatycznie, będzie w linku i możemy ją zmienić, oraz cena.

2:53To jest wszystko, co jest wymagane. Reszta tych pól jest opcjonalnych.

2:57Jednak nie możemy ich usunąć.

2:59Możemy co najwyżej dodać nowe pole za pomocą polecenia Add New Field albo przechodząc

3:03tutaj i wybierając polecenie Add field. Możemy dodać sobie Custom Fields takie jak wideo,

3:08linki, kolory oraz inne bardziej zaawansowane pola, także na przykład pole

3:12typu Rich Text, które mogłoby zawierać opis HTML-owy naszego produktu.

3:17Ten opis, który jest tutaj zrobiony, to Description, zawiera po prostu Plain text,

3:21więc moglibyśmy zrobić taki opis Rich Textem, jeżeli chcielibyśmy w jakiś trochę

3:25bardziej złożony sposób wyświetlać informacje o produkcie.

3:28Po zapisaniu zmian w takiej kolekcji,

3:30jeżeli je wykonaliśmy, możemy tutaj definiować nowe produkty.

3:33Możemy wybrać polecenie New Product, a

3:35następnie wypełnić te wymagane pola, poprzestawiać wszystko, wgrać obrazki i w ten

3:40sposób możemy zdefiniować pierwszy produkt, później następny, następny i jeszcze jeden.

3:44Natomiast definiowanie produktów w ten sposób naturalnie wymaga dostępu do

3:47designera, gdzie możemy też zmodyfikować wszystkie inne parametry naszej strony.

3:52Na ogół my jako twórcy strony będziemy np.

3:54dodawać tylko kilka produktów, ale

3:56administrował nimi później będzie nasz klient albo ktoś kto mu pomaga.

4:00I oczywiście można to robić nie w designerze, a z pomocą panelu Editor.

4:04Więc gdy będziemy hostować,

4:06gdy będziemy hostować stronę na Webflow, można będzie przejść do ustawień jej edycji

4:11Edit Site i po zautoryzowany się jako osoba uprawniona do zarządzania tą stroną

4:16będzie ona oczywiście miała do dyspozycji także sekcję Ecommerce. W tej sekcji

4:20Ecommerce będzie można wejść do produktów, a następnie zarówno edytować każdy z

4:25dodanych w ten sposób produktów, zmieniać jego status - pokazywałem to w kursie CMS-a,

4:30jak również definiować nowy produkt. Wybieram polecenie New Product

4:33i tutaj można wszystko sobie dodawać.

4:36Więc to jest kolejna metoda, z pomocą której nasz klient albo osoba,

4:40która mu pomaga, może dokonywać zmian, a także definiować sobie nowe produkty,

4:44kategorie i zarządzać ogólnie sklepem bezpośrednio w przeglądarce.

4:48Trzeci sposób wymaga skorzystania z API i też chciałbym o tym wspomnieć na tym

4:53etapie, ponieważ Webflow posiada API, które jest również dostępne dla Ecommerce.

4:59Zobacz, że w API Ecommerce jest tutaj masa rzeczy, które można np.

5:03tworzyć. Możemy tworzyć nowe produkty, możemy update'ować produkty i taki Endpoint,

5:08który służy nam do stworzenia nowego produktu, jest odpowiednio opisany.

5:12To znaczy, że my możemy stworzyć sobie

5:14narzędzie, które będzie takim customowym CMS-em. Niekoniecznie musi nasz klient

5:19korzystać z edytora i w takim specjalnie przygotowanym dla niego CMS-ie,

5:22który oczywiście musielibyśmy wykonać z jakąś wiedzą programistyczną czy wspomóc

5:26się programistą, który by to dla nas przygotował,

5:29moglibyśmy zrobić zupełnie customowe rzeczy, które pozwalałyby klientowi

5:33wgrywać nowe produkty, update'ować te produkty czy je aktualizować.

5:37Mamy też możliwość wykonywania zwrotów do produktów, podglądania sobie magazynu, itd.

5:43I to wszystko w interfejsie Webflow też można zrobić, ale samo API powoduje, że można

5:48wykonać to z pomocą również zewnętrznego narzędzia, które możemy sobie napisać albo z

5:53pomocą narzędzi również no-code, które umożliwiają nam procesowanie danych, zarządzanie

5:58nimi i wysyłanie do API takich jak Integromat czy Zapier.

6:02Na razie o tym wspominam, ale mam nadzieję,

6:03że jeszcze w tym kursie uda nam się o tym pomówić.

6:06Tymczasem wracam do Webflow po to, żeby pokazać

6:07ci jeszcze jeden sposób dodawania produktów,

6:10tym razem z pomocą importu produktów z pliku CSV. Mamy tutaj możliwość zarówno

6:15importowania produktów, jak i eksportowania takiego feedu produktowego.

6:19I wybierzmy polecenie Export po to, żeby zapisać na nasz dysk plik CSV, który teraz

6:25chciałbym ci pokazać. Taki plik CSV możemy otworzyć np.

6:28w Excelu, aczkolwiek nie jest on tutaj

6:29jakoś szczególnie czytelny, bo wszystko wylądowało w jednej komórce,

6:32ale jeśli przejdziemy do sekcji Data, a

6:35następnie wybierzemy polecenie Text to Columns i teraz musimy wybrać opcję

6:39rozdzielenia Delimited. I te wszystkie dane są rozdzielone przecinkami, a więc

6:42wybieramy opcję Comma (przecinek) i Finish po to, żeby rozbiło nam to na poszczególne

6:47kolumny. I teraz widzisz, że to są po prostu nagłówki, np.

6:51takie jak Product name czy Product Description,

6:53które powinniśmy uzupełnić, a następnie będziemy mogli tak uzupełniony

6:58plik naszymi produktami zaimportować do Webflow.

7:02Może przejdźmy na chwilę do tego gotowego już sklepu, ponieważ tutaj jest struktura

7:06produktów, w której mamy dziewięć produktów zdefiniowanych.

7:10Ja spróbuję wyeksportować stąd taki plik i zobacz, jak będzie wyglądał ten

7:15troszeczkę inny plik produktowy, w którym już się te produkty znajdują,

7:19czyli mamy te same nazwy kolumn, aczkolwiek

7:23poniżej. I może znów spróbujmy ten plik zobaczyć w jakimś sensowniejszym schemacie,

7:28czyli znowu to rozbijemy sobie po przecinku. Finish.

7:31Znajduje się tutaj właśnie

7:35nazwa produktu,

7:38to są te nazwy. Później mamy Product Description i wszystkie opisy, więc możemy

7:42właśnie w ten sposób przygotować plik CSV, który następnie zaimportujemy.

7:47Pokaże ci natomiast, jak mógłby wyglądać import takich produktów.

7:51Wybieram polecenie Import i teraz przeciągam tutaj ten plik CSV. Wrzucę te

7:56MKTP Products, które wyeksportowałem przed chwilą. Webflow informuje mnie o tym, że zaimportujemy tu

8:019 produktów, 23 ich warianty i ja wybieram polecenie Import.

8:05Dlaczego akurat 9 produktów i 23 warianty?

8:08Dlatego, że jakbyśmy jeszcze raz zobaczyli ten plik - jeszcze raz go sobie otworzę -

8:12proszę, zwróć uwagę na to, że mamy tutaj

8:14na przykład ten Product ID, który jest taki sam w przypadku rzędów 9 10 i 11.

8:20I rzeczywiście jest to ten sam produkt,

8:22tylko są to jego jakieś różne warianty. To znaczy, że Webflow,

8:26jeśli nadamy ten sam identyfikator,

8:28potraktuje to jako jeden produkt dodany do bazy, ale stworzy kilka jego wariantów.

8:33Warianty mogą naturalnie bazować na różnych rzeczach takich jak waga, jak

8:38wielkość, jak wszystkie te metadane, które zadeklarujemy w produkcie.

8:42Jeśli wybiorę teraz polecenie Import

8:44dziewięciu produktów, a my za chwilę w produktach zobaczymy

8:48wszystkie te produkty razem z ich właściwościami, cenami, itd.

8:51Pomimo że mieliśmy tutaj dwadzieścia

8:54cztery rzędy, to zostało zaimportowanych tylko dziewięć produktów, ponieważ

8:58częściowo te identyfikatory pokrywały się, w związku z tym były to ich warianty.

9:03No dobrze, to teraz przejdźmy do naszego

9:04właściwego sklepu i ponieważ te produkty nie są nam potrzebne,

9:07no to musimy je wszystkie usunąć.

9:09Wchodzimy do każdego z produktów i wybieramy polecenie Delete.

9:12Niestety, w ten sposób będziemy musieli

9:14postępować w przypadku wszystkich dziewięciu produktów.

9:16Ale przy okazji, jak już w nich jesteśmy, to

9:18proszę zobacz, że jeden produkt, który dodaliśmy, Clearness,

9:22zawiera w tym miejscu rozmaite warianty.

9:25To właśnie były te warianty, które zaimportowaliśmy pod tym samym ID,

9:29ale w różnych rzędach w Excelu.

9:31Więc tutaj akurat różnią się te produkty kolorem, White, Grey i Black, a kolor jest

9:37jedną z właściwości, którą dodaliśmy. Jedną z opcji, która została tutaj dodana do

9:42produktu i po tej opcji właśnie te warianty są dywersyfikowane.

9:45Wybieram polecenie Delete.

9:47Lepiej to zrozumiesz w momencie, kiedy dodamy nasz własny feed produktowy i

9:51proponuję, żebyśmy zrobili to może w kolejnej e-lekcji, a ja po drodze tutaj posprzątam.

9:55Do usłyszenia.