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ę.
Witaj w kolejnej lekcji przyjrzyjmy się teraz temu jak wygląda czeka
V na naszej stronie czyli dodajemy produkty do koszyka a
następnie przechodzimy do opcji Continuum account albo wybieramy jedną z opcji
płatności po przepracowaniu płatności w tych opcjach także przejdziemy do
odpowiedniej strony która pozwoli nam wypełnić dodatkowe dane.
Ta strona zawiera po pierwsze XML czyli informacje o tym co znajduje się w naszym
koszyku po prawej stronie mamy podsumowanie zamówienia które przykleja
ona i będzie tutaj jeździć ponieważ pozwala nam ono dokończyć zamówienie.
W tym formularzu.
Gdy przejdziemy do czekał to w zasadzie
będziemy mieli jedynie możliwość płacenia kartą.
Stąd znajduje się tutaj opcja Payment Info
która zawiera dane kart które musimy wypełnić ale oprócz tego
mamy Customer info czy informacje o kliencie tutaj jest tylko e-mail później
adres dostawy jeśli dostawa jest opcją dla naszych produktów
i kolejną mamy opcję dostawy rodzaj dostawy automatycznie wykrywa w jakim
kraju jesteśmy i dobiera tę opcję dostawy z tych zdefiniowanych w ustawieniach.
Na razie są to wszystkie opcje zamocowane
ale oczywiście gdy opublikujemy tę stronę w planie e-commerce
będą one automatycznie pobrane z tych opcji które pisaliśmy w ustawieniach
Payment info czyli właśnie podanie informacji o karcie.
No i Bing adres czyli adres do faktury w którym można zaznaczyć że jest taki sam
jak adres wysyłki i wtedy zostaną te pola automatycznie też wypełnione.
Następnie mamy guzik Please order i w ten sposób właśnie składamy zamówienie.
Następnie zostaniemy przekierowanie przez naszego operatora płatności czy
PayPal które na razie możemy zapomnieć łapał przez płatność i przejdziemy do
strony potwierdzenia która wygląda w ten sposób.
Mamy tutaj informację o tym że udało nam
się kupić mamy podsumowanie produktów podsumowanie płatności i ich wysyłki.
I to jest ostatnia strona z tym jak Out
floor tę stronę są zdefiniowane tutaj jako osobne strony.
Pierwsza to czeka kolejne mamy czekać.
Po wybraniu opcji PayPal on wygląda troszeczkę inaczej.
No i w końcu mamy tą stronę.
Order Information czyli potwierdzenie naszego zakupu.
I dodatkowo jeśli przejdziemy do strony
czekał to będziemy mogli też zobaczyć co się stanie gdy taki zakup się nie uda.
Jeśli ich nie ma na tym formularzu to możemy zobaczyć jego stan error czyli po
kliknięciu Please order w momencie gdyby płatność nie została pobrana poprawnie
to zostanie wyświetlony taki stan error który także możemy dostosować.
Poza tym najważniejszą opcją dla
formularza którą tutaj wybieramy jest to czy nasze produkty mają dostępne shopping
czyli wysyłanie wysyłkę fizyczną do klienta czy mamy shopping czyli np.
sprzedajemy produkty cyfrowe co też da się
robić i wtedy jeśli wybierzemy Shipping to zauważy że mamy podsumowanie koszyka ale
nie mamy żadnych danych do wysyłki jest tylko link adres czyli adres do rachunku.
Natomiast jeżeli włączymy Shipping to dodatkowo pojawia się nam tutaj całe pole
z informacją o tym gdzie taka paczka ma zostać wysłana.
Przejdźmy do stanu The World.
Oczywiście mamy możliwość wewnątrz tego kontenera wewnątrz tego formularza zmiany
elementów dodania tutaj ewentualnie jakichś elementów zmiany ich stylów zmiany
typów nagłówków itd więc to wszystko możemy dowolnie przestawiać.
Możemy przechodzić po ustawieniach i dostosowywać wygląd tej strony.
Natomiast jeśli chodzi o jej BB jeśli chodzi o jej działanie
i rzeczy które są tutaj wymagane nie możemy tego dostosować.
Przykładowo gdybyśmy chcieli usunąć całe
Shipping adres Flora nam powiesz nie może tego zrobić no to jak moglibyśmy usunąć
Shipping adres to po prostu wyłączyć go na formularzu i wybrać opcję Shipping.
Podobnie jest z przykładowo Payment info.
Nie możemy go usunąć.
To jest kluczowy element tej strony płatności więc nie da się tego usunąć
podobnie jak innych elementów które są obligatoryjne więc w zasadzie my musimy po
prostu zadbać o położenie układ tych elementów oraz ich sterowanie.
Natomiast one muszą pozostać tutaj takie same nie muszą pozostać w tej kolejności.
Możemy też oczywiście dostosować to co wyświetla się jeśli chodzi o koszyk jakie
dane są tutaj wyczerpane o produktach więc to wszystko oczywiście jest możliwe i
dodatkowo mamy taką specjalną sekcję w momencie gdy
jesteśmy na stronie czeka od Czecha out Page.
To właśnie z tych bloków jest zbudowany cały czeka odpowiedź.
Gdybyśmy robili to na nowej stronie WWF.
No to wtedy po prostu w pustym kontenerze dodali byśmy czeka otworem.
Następnie mamy order a to są właśnie te które są tu wyświetlane.
Kolejny order z Samary czyli podsumowanie
z informacją o dostawie z informacją o płatności i dwie
rzeczy które obecnie nie znajdują się na tej stronie czyli dystans oraz info.
Gdybyśmy chcieli poprosić naszego klienta o jakieś dodatkowe dane
to moglibyśmy to zrobić z pomocą właśnie tej sekcji jako pola info.
Jeśli byśmy wrócili byśmy tutaj to pole to możemy zdecydować co chcemy pokazać.
Niestety możemy wrzucić tylko jedno pole
text Wild jedno tekstylia i jeden check box.
Ewentualnie możemy zadecydować że niektóre z tych elementów nie będą.
Natomiast mamy do dyspozycji tylko te trzy pola.
Naturalnie możemy zmienić to jakie dane mają zostać podane np.
telefon i Enter von Amber możemy to
zmienić na dowolne inne informacje które chcemy aby klient nam tutaj przekazał i
typ tych informacji tak jak typ pól import możemy wybrać stąd jak również mamy tekst.
Czyli taki bardziej Free Form element który pozwoli np.
dodać jakieś komentarze do naszego
zamówienia no i w końcu mamy jakąś opcję np.
wysłania tego jako gest jako prezent i to po prostu zostanie
dodane do meta danych naszego zamówienia i będzie oznaczone więc nie są to jakieś
zaawansowane opcje ale w zasadzie w większości przypadków w klasycznych
sklepach wszystko to co nam jest potrzebne.
No i mamy jeszcze taką sekcję bliska z którą możemy tutaj przerzucić np.
mogę wrzucić ją poniżej.
Dzięki temu taki użytkownik będzie mógł dodać deskami
KOD i po kliknięciu w sekcję order Samary ponieważ tutaj dane są brane dynamicznie.
Jak widzisz są one brane z
nowej kolekcji order i ta kolekcja order zawiera masę rzeczy z których możemy teraz
skorzystać i przykładowo tutaj mamy po prostu total price sub total price czyli
te składowe ceny metod najmu itd Shipping adres czyli
wszystkie te rzeczy są dynamiczne i możemy z nich skorzystać z tej kolekcji order.
Natomiast po kliknięciu w Baton Play łeb
floor sprawdzi dla nas czy taki kod promocyjny istnieje w naszej bazie.
Jeśli tak to zastosuje go jeśli nie
wyświetli ten stan z błędem który też można dostosować.
Natomiast jeżeli chodzi o same
KOD to wchodzimy do modułu e-commerce znajduje się tutaj sekcja bliska.
I teraz musimy dodać nowe a następnie mamy możliwość
wybrania nazwy dlatego dla tej promocji nazwę następnie jakieś notatki które będą
wyświetlane ale koniecznie musimy podać kod czyli np.
cel i mamy możliwość albo wybrania
promocji która jest promocją procentową albo Fix amount czyli np.
obniżamy cenę koszyka o 10 złotych albo procentowo obniżamy to tę cenę np.
o 10 proc.
kolejno będziemy musieli wybrać od kiedy nasza promocja jest ważna i kiedy wygasa.
Możemy też zaznaczyć opcję że nigdy nie
wygasa wtedy kod rabatowe zawsze będzie ważne.
No i jeszcze mamy restrykcje czyli możemy ograniczyć to np.
do pierwszych dziesięciu albo do pierwszych stu zakupów i później już ta
promocja przestanie działać albo możemy ograniczyć to na konkretnego klienta czyli
konkretny adres e-mail który w tym przypadku sprawdzi że taka osoba może
tylko jeden raz przykładowo skorzystać z promocji.
No i oczywiście mamy też jej status.
Możemy taką promocję sobie dodać ale nie
włączać jej jeszcze po prostu zaznaczając że jest nie aktywna jeżeli chcemy ją
włączyć włączamy Active i teraz jeżeli wpisał bym to słowo kluczowe
jako skaut KOD to wtedy zostałoby zostałoby to zaaplikował.
I moja cena została obniżona.
Oczywiście nie działa to znów w Lądzie będzie działać docelowo w momencie gdy
opublikujemy naszą stronę jako strona e-commerce.
No więc to jest w zasadzie wszystko co
można zrobić na tej stronie podsumowania zamówienia czyli czeka.
Nie da się ukryć że ta strona narzuca nam pewne ograniczenia.
Oczywiście nie chodzi mi tutaj o celowanie bo rzecz jasna sterowanie tak jak
wszystkie inne elementy WF są w stanie bardzo łatwo zmienić np.
zmienić kolor tła itd więc wszystkie style możemy odmienić.
Musimy pamiętać o tym że jesteśmy
ograniczeni do korzystania z tych komponentów z tych elementów które
dostępne są w ramach Check automatyczne i oczywiście jakichś statycznych rzeczy.
Ostateczny tekst i tak dalej.
Natomiast wewnątrz czeka od patcha mamy do
dyspozycji całkiem sporo danych i co prawda nie dorzuca tutaj jakiejś kolejnej
kolekcji ale z tych kolekcji które tutaj mamy zobacz że naprawdę mamy sporo różnych
możliwości bo po pierwsze ta kolekcja jest połączona z produktami a więc
będziemy mieli wszystkie dane produktów czyli nazwę skrypty itd.
Po drugie mamy też kolekcje które są
które są połączone z akurat tutaj będziemy mieli coś takiego jak extra i extra.
Ta kolekcja będzie zawierała nazwę i cenę
ale mamy też kolekcję która się nazywa order.
I w tej kolekcji orderu znajdują się wszystkie dane zakupu czyli właśnie np.
Berling adres siebie i adres ale także sub
Total Total czyli łączna cena i również informacje o nazwie metody
wysyłki wszystko inne możemy tutaj dostosować guzik czyli guzik place order w
zasadzie nie ma innych opcji poza tym że mamy coś takiego jak ten tekst podstawowy
oraz o VAT tekst w momencie gdy nasze zamówienie jest procedowana czyli środki
są ściągane z karty my nie będziemy wychodzić z tej strony
ale zmieni się tekst na tym przycisku na ten inny czyli na składanie zamówienia.
Poinformuje użytkownika że jego zamówienie jest w tym momencie w trakcie realizacji.
Jeśli się to nie uda się nie powiedzie to dostanie taki Error Message.
Jeśli się powiedzie zostanie
przekierowanie na tą kolejną stronę czyli Border Information.
Zajmijmy się teraz tą stroną ponieważ na
niej znów mamy dostęp do wielu różnych ciekawych danych.
Po pierwsze mamy informacje o kliencie to jest też
w ramach tego formularza zostanie
wyświetlony znowu kolejny kontener w którym są zawarte informacje o
kliencie czyli tutaj będą też dane z tego z tej kolekcji Order które zawierają
wszystkie informacje które klient wcześniej wypełnił.
Mamy też do dyspozycji jego adres mamy też
order Samary metodę płatności a także metodę wysyłki i również produkty.
Jeśli przejdziemy teraz do sekcji AW to
zobaczymy że właśnie wszystkie te rzeczy są tutaj więc ten szablon został po
składany właśnie z tych wszystkich rzeczy order.
Firma znajduje się tutaj mamy Order
które są poniżej mamy Customer info czyli tutaj mamy Shipping metod.
W tym miejscu oraz Payment info tutaj
nawet możemy z tego Payment info pobrać sobie takie dane w tym bloku przykładowo
jak mamy coś takiego jak Card Last floor czyli ostatnie 4 cyfry karty.
Mamy kolejne rzeczy czyli link adres
adresy i mamy City country czyli wszystkie te rzeczy dynamicznie możemy sobie pobrać
i wyświetlić w miejscu w którym chcemy aby się wyświetlał.
I tutaj mamy też większą swobodę odnośnie
tego co chcemy a czego nie chcemy wyświetlić.
Poza tymi standardowymi rzeczami które są dostępne z zamówienia i również na stronie
czeka autu na stronie potwierdzenia mamy też dostępne coś takiego jak Download.
Jeśli weszliśmy teraz do produktów to w naszych produktach znajduje się weźmy na
chwilę link znajduje się tutaj coś takiego jak sekcja download i możemy przełączyć
taki produkt żeby zawierał coś do pobrania.
Przykładowo jeśli sprzedajemy jakieś elektroniczne dobra czyli np.
buka to będziemy mogli włączyć to do
produktu i dodać do niego jakiś plik download do pobrania.
Jeśli teraz zachowuję sobie jakiś nowy
produkt to zobaczy że ma on coś takiego jak Down noc i wtedy jeśli to wybiorę to
będę mógł podać jego nazwę a także przekazać URL np.
URL z Dropbox a
na razie co prawda tylko takie zewnętrzne url są wspierane aczkolwiek wkrótce
prawdopodobnie da da możliwość po prostu Apple budowania tutaj jakiegoś pliku.
I jeżeli nie sprzedajemy tego typu dobra to teraz jeżeli dany produkt miałby
możliwość pobrania jakiegoś pliku i ten plik dołączone to wtedy moglibyśmy
skorzystać z tego elementu download i po prostu przeciągnąć go puścić na stronę.
W tym momencie nie możemy tego zrobić ale
pokażę ci też jeszcze dlaczego dlatego że po prostu go nie widać.
Zresztą tutaj jest nawet taka sekcja
download tyle że ona jest wyświetlana warunkowo.
Właśnie to jest to pole
te które tutaj pozwala nam także wyświetlać różne rzeczy w zależności od
tego co znajduje się w całej kolekcji order.
Więc jeżeli He's download jeżeli jakiś
produkt ma coś do pobrania to możemy wtedy to wyświetlać.
Jest tu taki warunek już stworzony domyślnie.
Jeżeli MS download is on to będziemy wyświetlać tą sekcję z pobraniem i my
możemy na chwilę usunąć ten warunek żeby mógł pokazać jak to wygląda.
Tutaj po prostu znajdzie się link do pobrania pliku będziemy oczywiście mogli
to robić znajdzie się link do pobrania tego konkretnego pliku tego produktu który
został zakupiony więc bardzo fajna opcja w przypadku zakupu cyfrowych dóbr.
Wtedy również mielibyśmy
tutaj prawdopodobnie w formularzu byśmy od razu ustawili Shipping
czyli tutaj też nie wyświetli byśmy tych informacji o tym gdzie ma zostać
dostarczone a zamiast tego wyświetla mielibyśmy sekcję download która
by pozwoliła komuś pobrać nasz cyfrowy produkt.
Mogę teraz przywrócić tę poprzednią opcję.
Czyli co się tutaj dwa razy.
W zasadzie to wszystko co mamy tutaj do wyjaśnienia.
Pamiętaj proszę o tym że na tej stronie samej stronie czekał tu również rozmaite
rzeczy są pokazywane warunkowo czyli przykładowo możemy przejść do bloku
Shipping adres zauważy on też ma automatycznie włączone
adres IP jest on. Czyli jeżeli w naszym zamówieniu jest
właśnie wymagany Shipping adres to wtedy będzie to pokazywane warunkowo.
Więc to jest całkiem sprytny mechanizm i
tak naprawdę w wielu przypadkach nie trzeba tutaj praktycznie w nic ingerować.
Zresztą nie mamy w sobie takich możliwości
poza sterowaniem tych elementów i oczywiście jeżeli tworzyliśmy tą stronę od
podstaw no to możemy to sobie dowolnie rozmieścić dowolnie sterować.
Tutaj mamy już przygotowane zdefiniowany rejon od którego ja bardziej nie będę
zmieniał bo to nie jest kurs zastosowaniu ale chciałem właśnie wyjaśnić Ci wszystkie
rzeczy które się tutaj znajdują na stronach czeka autor i podsumowania.
Dzięki serdeczne w związku z tym za uwagę i do usłyszenia w kolejnej.