10 darmowych przykładów eCommerce eCommerce UI CSS i JavaScript

Koszyki eCommerce muszą być użyteczne i dostępne dla wszystkich odwiedzających. Twoim celem jest zwiększenie konwersji i utrzymanie zaangażowania ludzi podczas płatności, a najlepszym sposobem na to jest przejrzysty projekt, który zachęca do aktywności użytkowników.

Istnieje wiele bezpłatnych koszyków na zakupy o otwartym kodzie źródłowym, które można zmienić w dowolnym celu. I pozwoliliśmy sobie na zebranie naszych ulubionych w tej kolekcji.

Płaski wózek

Nie można zaprzeczyć popularności płaskiej konstrukcji. Działa na wszystkich typach stron internetowych i pomaga projektantom skupić się bardziej na użyteczności niż na estetyce.

Dlatego ten płaski wózek jest doskonałym źródłem informacji dla każdego, kto buduje stronę kasy eCommerce. Kolory można łatwo aktualizować, a funkcje interfejsu działają tak samo, niezależnie od stylu układu.

Nie wydaje mi się, że płaska konstrukcja jest rozwiązaniem dla każdego projektu, ale w odpowiednim scenariuszu ten długopis może działać dobrze jako szablon startowy.

Zobacz Pen Flat Cart [codepen comp] autorstwa Willa Paige

Interfejs użytkownika bez tabel

Wiele stron kasy używa tabel do organizowania danych, ale ten przykład Alexa Rodriguesa używa zamiast tego DIV .

Jest w pełni responsywny, więc układ powinien wyglądać świetnie bez względu na to, z jakiego urządzenia korzystasz. Każdy wiersz zawiera wystarczającą ilość danych, aby odpowiednio zmienić styl i utrzymać wszystko w porządku, nawet na bardzo małych ekranach. A kod CSS wykorzystuje kompas, aby zaoszczędzić czas, a także bezpłatne czcionki Google dla odrobiny stylu.

Zobacz Responsive Pen Responsible Tableless Shopping Cart autorstwa alexa rodriguesa

Pyszny koszyk na zakupy

Nie wyobrażam sobie, żeby to działało na prawdziwej stronie, ale jako eksperyment UI/UX jest całkiem fajne. Samozwańczy koszyk Delicious Shopping Cart działa jak internetowa piekarnia/słodycz ze zdjęciami różnych deserów.

Możesz przesuwać kursor w lewo/w prawo, aby poruszać się po karuzeli lub przesuwać palcem po urządzeniu mobilnym. Każdy przedmiot ma ikony plus/minus do dodawania produktów lub usuwania ich z zamówienia, a także ikonę „X”, aby całkowicie usunąć ją z koszyka.

Całość jest zbudowana na Sass, Slim i jQuery, więc jest to jeden cholerny projekt frontendowy! Jeśli chcesz przeanalizować świetny kod, ten przykład jest wart zapisania.

Zobacz koszyk na zakupy Pen Delicious autorstwa Didier

Elastyczny projekt

Oto kolejny prosty, responsywny interfejs koszyka na zakupy zbudowany na Sass i bez tabel.

Lubię tę responsywną kasę trochę bardziej niż inne, ponieważ punkty przerwania są bardziej naturalne. Nawet na mniejszych ekranach elementy koszyka nie wydają się ciasne ani nie na miejscu.

Wszystkie przyciski „usuń” działają przez JavaScript, a wartości liczbowe pól wejściowych aktualizują się automatycznie. Jest to świetne rozwiązanie w przypadku strony frontendowej koszyka, na której kupujący może chcieć zwiększyć ilość przed dokonaniem płatności i zobaczyć oszacowanie całkowitych kosztów.

Zobacz koszyk zakupowy Pen Responsive autorstwa Justina Klemm

Koszyk zakupów jQuery

Ten długopis działa bardziej jak szkielet niż pełna strona kasy, ale jest idealny jako punkt wyjścia. Deweloper Khurram Alvi stworzył ten responsywny koszyk na zakupy z podstawowym HTML/CSS i odrobiną jQuery.

Jest w pełni responsywny, a dane ilościowe działają zgodnie z oczekiwaniami. Jedną fajną rzeczą jest prostota konstrukcji tego wózka. Nie narzuca żadnych kolorów, czcionek ani tekstur do układu. Każdy, kto chce zbudować nowy wózek od zera, może zacząć tutaj, ponieważ łatwo jest go zbudować i zmienić.

Zobacz koszyk zakupów jQuery Responsive na pióro autorstwa Khurrama Alvi

Koszyk wyzwań

Co jakiś czas pojawiają się nowe wyzwania CodePen, prosząc programistów o stworzenie różnych interfejsów, takich jak strony rejestracji lub okna modalne. To pióro autorstwa Zigi Miklic powstało z wyzwania dla interfejsów koszyka na zakupy i jest arcydziełem tworzenia frontendu.

Kiedy dodasz/usuniesz produkty z koszyka, zauważysz, że ceny automatycznie aktualizują się z małą animacją przesuwania. Możesz także kliknąć dowolny obraz produktu, aby z łatwością usunąć go z koszyka. Te małe funkcje dodają wiele do interfejsu i sprawiają, że klonowanie jest dziecinnie proste.

Nawet funkcja kasy ma swoją własną animowaną funkcję, chociaż nie jest połączona z niczym na zapleczu.

Zobacz koszyk zakupów pióra [ CodePen Challange ] autorstwa Zigi Miklic

Przesuwany interfejs użytkownika

Widżety z zakładkami umożliwiają dodawanie treści do pojedynczej strony i dają użytkownikom kontrolę nad tą treścią. W tym przesuwanym koszyku możesz przełączać się między samym koszykiem a listą zapisanych „ulubionych” przedmiotów.

Żadna z funkcji kasy w rzeczywistości nie działa, więc nie możesz dodawać do koszyka ani dodawać/usuwać przedmiotów. Ale elementy interfejsu są na swoim miejscu, więc trochę magii JavaScriptu to naprawi. Mimo to jestem pod wrażeniem czystości tego koszyka i unikalnego, ale użytecznego interfejsu zakładek.

Zobacz koszyk zakupów pióra (responsywny) autorstwa Alex

Dynamiczny sklep i koszyk

Połączenie sklepu i koszyka na zakupy w jeden interfejs to ciężka praca, ale Olivia Cheng wykonała to w tym długopisie.

Wykorzystuje szerokie miniatury w siatce skonfigurowanej z przyciskiem „dodaj do koszyka” po najechaniu kursorem. Kliknij, aby dodać powyższy przedmiot z automatycznie aktualizowanymi cenami. Unikalną cechą jest ilość dodana na górze miniatury przedmiotu. Może to być mylące na prawdziwym wózku, ale gdyby liczby były nieco mniejsze, byłby to świetny sposób na zaoszczędzenie miejsca.

Zobacz wózek na zakupy i sklep z przesuwanymi piórami autorstwa Olivii Cheng

Czysty koszyk

Deweloper Bart Veneman stworzył ten przejrzysty koszyk na zakupy jako prosty szablon interfejsu. Automatycznie oblicza całkowitą cenę, a nawet uwzględnia podatki w pobliżu przycisku kasy.

Wszystkie te dynamiczne funkcje działają poprzez JavaScript i, co zaskakujące, to pióro używa Zepto zamiast jQuery. Jest to świetne rozwiązanie dla programistów, którzy wolą bibliotekę Zepto, ale tak naprawdę każdy może podnieść ten kod i przerobić go, aby pasował do dowolnego szablonu.

Zobacz koszyk na zakupy pióra Barta Venemana

Prosty koszyk z Vue.js

Kodowanie frontendu za pomocą Vue.js znacznie upraszcza tworzenie szablonów. A ten długopis jest jednym z przykładów dynamicznego koszyka, praktycznie zbudowanego na fundamencie JavaScript.

Koszyk aktualizuje się automatycznie po każdym kliknięciu, dzięki czemu możesz dodawać/usuwać elementy i natychmiast wyświetlać wyniki. Prawy górny przycisk otwiera bieżący koszyk w oknie modalnym za pomocą modalnego komponentu Bootstrap.

Jeśli podoba Ci się składnia Vue.js, ten szablon jest doskonałym miejscem do rozpoczęcia tworzenia koszyka na zakupy. Jest łatwy do dostosowania i powinien działać we wszystkich przeglądarkach.

Zobacz koszyk Pen VueJS 2 Simple Shopping autorstwa Cristiana Matos

Koszyk domen

Oto jeden z moich ulubionych projektów koszyka na zakupy wzorowany na rejestratorze domen. Koder Jesse Bilsten szczegółowo zapoznał się z tym interfejsem, w tym z sekcją płatności i wymaganym obszarem T&C.

Musisz kliknąć przycisk „Zgadzam się” przed zakończeniem procesu realizacji transakcji. Jest to niewielka, ale cenna funkcja dla niektórych witryn eCommerce i bardzo podoba mi się dwukolumnowy układ. A ten projekt jest całkowicie responsywny, więc możesz go sklonować do użytku w prawie każdym systemie eCommerce.

Zobacz koszyk responsywny na pióro – marka v01 autorstwa Jesse Bilsten