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.
Chciałbym pokazać ci w niej jak możesz
obsłużyć formularze poza pulą czyli przykładowo zapisywać ludzi na Twoją listę
mailową twój biust Letter na maile lub na jakimś innym systemie typu response.
Jeżeli podasz tutaj adres e-mail na przykład wpisze sobie test koles kropka
i wybiorę polecenie senne to w tym momencie ten
e-mail jest przyjmowany zgłoszenie jest przyjmowane i w łeb ono w momencie gdy
przejdę do edycji pojawia się w specjalnej sekcji czyli w sekcji Forex.
W tym miejscu pojawił się ten e-mail ja teraz mogę sobie na przykład eksportować
to jako plik i nie wiem gdzieś tam to dopisać czy importować plik TSV np.
do mail chip ale oczywiście nie jest to najlepszy i najbardziej wygodny sposób my
chcemy żeby te zgłoszenia automatycznie trafiały do jakiegoś systemu.
Niestety zerowego które mamy np.
właśnie Get Response czy czy mail
no i żeby to zrobić musimy przejść do ustawień takiego formularza.
W zasadzie jeśli zobaczysz na forum blog i
na jego ustawienia tutaj jest kilka rzeczy na które warto zwrócić uwagę.
Pierwsza rzecz to jest nazwa czyli form Manfred Just later form.
Możemy to po prostu zmienić na Mk TP.
I kolejne rzeczy są związane z tą akcją
która jest wykonywana po wysłaniu formularza domyślnie jest to
the World w związku z tym obsługiwania formularza przez UEFA.
Jeśli zostawimy te dane ustawione w ten
sposób możemy reagować na zdarzenia z formularza również np.
z poziomu zapiera nam takie zdarzenie jest możliwe do odczytania.
Możemy także posłużyć się przykładowo integruje zatem integrować to jest kolejna
aplikacja bardzo podobna do Era która pozwala nam przechwycić dane a następnie
przetworzyć je i odpowiednio rozesłane do jakichś innych serwisów.
Jeśli macie piszemy LoL a pokazujecie go również dlatego że w darmowej wersji
internetu możesz osiągnąć dużo więcej niż w papierze aczkolwiek jest on trochę
trudniejszy do nauczenia się to możemy teraz tutaj wybrać moduł łeb.
Mamy tą pierwszą opcję czyli włącz i więc
to jest opcja która dostarczy nam danych instant.
Czyli w momencie gdy ktoś np.
zgłosi forum bliżej to jest to o co nam chodzi ale też zobacz że kiedy
opublikujemy stronę mamy nowy order Commerce albo order się zmieni.
Inwestor jeśli zmieni to możemy wywołać to możemy przechwycić takie zdarzenia
wewnątrz i tu i możemy z tymi danymi zrobić coś dalej świetnie.
No to skorzystamy z tego łącz więc i teraz
będziemy musieli kliknąć polecenie a następnie dodać sobie nowy łeb.
Możemy nazwać go
też sama jeśli jeszcze nie mamy połączonego zintegrowania naszego konta
Web wybieramy polecenie add a następnie continuum i wewnątrz Flo auto rysuje
stronę którą do której chcemy uzyskać dostęp.
Teraz wybieramy właśnie te małe Connection Side.
Wskazujemy m KDP czyli naszą docelową stronę i thriller Tip będziemy chcieli
obsłużyć Forbesa czyli w momencie gdy ktoś zgłasza nam się z formularza wybieramy
polecenie Save i teraz nie musimy nawet nic dodatkowo skonfigurować ponieważ
automatycznie zostało to spięte do web flow i będziemy
za każdym razem gdy otrzymamy jakieś milion z formularza będziemy te dane
otrzymywać możemy to symulować wybierając polecenie ran ONZ.
Teraz nasz scenariusz na słuchał danych.
W związku z tym gdybym ja przeniósł się do naszej strony wejdziemy do strony która
jest Live i wypełni raz jeszcze ten formularz.
Użyje tego samego adresu Tesco odesłał wysyłam dane i zobaczę te dane
automatycznie zostały otrzymane i mamy taką sekcję.
Data nie jest eter e-mail jest przekazany
Google czyli ten adres który został zapisany świetnie klikamy na plus i dodaje
tutaj na przykład Get Response albo mail chipa albo w zasadzie większość
popularnych narzędzi które obsługują maile np.
Miller Lite są tutaj dostępne ja wybiorę
akurat mail chipa i będę chciał dodać albo obdarować subskrybentów na mojej liście.
I znów jeśli nie mam czym skonfigurować
dodaje połączenie z marginesem wybieram polecenie continuum.
Po zalogowaniu na marginesie Autor rysuje moje konto wybieram polecenie.
I teraz już konto mam pod piętę mogę wybrać sobie konkretną listę do której
zapisuje ludzi i zależy mi na tym żeby przekazać email adres to jest
najważniejsze e-mail adres to jest klikamy na tym i mam wszystkie dane dostępne z
tych danych które zostały odczytane a więc musimy najpierw uruchomić odebrać te dane
żebyśmy w ogóle mogli przekazać je do domu modułu.
I wybieram user email czyli ten
e-mail który zostanie przesłany w formularzu zostanie automatycznie dopisane
ze statusem subskrypcję na moją listę koles.
Na marginesie mogę jeszcze wybrać jakieś
dodatkowe opcje wybrać też opcję zaawansowane i wprowadzić różne dane.
Gdybym miał informację o tym np.
jakie jest imię czy telefon mógłbym tutaj to wszystko przekazać.
Natomiast mi wystarczy adres e-mail wybieram ok.
. I mój scenariusz jest gotowy.
Co to znaczy.
To znaczy że w momencie gdy ktoś poda adres e-mail na naszej stronie możemy
jeszcze raz to sobie przetestować wybiorę Command r odświeża naszą stronę.
Podam tutaj jakiś inny adres bo tamten już jest na mojej liście.
Wysyła się teraz dane są otrzymywane przekazywane do maila i na maila.
Operacja zakończyła się sukcesem.
Ten adres e-mail jest jeden dwa trzy
kołowe zostały dopisane do mojej listy więc w ten prosty sposób możemy obsłużyć
formularz zapisu na nim w sposób automatyczny możemy przekazywać te dane.
Rzecz jasna dodawanie tych danych do
Marcina to jest tylko jedna z opcji którą możemy zrobić.
Możemy tutaj stworzyć dużo bardziej zaawansowane automatyzacja natomiast to
jest już temat na osobne szersze opracowanie ale teraz chciałbym głównie
pokazać i zapoznać się z nowym narzędziem i pokazać Ci że te dane z łatwością możemy
gdzieś wyciągnąć na zewnątrz możemy je przetworzyć w jakiś inny sposób.
Chciałbym żebyś znał zarówno zapier jak i inne gromady integrować ja robię większe
automatyzacji i to tutaj właśnie pracuje mi się najwygodniej
aczkolwiek tak jak powiedziałem ma on trochę większy Lechii kar trochę więcej
czasu trzeba poświęcić na naukę tego narzędzia.
No ale oferuje naprawdę niesamowite możliwości i teraz chciałem wskazać na
jeszcze jedną z nich ponieważ może się zdarzyć tak że będziesz korzystał ze
strony UE aczkolwiek w module e-commerce raczej nie ma takiego prawdopodobieństwa
bo cały e-commerce wiąże się z tym że będziemy musieli jednak
prostować to z pomocą planu e-commerce na łatwą.
Ale jeśli będziesz używał stron i później eksportować je np.
żeby zapewnić taki szablon do Shopping
to w tych ustawieniach formularza możesz podać coś takiego jak Action.
I to jest na razie łatwe.
Ale gdybyśmy zmienili tą metodę wysyłania na metodę post to moglibyśmy w akcji podać
tutaj adres który wygeneruje sobie z pomocą Web Chucka.
To jest taka funkcjonalność którą mamy
zarówno w papierze jak i tutaj w gromadzie.
Jeśli używasz łeb i użyje Tigera jako łupu czyli Custom upu wybierzesz sobie
to tutaj możesz stworzyć nowy klub który będzie nas kiwał różnych danych.
Na razie piszemy może test i wybierzemy polecenie Save i masz adres na który
słuchaj je właśnie danych wysłanych przez dowolny formularz np.
wybieramy polecenie kopii adresu LIBOR
czyli kupujemy sobie to do schowka i teraz przekazujemy ten adres.
Action to jest alternatywny sposób jak
możesz rozmaite dane wysłać z Web Flow teraz nawet jeżeli byś pobrał kod źródłowy
i stawiał to nie na urlop tylko gdzie indziej to ta akcja będzie działać.
I ten formularz będzie wysyłany na ten łeb na ten adres do innego masztu
i dokładnie tak jak mieliśmy w tym przypadku ten próg jako pierwszy taki
moduł odbierze nam te dane i będziemy mogli je jakoś przetworzyć.
Chciałem ci tylko pokazać i zasygnalizować że nie musisz korzystać
koniecznie z hosting wepchnął i zbudowanych jego funkcji.
Możesz to zrobić troszeczkę inaczej właśnie z pomocą bo pługów
znów jest tam trochę bardziej zaawansowany więc odsyłam Cię do innych materiałów.
Natomiast na teraz to wszystko dziękuję Ci
bardzo za uwagę i myślę że przygotowaliśmy sobie fajny szkielet sklepu
przygotowaliśmy również wiele integracji i w końcu pokazałem ci możliwości
rozszerzenia tego sklepu z pomocą różnych zewnętrznych narzędzi i wspinanie.
Dzięki zabiegowi i dzięki internetowi myślę że to na pewno
coś co pozwoli Ci rozszerzyć swoje umiejętności i pomyśleć o tym sklepie.
Nie jako takiej zamkniętej całości że jeżeli nie ma jakiejś funkcji albo np.
nie da się zmienić jej szablonu maila no
to będziesz przynajmniej wiedział że jest to możliwe że można.
Z pomocą jakiegoś innego narzędzia raz jeszcze dzięki za uwagę i do usłyszenia.