Webflow: Struktura produktów

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

0:01już dodać właściwe produkty do naszego sklepu.

0:04Nie będę dodawał ich z palca, tylko

0:05postaram się zaimportować te produkty z pliku CSV. W związku z tym to, co powinienem

0:09zrobić, to przygotować sobie najpierw dobrze strukturę danych po to, żeby mógł

0:13wyeksportować taki przykładowy plik, na którym później będę pracował.

0:17Ta przykładowa struktura danych powinna

0:20już być dopracowana w sekcji produktu. Jeśli wejdę w ustawienia kolekcji, czyli

0:24najpierw musimy upewnić się, że wszystkie właściwe pola są uzupełnione.

0:28Jeżeli potrzebujemy jakieś dodatkowe pole do opisania naszego produktu, do opisania

0:33jakiejś jego właściwości, to powinniśmy je teraz dodać.

0:36Jedna istotna rzecz, w momencie gdy

0:39będziemy dodawać produkt - zobacz, że mamy tutaj sekcję Basic Info, Media, Pricing,

0:43te wszystkie sekcje, które pochodzą stąd: Inventory, Identifiers, Shipping,

0:49ale dodatkowo jeszcze mamy na samym dole coś takiego jak Options.

0:54To się tutaj nie pojawia, ale pozwala nam

0:56dodać tak zwane Options sety. To jest zestaw do danego produktu, zestaw właściwości danego

1:02produktu, który możemy sobie ustalić dodatkowo.

1:05Przykładowo, jeśli nasze ubrania mają jakieś kolory i po tym je

1:09dywersyfikujemy, to możemy dodać ten kolor jako option set. To znaczy, że nie

1:15dodajemy tutaj specjalnego Custom field typu Color po to, żeby np.

1:19dodać kolor bluzy.

1:20Nie o to chodzi.

1:22Będziemy mogli zdefiniować te kolory właśnie jako opcje produktu i te opcje

1:25produktu będą pojawiały się poniżej jako warianty tego produktu

1:31w Inventory, więc jeślibyśmy dodali opcję Color i zdefiniowali trzy kolory, to

1:35będziemy mieli jeden produkt, ale będziemy mieli kilka jego wariantów. Pozwól, proszę,

1:39że wybiorę tutaj Cancel i pokażę ci, jak to działa w praktyce. Nie dodaję żadnych

1:42innych Custom fields do produktów i wybieram teraz dodawanie nowego produktu.

1:47Pierwszy właśnie dodamy sobie z palca w ten sposób.

1:50Uzupełnimy teraz pola tego produktu, czyli wpisuję jego nazwę,

1:53następnie podam jego Description, skopiuję

1:56sobie te informacje ze strony. Kolejno musimy wskazać kategorię i mamy

2:00zdefiniowane już cztery kategorie. Będziemy się w sumie musieli ich pozbyć.

2:04Na szczęście możemy stąd po prostu dodać sobie nową kategorię. Wybieram plus,

2:08następnie wpisuję, że na przykład

2:10jest to bluza i wybieram polecenie Create po to, żeby stworzyć nową kategorię.

2:14Na razie dodam tutaj tylko jedną kategorię.

2:17Dodam także jeden obrazek. Wystarczy, że

2:19przeciągnę go tutaj. Mogę w to miejsce poniżej też wkleić

2:23jeszcze jeden dodatkowy, ten sam na razie,

2:25obrazek. Kolejno podam cenę. Jest ona obowiązkowa, musimy ją zdefiniować. Zostawię

2:30opcję Compare-at price i też pozostałe opcje dotyczące kalkulacji podatku,

2:34o tym porozmawiamy sobie później. SKU dodam jako 123. Mogę zdecydować, czy chcę

2:40śledzić Inventory, czyli stan magazynowy tego produktu. Mogę przykładowo zdefiniować,

2:45że mam w magazynie 30 takich produktów i automatycznie za każdym kolejnym zakupem

2:50ich ilość będzie się odpowiednio zmniejszać.

2:52Następnie musimy wskazać, czy ten produkt wymaga wysłania do klienta

2:57i jeśli tak, możemy podać dodatkowe

2:59dane, takie jak jego waga, jak jego objętość, wysokość i szerokość,

3:04jeżeli byłoby nam to potrzebne do kalkulacji, np.

3:06właśnie ceny wysyłki. My możemy na razie tę opcję zostawić bez

3:09zmian. To nie jest produkt cyfrowy, więc nie będziemy mogli go ściągać.

3:12Natomiast ważna rzecz, to są opcje. Wybieram polecenie Add option set

3:16i właśnie teraz stworzę nowy option set, który nazwę Size, czyli rozmiar. Jako

3:21dostępne opcje rozmiaru chcemy tutaj podać opcję Small, czyli S. Wybieram S i wciskam

3:27Enter, Return. Następnie będziemy mieli M - medium, L - Large i XL.

3:33Na przykład ta bluza będzie występowała w tych

3:35odmianach i właśnie dodajemy je w ten sposób. Jako opcję wybieram polecenie Done i już

3:40mam jeden zestaw opcji, który pozwala mi wygenerować cztery warianty tego produktu.

3:45Następny option set, który dodam

3:47będzie to Color i powiedzmy, że zrobimy tutaj

3:51Grey, następnie Enter i Yellow,

3:55i Green, i zrobimy sobie trzy kolory.

3:58Wybieram Return, zapisuję Done i znów mamy poszczególne warianty. Zobacz, że w tym

4:04momencie został ten nasz produkt powielony w taki sposób, że są skrzyżowane te

4:10wszystkie warianty ze sobą, czyli mamy cztery warianty rozmiaru i trzy warianty

4:14koloru, więc daje to nam 12 wariantów produktu.

4:17I co ciekawe, każdy taki wariant możemy edytować, czyli jeśli teraz wybierzemy np.

4:22bluzy w rozmiarze S, zielone, to możemy

4:25wejść sobie do jego właściwości i możemy osobno dla niego ustawić, że mamy np.

4:31tych bluz w takim kolorze tylko 10 na magazynie.

4:33Możemy też ustawić dla nich różną cenę i

4:36różne pozostałe opcje, które tutaj się znajdują. Wybieram polecenie Done

4:39i w tym momencie ta ilość została zmieniona.

4:42Jeden z naszych produktów jest oznaczony

4:44jako główny Default. Jest oznaczony tutaj gwiazdką, a raczej jego jeden wariant i

4:49możemy jeden taki wariant oznaczyć, wybierając to polecenie Make Default.

4:53Teraz zmienię to na inny produkt i teraz nasza żółta bluza będzie produktem

4:58domyślnym, a ten produkt domyślny będzie się wyświetlał jako pierwszy na stronie produktów.

5:03Kiedy już nowy produkt jest zdefiniowany,

5:05wybieram polecenie Create, aby go stworzyć. I w ten sposób utworzyłem pierwszy Item,

5:09pierwszy produkt, który w tym momencie ma taki status Staged for Publish,

5:14to znaczy, że jeszcze nie jest na stronie,

5:15ale gdy opublikujemy stronę, już się na niej pojawi.

5:18Gdybyśmy teraz wyeksportowali tą strukturę, to

5:21ta struktura produktów zawiera bardzo dużo niepotrzebnych danych, czyli jakichś danych

5:25o identyfikatorach, danych, które tak naprawdę nie pozwoliłyby nam przygotować pliku CSV,

5:31który dałoby się później zaimportować z Webflow.

5:34Dlatego zamiast eksportować tą strukturę,

5:36mogę kliknąć na Import i kliknąć na ten CSV template. To jest właśnie to, co jest mi

5:41potrzebne, czyli nie korzystamy z tej zadeklarowanej struktury, tylko korzystamy

5:45z tego product template'a, który teraz będzie można wykorzystać do tego, żeby stworzyć sobie na

5:51bazie tego jakiegoś Excela, którego wypełnimy, albo np.

5:54stworzyć Airtable.

5:55Polecam ci zarejestrować się, jeśli jeszcze

5:57nie masz konta na Airtable i ja tutaj właśnie stworzę swoją bazę produktów.

6:01Można to zrobić na Google sheets,

6:02można w Excelu, ale ja po prostu wybiorę polecenie Add a base.

6:05Nową bazę stworzę w Airtable ze spreadsheeta, czyli wybiorę polecenie Import a spreadsheet,

6:10CSV file i wybiorę ten plik.

6:13Wskażę ten plik, który jest rzeczywiście szablonem do importu do Webflow,

6:18a nie ten plik, który zawiera już moje produkty. Teraz nazwę go odpowiednio, np.

6:24MKTP Products

6:27i wybiorę jakiś kolor, może ikonkę. I mogę teraz przejść do tego pliku.

6:30Jak widzisz, jest on wypełniony przykładowymi danymi i ma jakieś sporo różnych

6:35rzeczy. I ma w zasadzie wszystko, co może wystąpić w zarówno wariantach, opcjach i

6:42dzięki temu jest dobrym szablonem, który nadaje się do wypełnienia.

6:45Produkty nie będą nam jednak potrzebne,

6:47ale to, co proponuję ci zrobić, to tak: zmienić nazwę tej tabeli na Products

6:53i dodatkowo możemy przenieść się do widoków.

6:56Ten widok Grid view - mogę zmienić jego nazwę na All Data, czyli wszystkie dane

7:00produktów, ale mogę stworzyć sobie kolejny grid view,

7:03kolejny widok, który będę, który mogę nazwać Add Products

7:10i w tym widoku mogę ukryć te pola, które mi

7:13nie są potrzebne. Product Name i Description, i Categories są mi

7:17potrzebne oraz obrazki też, jak również Price, ale na przykład te rzeczy, które

7:22chwilowo nie są mi potrzebne: Weight, Width, Height, tych rzeczy nie będę wypełniał,

7:26mogę po prostu ukryć. Opcje zostawię. Poza

7:30opcją trzecią mam dodane dwie opcje, czyli opcję Size i Color, więc zostawię je.

7:35I w ten sposób mam taki widok, w którym mam po prostu mniej pól.

7:38Te wszystkie pola muszę wypełnić, a te nie są mi zdecydowanie potrzebne.

7:43Wybieram polecenie Delete all selected records, po zaznaczeniu z wciśniętym

7:48Shiftem te rekordy, które tu były, więc je po prostu usuwa.

7:51Spróbujmy w związku z tym teraz wypełnić

7:53ten szablon, czyli wypełniamy obowiązkowe pola typu Product Name,

7:58Product Description, też kopiuję sobie ze strony, Product Categories -

8:04wpiszę tutaj bluzę, ale mógłbym też po przecinku podać np.

8:08inną kategorię typu Hoodie,

8:10jeżelibym ją miał zdefiniowaną. Następnie obrazek i tutaj potrzebny jest

8:14link do obrazka. Ja po prostu skopiuję go ze strony i tak samo wstawię sobie tutaj.

8:19Tu po przecinku też mógłbym podać więcej obrazków.

8:22Następnie Variant Price, 69 i mamy nasze opcje. Opcja pierwsza to było Size. Tworzymy,

8:28jakby posługujemy się tą samą nomenklaturą i teraz będziemy mieli rozmiar S.

8:33Opcja druga to był kolor i będziemy mieli kolor żółty Yellow.

8:38Dlaczego zrobiłem tylko jedną opcję, a nie po przecinku, np.

8:41S, M, L? Nie możemy tego zrobić. To, co możemy zrobić,

8:44to prawy przycisk myszy i zduplikować taki rekord,

8:47zduplikować ten rząd i tutaj zadbać o to, abyśmy mieli ten sam

8:51Product Name, a następnie zmienić tę opcję np.

8:55na M w kolorze żółtym.

8:57Gdybyśmy chcieli w ten sposób zduplikować

8:59rekordy, moglibyśmy zadeklarować też S dla koloru przykładowo Black, itd., itd., więc w

9:04ten sposób moglibyśmy stworzyć wiele produktów.

9:07Teraz klikam w to miejsce, a następnie wybieram polecenie

9:10Download CSV po to, żeby pobrać plik CSV.

9:13Wracam do Webflow i wybieram polecenie importu, a następnie przeciągam tutaj ten

9:18plik CSV po to, żeby zaimportować jeden produkt w trzech wariantach. I zobaczymy,

9:23czy uda się dodać ten produkt. Specjalnie zasymulowałem

9:26błąd dodawania produktu. Wybierzemy sobie

9:28Download error summary po to, żeby zobaczyć dlaczego nasz produkt się nie dodał.

9:33I tutaj mamy takie małe podsumowanie, informację o tym, że mamy jeden import

9:38error, linie 2 do 4 zostały pominięte, ponieważ jedno lub więcej fields, pól

9:44się nie zgadza, nie zostało zwalidowanych i jest to pole Slug. Rzeczywiście, nie

9:48wypełniliśmy pola Slug, czyli tego pola Product Handle.

9:52Jak się okazuje, trzeba to też wypełnić,

9:55np. cape-for-special-tasks.

9:57Dodatkowo jeszcze jedno pole, które musimy uzupełnić, jest to pole Variant Inventory,

10:03które mówi nam o tym, ile mamy tych bluz w konkretnym rozmiarze, np.

10:08tutaj wybierzemy sobie 10.

10:10Mogę to skopiować i teraz wybieram znowu

10:13polecenie Download CSV. Importujemy ten plik do Webflow, wybieram Import i przeciągam go

10:19tutaj. Wybieram import jednego produktu i teraz już powinien mój produkt bez

10:24błędów zostać zaimportowany, ponieważ zawiera wszystkie te niezbędne pola.

10:29Jak widzisz, razem z obrazkiem tutaj wskoczył. My moglibyśmy

10:33w ten sposób przygotować i utrzymywać całą bazę z pomocą Airtable.

10:38Moglibyśmy także pobrać sobie bazę, jeżeli już mamy w jakimś gotowym systemie, np.

10:43Shoplo czy jakimkolwiek innym, bazę produktów w postaci pliku

10:48CSV, z resztą pobrałem sobie taką bazę dla tego naszego sklepu MKTP.

10:52Wygląda ona w ten sposób i w tym akurat przypadku zawiera kilka tysięcy rekordów.

10:59Tutaj mamy chyba dwa i pół tysiąca

11:01rekordów mniej więcej, no i teraz moglibyśmy spróbować to

11:04wszystko przenieść do formatu Webflow i zaimportować.

11:07Rzeczywiście jest to możliwe.

11:09Moglibyśmy naturalnie kopiować sobie pola

11:11i zmieniać nazwy. Moglibyśmy użyć jakiegoś narzędzia, które pomoże nam skonwertować

11:16ten plik CSV do tego szablonu CSV Webflow, do wymaganego formatu. To już wykracza poza

11:21ten kurs, aczkolwiek mówi ci, że przeniesienie rozmaitych produktów

11:26pomiędzy istniejącym systemem e-commerce a Webflow jest możliwe właśnie w ten sposób.

11:31Zatem na teraz to tyle. Ja w przerwie

11:33pomiędzy lekcjami jeszcze dodam do tej naszej bazy produktów kilka produktów w

11:38różnych wariantach, a następnie zaimportuję je tak, abyśmy mieli nad czym pracować.

11:42Ty znasz już wszystkie metody importu, a także dodawania produktów.

11:45Tak że dziękuję ci serdecznie za uwagę i do usłyszenia w kolejnej lekcji.