E-commerce
3 godz. 52 min · Webflow · UI, UX i Webdesign
Grzegorz RógIdea ArchitectZ pomocą Webflow, stworzysz gotowe, zaawansowane rozwiązanie e-commerce, z pomocą wizualnego interfejsu. Pod spodem działa rozwiązanie bazodanowe, które w gui pozwala Ci łatwo definiować i edytować produkty, kraje wysyłki, ceny a także spiąć całość z jednym z najnowocześniejszych systemów płatności - Stripe. Aby stworzyć sklep, nie potrzebujesz jednak wiedzy programistycznej, wszystko wykonasz wewnątrz kreatora Webflow.
Webflow pozwala na przygotowanie wyglądu Twojego sklepu, który jest w pełni dostosowany do Twoich (lub Twojego klienta) potrzeb. Możesz wdrożyć dowolny projekt, stworzyć i zaprojektować stronę produktu, koszyka, a także pozostałe podstrony sklepu. Dodatkowo, możesz łatwo rozbudować go nie tylko o statyczne, ale i dynamiczne podstrony, wykorzystując CMS. W ten sposób dodasz do swojego sklepu np. bloga.
O ile sklepy, które sprzedają lokalnie wysyłkowe produkty mogą na ten moment nie być najlepszym wyborem pod Webflow, głównie z uwagi na system wysyłek i płatności, to jeśli rozważasz sprzedaż na cały świat, Webflow posiada kilka naprawdę ciekawych rozwiązań. Kolejne ciekawe zastosowanie e-commerce w Webflow to możliwość sprzedaży produktów cyfrowych - jak e-booki, kursy wideo i inne. To obecnie jeden z najlepszych systemów dla twórców, którzy chcą sprzedawać w sieci, również na cały świat.
W kursie skupimy się na przygotowaniu bardzo praktycznego rozwiązania. Pokażę Ci jak wdrożyć w Webflow kompletny system e-commerce, który odwzorowuje dokładnie istniejący sklep zaprzyjaźnionej marki MKTP (polecamy!). Dzięki temu na rzeczywistych danych postaram się pokazać Ci jak może wyglądać wdrożenie projektu w Webflow.
Choć Webflow nie posiada tysięcy wtyczek, jak WooCommerce, ma też w stosunku do innych systemów dość istotne przewagi - możliwość hostowania i skalowania Twojej strony niezależnie od ruchu, profesjonalny system do tworzenia customowych szablonów i wiele więcej. Tam, gdzie brakuje funkcjonalności, możemy jednak wspierać się automatyzacjami. W kursie dowiesz się jak połączyć Webflow z Zapier czy Integromat, aby stworzyć rozmaite procesy wokół zakupów. Dodatkowo, możesz rozszerzyć jego możliwości o lepszy koszyk np. z pomocąć Foxy Cart i innych rozwiązań, które dają wiele możliwości!
Webflow oferuje szereg narzędzi ułatwiających modyfikację sklepu jak i zarządzanie stanem magazynowym i przyjmowanymi zamówieniami z pomocą przeglądarki - obsługa sklepu może w ten sposób łatwo dokonywać zmian i monitorować zamówienia. Dodatkowo, do sklepu można dorobić szereg automatyzacji. Jeśli zarządzasz wieloma sklepami dla klientów, możesz uruchomić opcję billing - ciekawy wariant w którym klienci opłacają wszystkie usługi a także Twoje usługi utrzymania serwisu.
Kurs został przygotowany z myślą o tych z Was, którzy znają już Webflow i chcą zacząć budować sklepy internetowe dla siebie, lub oferować taką usługę swoim klientom. Webflow to także jedno z najlepszych narzędzi pozwalających sprzedawać na cały świat cyfrowe produkty - będzie więc świetnym rozwiązaniem dla twórców, którzy myślą o takich przedsięwzięciach. Zdecydowanie polecamy jednak wcześniej zapoznać się z pozostałymi kursami Webflow, a także kursem HTML od Podstaw. Web Developerzy mogą także wykorzystać platformę e-commerce w Webflow do szybszych wdrożeń a także rozbudowania swojego portfolio o modną, rosnącą w siłę usługę.
Cześć Witaj w kolejnej lekcji z serii
pomysłów czyli lekcji w której rozmawiamy o tym jak można by było hipotetycznie
rozszerzyć funkcjonalność swojego sklepu w łeb.
Z pomocą automatyzacji np.
dzięki papierowej czy dzięki internetowi
teraz chciałbym omówić taką prostą automatyzacja która jednak będzie bardzo
przydatna i jednocześnie otworzyć twoją głowę na pewne możliwości które płyną
właśnie zautomatyzowane z pomocą API jeśli wejdziemy do naszego projektu i tutaj
wejdziemy w sekcji integracji to poza istniejącymi interwencjami na samym dole
znajduje się sekcja API Access możesz teraz wygenerować sobie token API którym
będziesz autoryzowany z poziomu zabiera czy inna gromada.
Po to aby dostać się do całego API Web Flo i to co nas szczególnie interesuje
to oczywiście jest temat trochę bardziej zaawansowany ale jeżeli lubisz grzebać i
odkrywać nowe rzeczy to myślę że będzie to temat w sam raz dla ciebie.
Tutaj znajdziemy przede wszystkim informacje o tym jak się za autem
opiekować czyli jak wykorzystać ten nasz token do tego żeby połączyć się z API
a ta sekcja która nas szczególnie interesuje jest to sekcja e-commerce
zobacz że w sekcji e-commerce znajdują się kolekcje produkty z kategorii itd.
Mamy tutaj też polecenia które pozwolą nam np.
edytować produkt to znaczy że możemy w ten sposób przekazywać nowe informacje o
produktach spoza UE lub spoza edytora czy designer.
Mamy możliwość aby notowania numerów mamy możliwość pobrania np.
wszystkich zamówień co może być przydatne.
Wyobraź sobie że chcesz dostać jakiś
raport codziennie z ilości zamówień o ich statusie itd.
Możesz to zrobić po prostu ustawić sobie
automatyzacja która codziennie o której godzinie się wykona pobierze te zamówienia
i w jakiś sposób je przetwarza a następnie wyśle np.
do ciebie na maila. Możesz też zobaczyć informacje o
pojedynczym zamówieniu a nawet zmienić jego status.
Czyli możesz zmienić go na wysłane.
Czy przykładowo na status Faber.
Więc te wszystkie rzeczy można zrobić z
pomocą API z pomocą zewnętrznej automatyzacji w samym gromadzie jeśli do
niego przejdziemy ten moduł wepchnął oferuje nam dostęp do praktycznie
wszystkich rzeczy które obecnie znajdują się w dokumentacji API ale jest
niewykluczone że będzie dawało tam jakieś funkcje z których będziemy mogli
skorzystać i gromad czy zapier nie będzie za tym nadążać.
W związku z tym wtedy można wybrać polecenie make up call.
I w tym module wystarczy się z Auto
rozumiemy czyli będziemy musieli w nagłówku tak jak to jest opisane w
dokumentacji auta i przepisać ten wygenerowany token a
następnie będziemy mogli stworzyć takie własne zapytanie.
Konstrukcja tego zapytania znajduje się w
samej dokumentacji gdzie mamy ścieżkę oraz metodę którą musimy zapytanie wysłać.
Jeżeli chcesz dowiedzieć się o tym więcej
to polecam ci kurs HTTP i API który znajduje się na łebie.
W ten sposób będziesz w stanie tworzyć
swoje własne zapytania które będą obsługiwane przez API.
Natomiast tak jak wspomniałem w momencie
gdy mamy gotowe te moduły nie musimy w zasadzie tego robić.
Spróbujmy więc przygotować jeszcze jedną
prostą automatyzacja która będzie bazowała na kolejnym kółku będziemy musieli
stworzyć dodać sobie kolejne Web huk i nazwijmy go inwestor check.
Następnie wskazujemy naszą stronę i thriller.
Tym razem wybierzemy e-commerce inwestora wybieram polecenie i wybieram OK.
Teraz chciałbym zobaczyć jakie dane przychodzą do nas w takim zdarzeniu więc
wybieram polecenie rano ONZ a następnie przechodzę do naszej strony.
No i tutaj cała sztuka polega na tym żeby
przejść do produktów i zaktualizować inwestor.
Czyli przejdźmy do jakiegoś produktu np.
kod wybierzmy jakiś jego wariant przykładowo ten pierwszy
włącza opcję Track inwestor a następnie zmienimy ilość na 100.
Wybieram polecenie dam i teraz wybieram polecenie save.
Po to żeby po zapisanie zmian i przejściu do Interu ma to odebrać odpowiednie dane.
Jak widzisz mamy identyfikator produktu i kontakt oraz inwentaryzację.
Czyli w zasadzie niezbyt dużo danych no
ale przynajmniej ten identyfikator produktu i błąd i mamy zwrócone.
W związku z tym
ten event będzie też miał miejsce za każdym razem kiedy ktoś zrealizuje zakup i
wtedy automatycznie ilość stanu magazynowa go zostanie zmniejszona przez łeb.
A co za tym idzie my dostaniemy takie powiadomienie z aktualną ilością systemów.
W kolejnym kroku opisuje tutaj email możemy właśnie na przykład wybrać wysłanie
maila jeżeli tylko mamy naszą skrzynkę połączoną możemy to zrobić w gromadzie z
pomocą aktywnego modułu e-mail w papieża możemy też podłączyć łatwo adresy mailowe.
Tutaj niestety macie wymaga to Suite więc po prostu spełniamy
opcję email i dzięki temu będziemy mogli wysłać e-mail wybieram polecenie Send End
email będziemy mogli wybrać adres z którego chcemy wysyłać a także odbiorcę.
No i przykładowo możemy tutaj założyć że chcielibyśmy wysyłać e-maile.
Na razie zatwierdza to pole w każdej
sytuacji gdzie poziom tego stanu magazynowe spadnie poniżej pięciu.
W związku z tym możemy kliknąć TUTAJ i dodać kombajn czyli warunek
a następnie sprawdzić sobie właśnie to błąd i zobaczyć czy operatora.
Rocznych ta ilość w magazynie jest np.
mniejsza albo równa i wybierzmy 5 czyli w
tym przypadku nasza automatyzacja przejdzie dalej tylko wtedy jeżeli ilość
stanu magazyn nowego produktu będzie 5 lub mniej.
I jeśli przejdzie dalej to wtedy
automatycznie wyśle e-mail w tym e-mailu możemy dodać odbiorcę i możemy tutaj
przykładowo wpisać wymyślony adres Dell Ever jest inwestor org.
A jego temat przykładowo dodać order for
IT i przekazać tutaj identyfikator produktu który chcemy zamówić w treści.
Możemy np. wpisać jaką ilość tego produktu chcemy
zamówić bądź dowolne inne dowolną inną treść.
To może być też modyfikacja do naszego zespołu.
Możemy tutaj dodać jakiś router i
przykładowo modyfikować nasz zespół na slasku albo np.
w sobie moduł list i dodawać kolejne
zadania czyli wybrać polecenie Create a task w którym to zadaniu dodali byśmy
informację że mamy kończy nam się produkt taki i taki że np.
trzeba go zamówić a następnie przypisać to do odpowiedniego pracownika więc
moglibyśmy reagować bardzo łatwo na takie rzeczy.
Dodatkowo jeżeli przykładowo ta
cała automatyzacja by nam się wykonała wysłali byśmy takiego maila z zamówieniem.
Zakładając że realizacja naszych zamówień
może trwać naprawdę szybko moglibyśmy od razu przejść znowu do LoL a następnie
wybrać polecenie update inwestora inwestora i wskazać znowu Collection IT
czyli kolekcję produktów wskazać także systemy IT then it.
Potrzebujemy pobrać sobie dynamicznie stąd identyfikator a następnie ew.
inwestorów będziemy chcieli zrobić ilość skończoną i przykładowo
zwiększyć ilość takich systemów o 50 w momencie gdy w mailu np.
napisali byśmy w treści że chcemy zamówić 50 sztuk takiego produktu.
Wybieram polecenie OK.
No i można powiedzieć że kolejny taki pomysł na automatyzacja mamy gotowy.
I wierz mi jest tymi możliwościami które daje API które Ci pokazałem w tej lekcji.
Tych pomysłów możesz stworzyć jeszcze naprawdę bardzo wiele.
I oczywiście dokończyć tę automatyzacja tak aby były działające i funkcjonalne.
Ja nie chcę tutaj przerabiać każdego
kolejnego czasu bo nie o to chodzi wolę żebyś zastanowił się nad tym jak tobie
automatyzacji mogą pomóc w rozwijaniu funkcji Twojego sklepu.
No i przede wszystkim zobaczył to co jest możliwe np.
z pomocą API.
Pamiętaj też o tym aby śledzić zmiany które Web wprowadzała API ponieważ tych
zmian jest całkiem dużo i w miarę gdy wprowadzają oni nowe funkcje np.
teraz wprowadzili te kody zniżkował kody
rabatowe i prawdopodobnie zaraz będą one w API więc zaraz będzie można też przenieść
do automatyzacji jakąś część marketingu Twojego sklepu internetowego gdzie
będziemy mogli automatycznie generować kody wysyłać je klientom i właśnie będzie
to proste z pomocą takich narzędzi jak integrować.
Mam nadzieję że otworzyłem tymi pomysłami twoją głowę na jakieś nowe ciekawe rzeczy
zastanów się co jeszcze można by było zrobić jak można by było przykładowo
przeprowadzić akcję marketingową dla produktu który dopiero co został dodany
dla Twojego sklepu i jednocześnie wysłać e-mail do wszystkich subskrybentów.
Litera czyli osób które mamy zapisane też z pomocą innej automatyzacji.
O tym że taki nowy produkt pojawił się w
sklepie to tylko jedna pewnie z tysiąca rzeczy które można zrobić.
Ja dziękuję Ci za uwagę w tej lekcji
zostawiam cię z przemyśleniami na temat tego jak można rozszerzać
e-commerce z pomocą API Instagrama tu do usłyszenia już za chwilę.