10 Contoh UI Keranjang Belanja eCommerce CSS & JavaScript Gratis

Kereta eCommerce harus dapat digunakan dan dapat diakses oleh semua pengunjung. Sasaran Anda adalah meningkatkan konversi dan membuat orang tetap terlibat selama proses pembayaran, dan cara terbaik untuk melakukannya adalah dengan desain bersih yang mendorong aktivitas pengguna.

Ada banyak keranjang belanja open source gratis yang dapat Anda ubah gaya untuk tujuan apa pun. Dan kami telah mengambil kebebasan mengumpulkan favorit kami dalam koleksi ini.

Keranjang Datar

Tidak dapat disangkal popularitas desain datar. Ini berfungsi untuk semua jenis situs web, dan membantu desainer lebih fokus pada kegunaan daripada estetika.

Itulah mengapa kereta datar ini menjadi sumber yang bagus bagi siapa saja yang membangun halaman checkout eCommerce. Warnanya mudah diperbarui dan fitur antarmuka bekerja sama terlepas dari gaya tata letak.

Saya tidak berpikir desain datar adalah solusi untuk setiap proyek, tetapi dalam skenario yang tepat pena ini dapat bekerja dengan baik sebagai template awal.

Lihat Keranjang Pena Flat [codepen comp] oleh Will Paige

UI Tanpa Meja

Banyak halaman checkout menggunakan tabel untuk mengatur data tetapi contoh oleh Alex Rodrigues ini menggunakan DIV s sebagai gantinya.

Ini sepenuhnya responsif, jadi tata letaknya akan terlihat bagus apa pun perangkat yang Anda gunakan. Setiap baris menyimpan data yang cukup untuk menata ulang dengan benar dan menjaga semuanya tetap teratur, bahkan di layar super kecil. Dan kode CSS menggunakan Kompas untuk menghemat waktu bersama dengan Google Font gratis untuk sedikit gaya.

Lihat Keranjang Belanja Tanpa Meja Responsif Pena oleh alex rodrigues

Keranjang Belanja Lezat

Saya tidak dapat membayangkan ini bekerja di situs nyata tetapi sebagai percobaan UI/UX itu cukup keren. Keranjang Belanja Lezat self-titled bertindak seperti toko roti/permen online dengan foto-foto makanan penutup yang berbeda.

Anda dapat menggerakkan kursor ke kiri/kanan untuk maju melalui korsel atau menggesek pada perangkat seluler. Setiap item memiliki ikon plus/minus untuk menambahkan item atau menghapusnya dari pesanan Anda, ditambah ikon 'X' untuk menghapusnya sepenuhnya dari keranjang Anda.

Semuanya dibangun di atas Sass, Slim, dan jQuery, jadi ini adalah salah satu proyek frontend! Jika Anda ingin membedah beberapa kode hebat, contoh ini layak untuk disimpan.

Lihat Keranjang Belanja Pena Lezat oleh Didier

Desain responsif

Inilah UI keranjang belanja responsif sederhana lainnya yang dibangun di atas Sass dan tanpa meja.

Saya suka checkout responsif ini sedikit lebih dari yang lain karena breakpoints terasa lebih alami. Bahkan pada layar yang lebih kecil, item keranjang tidak terasa sempit atau tidak pada tempatnya.

Semua tombol "hapus" berfungsi melalui JavaScript, dan bidang input numerik memperbarui harga secara otomatis. Ini bagus untuk halaman keranjang frontend di mana pembeli mungkin ingin meningkatkan jumlah sebelum membayar dan untuk melihat perkiraan total biaya.

Lihat Keranjang Belanja Responsif Pena oleh Justin Klemm

Keranjang Belanja jQuery

Pena ini bertindak lebih seperti gambar rangka daripada halaman checkout penuh tetapi sempurna sebagai titik awal. Pengembang Khurram Alvi membuat keranjang belanja responsif ini dengan HTML/CSS dasar dan sedikit jQuery.

Ini sepenuhnya responsif, dan input kuantitas berfungsi seperti yang Anda harapkan. Satu hal yang menyenangkan adalah kesederhanaan desain gerobak ini. Itu tidak memaksakan warna, font, atau tekstur apa pun ke dalam tata letak. Siapa pun yang ingin membangun kereta baru dari awal mungkin mulai di sini karena mudah untuk membangun dan merestrukturisasi.

Lihat Keranjang Belanja jQuery Responsif Pena oleh Khurram Alvi

Keranjang Tantangan

Seringkali tantangan CodePen baru muncul meminta pengembang untuk membuat antarmuka yang berbeda seperti halaman pendaftaran atau jendela modal. Pena oleh Ziga Miklic ini berasal dari tantangan untuk UI keranjang belanja dan merupakan mahakarya pengembangan frontend.

Saat Anda menambahkan/menghapus item dari keranjang, Anda akan melihat harga diperbarui secara otomatis dengan animasi geser kecil. Anda juga dapat mengklik gambar produk apa pun untuk menghapusnya dari keranjang dengan mudah. Fitur-fitur kecil ini menambahkan banyak ke antarmuka dan membuat kloning menjadi mudah.

Bahkan fungsi checkout memiliki fitur animasinya sendiri, meskipun tidak terhubung dengan apa pun di backend.

Lihat keranjang Belanja Pena [ Tantangan CodePen ] oleh Ziga Miklic

Geser Keranjang UI

Widget dengan tab memungkinkan Anda menambahkan konten ke satu halaman dan memberi pengguna kekuatan atas konten itu. Di gerobak geser ini Anda dapat beralih antara gerobak itu sendiri dan daftar item "favorit" yang disimpan.

Tidak ada fitur checkout yang benar-benar berfungsi, jadi Anda tidak dapat memfavoritkan atau menambah/menghapus item ke dalam troli. Tetapi item antarmuka sudah ada, jadi sedikit keajaiban JavaScript akan memperbaikinya. Namun, saya terkesan dengan betapa bersihnya tampilan keranjang ini dan antarmuka tab yang unik namun dapat digunakan.

Lihat keranjang Belanja Pena (responsif) oleh Alex

Toko & Keranjang Dinamis

Menggabungkan toko dan keranjang belanja menjadi satu antarmuka adalah pekerjaan yang sulit, tetapi Olivia Cheng menyelesaikannya dengan pena ini.

Ini menggunakan thumbnail lebar dalam kisi yang diatur dengan tombol "tambahkan ke troli" saat mengarahkan kursor. Klik ini untuk menambahkan item di atas dengan harga yang diperbarui secara otomatis. Salah satu fitur unik adalah jumlah yang ditambahkan di atas thumbnail item. Ini mungkin membingungkan di kereta nyata, tetapi jika jumlahnya sedikit lebih kecil, ini akan menjadi cara yang bagus untuk menghemat ruang.

Lihat Keranjang Belanja & Toko Pen Sliding oleh Olivia Cheng

Keranjang Belanja Bersih

Pengembang Bart Veneman membuat keranjang belanja bersih ini sebagai templat antarmuka sederhana. Ini otomatis menghitung harga total dan bahkan termasuk pajak di dekat tombol checkout.

Semua fitur dinamis ini bekerja melalui JavaScript dan secara mengejutkan pena ini menggunakan Zepto di atas jQuery. Ini bagus untuk pengembang yang lebih menyukai perpustakaan Zepto, tetapi sebenarnya siapa pun dapat mengambil kode ini dan mengerjakannya kembali agar sesuai dengan template apa pun.

Lihat Keranjang Belanja Pena oleh Bart Veneman

Keranjang Sederhana dengan Vue.js

Pengkodean frontend dengan Vue.js membuat templating jauh lebih sederhana. Dan pena ini adalah salah satu contoh kereta dinamis yang praktis dibangun di atas dasar JavaScript.

Keranjang diperbarui secara otomatis dengan setiap klik sehingga Anda dapat menambahkan/menghapus item dan melihat hasilnya secara instan. Tombol kanan atas membuka keranjang Anda saat ini di jendela modal menggunakan komponen modal Bootstrap.

Jika Anda menyukai sintaks Vue.js, maka template ini adalah tempat yang bagus untuk mulai membuat keranjang belanja. Sangat mudah untuk menyesuaikan dan harus bekerja dengan baik di semua browser.

Lihat keranjang Belanja Sederhana Pen VueJS 2 oleh Cristian Matos

Keranjang Domain

Inilah salah satu desain keranjang belanja favorit saya yang dimodelkan setelah pendaftar domain. Coder Jesse Bilsten mendapat detail dengan antarmuka ini termasuk bagian pembayaran dan area T&C yang diperlukan.

Anda harus mengklik tombol “Saya setuju” sebelum menyelesaikan proses checkout. Ini adalah fitur kecil namun berharga untuk beberapa situs eCommerce, dan saya sangat menyukai tata letak dua kolom. Dan desain ini benar-benar responsif sehingga Anda dapat mengkloningnya untuk digunakan di hampir semua sistem eCommerce.

Lihat Keranjang Belanja Responsif Pena – Merek v01 oleh Jesse Bilsten