Xe đẩy thương mại điện tử cần có thể sử dụng và truy cập được cho tất cả khách truy cập. Mục tiêu của bạn là tăng chuyển đổi và giữ mọi người tương tác trong quá trình thanh toán và cách tốt nhất để làm điều này là thiết kế gọn gàng khuyến khích hoạt động của người dùng
Có rất nhiều giỏ hàng mã nguồn mở miễn phí mà bạn có thể thiết kế lại cho bất kỳ mục đích nào. Và chúng tôi đã tự do thu thập các mục yêu thích của mình trong bộ sưu tập này
Giỏ phẳng
Không thể phủ nhận sự phổ biến của thiết kế phẳng. Nó hoạt động cho tất cả các loại trang web và nó giúp các nhà thiết kế tập trung nhiều hơn vào khả năng sử dụng hơn là tính thẩm mỹ
Đó là lý do tại sao giỏ hàng phẳng này tạo ra một nguồn tài nguyên tuyệt vời cho bất kỳ ai xây dựng trang thanh toán Thương mại điện tử. Màu sắc dễ cập nhật và các tính năng giao diện hoạt động giống nhau bất kể kiểu bố cục
Tôi không nghĩ thiết kế phẳng là giải pháp cho mọi dự án, nhưng trong trường hợp phù hợp, chiếc bút này có thể hoạt động tốt như một mẫu bắt đầu
Xem Pen Flat Cart [codepen comp] của Will Paige
Giao diện người dùng miễn phí trên bảng
Nhiều trang thanh toán sử dụng bảng để sắp xếp dữ liệu nhưng ví dụ này của Alex Rodrigues sử dụng DIV
thay thế
Nó hoàn toàn đáp ứng, vì vậy bố cục sẽ trông tuyệt vời cho dù bạn đang sử dụng thiết bị nào. Mỗi hàng chứa đủ dữ liệu để sắp xếp lại đúng kiểu và sắp xếp mọi thứ, ngay cả trên màn hình siêu nhỏ. Còn code CSS thì dùng Compass tiết kiệm thời gian cùng với Google Fonts miễn phí cho phong cách tí
Xem Giỏ hàng không cần bàn Pen Responsive của alex rodrigues
Giỏ hàng ngon
Tôi không thể tưởng tượng điều này hoạt động trên một trang web thực nhưng với tư cách là một thử nghiệm UI/UX, nó khá tuyệt. Giỏ hàng Delicious có tựa đề tự hoạt động giống như một cửa hàng bánh/đồ ngọt trực tuyến với hình ảnh của các món tráng miệng khác nhau
Bạn có thể di chuyển con trỏ sang trái/phải để đi qua băng chuyền hoặc vuốt trên thiết bị di động. Mỗi mặt hàng có các biểu tượng cộng/trừ để thêm hoặc xóa các mặt hàng khỏi đơn đặt hàng của bạn, cùng với biểu tượng 'X' để xóa hoàn toàn mặt hàng đó khỏi giỏ hàng của bạn
Toàn bộ mọi thứ được xây dựng trên Sass, Slim và jQuery, vì vậy đây là một trong những dự án giao diện người dùng. Nếu bạn đang tìm cách mổ xẻ một số mã tuyệt vời, thì ví dụ này rất đáng để lưu lại
Xem Giỏ hàng Pen Delicious của Didier
Thiết kế đáp ứng
Đây là một giao diện người dùng giỏ hàng đáp ứng đơn giản khác được xây dựng trên Sass và không có bảng
Tôi thích thanh toán đáp ứng này hơn một chút so với các thanh toán khác vì các điểm ngắt cảm thấy tự nhiên hơn. Ngay cả trên màn hình nhỏ hơn, các mặt hàng trong giỏ hàng không cảm thấy chật chội hoặc lạc lõng
Tất cả các nút "xóa" đều hoạt động thông qua JavaScript và các trường nhập số tự động cập nhật giá. Điều này rất tốt cho trang giỏ hàng phía trước nơi người mua có thể muốn tăng số lượng trước khi thanh toán và để xem ước tính tổng chi phí
Xem Giỏ hàng Pen Responsive của Justin Klemm
Giỏ hàng jQuery
Cây bút này hoạt động giống như một khung dây hơn là một trang thanh toán đầy đủ nhưng nó hoàn hảo như một điểm khởi đầu. Nhà phát triển Khurram Alvi đã tạo giỏ hàng đáp ứng này bằng HTML/CSS cơ bản và một chút jQuery
Nó hoàn toàn đáp ứng và đầu vào số lượng hoạt động như bạn mong đợi. Một điều tốt đẹp là sự đơn giản của thiết kế giỏ hàng này. Nó không áp đặt bất kỳ màu sắc, phông chữ hoặc họa tiết nào vào bố cục. Bất kỳ ai muốn xây dựng một chiếc xe đẩy hàng mới từ đầu đều có thể bắt đầu tại đây vì việc xây dựng và tái cấu trúc rất dễ dàng
Xem Giỏ mua sắm jQuery Pen Responsive của Khurram Alvi
Giỏ hàng thử thách
Các thử thách CodePen mới thường xuyên xuất hiện yêu cầu các nhà phát triển tạo các giao diện khác nhau như trang đăng ký hoặc cửa sổ phương thức. Cây bút này của Žiga Miklič đến từ một thử thách đối với giao diện người dùng giỏ hàng và nó là một kiệt tác về phát triển giao diện người dùng
Khi bạn thêm/xóa các mặt hàng khỏi giỏ hàng, bạn sẽ thấy giá tự động cập nhật bằng một hình ảnh động trượt nhỏ. Bạn cũng có thể nhấp vào bất kỳ hình ảnh sản phẩm nào để xóa nó khỏi giỏ hàng một cách dễ dàng. Những tính năng nhỏ này bổ sung rất nhiều vào giao diện và giúp việc nhân bản trở nên dễ dàng
Ngay cả chức năng thanh toán cũng có tính năng động của riêng nó, mặc dù nó không được kết nối với bất kỳ thứ gì trên phần phụ trợ
Xem giỏ hàng Pen [ CodePen Challange ] của Žiga Miklič
Giao diện người dùng giỏ hàng trượt
Tiện ích được gắn thẻ cho phép bạn thêm nội dung vào một trang và cung cấp cho người dùng quyền đối với nội dung đó. Trong giỏ hàng trượt này, bạn có thể chuyển đổi giữa chính giỏ hàng và danh sách các mặt hàng “yêu thích” đã lưu
Không có tính năng thanh toán nào thực sự hoạt động nên bạn không thể yêu thích hoặc thêm/xóa các mặt hàng vào giỏ hàng. Nhưng các mục giao diện đã sẵn sàng, vì vậy một chút ma thuật JavaScript sẽ khắc phục điều đó. Tuy nhiên, tôi vẫn ấn tượng với vẻ ngoài sạch sẽ của giỏ hàng này và giao diện tab độc đáo nhưng vẫn có thể sử dụng được
Xem Giỏ hàng Pen [đáp ứng] của Alex
Cửa hàng & Giỏ hàng năng động
Kết hợp cửa hàng và giỏ hàng vào một giao diện là một công việc khó khăn nhưng Olivia Cheng đã hoàn thành nó bằng bút này
Nó sử dụng hình thu nhỏ rộng trong lưới được thiết lập với nút “thêm vào giỏ hàng” khi di chuột. Bấm vào đây để thêm mặt hàng ở trên với giá tự động cập nhật. Một tính năng độc đáo là số lượng được thêm vào đầu hình thu nhỏ của mặt hàng. Điều này có thể gây nhầm lẫn trên một chiếc xe đẩy thực, nhưng nếu các con số nhỏ hơn một chút, đây sẽ là một cách tuyệt vời để tiết kiệm không gian
Xem Cửa hàng & Giỏ mua hàng trượt bút của Olivia Cheng
Giỏ hàng sạch
Nhà phát triển Bart Veneman đã tạo giỏ hàng gọn gàng này dưới dạng một mẫu giao diện đơn giản. Nó tự động tính tổng giá và thậm chí bao gồm cả thuế gần nút thanh toán
Tất cả các tính năng động này đều hoạt động thông qua JavaScript và đáng ngạc nhiên là chiếc bút này sử dụng Zepto thay vì jQuery. Điều này rất tốt cho những nhà phát triển thích thư viện Zepto, nhưng thực sự thì bất kỳ ai cũng có thể lấy mã này và làm lại nó cho phù hợp với bất kỳ mẫu nào
Xem Giỏ hàng Pen của Bart Veneman
Giỏ hàng đơn giản với Vue. js
Mã hóa giao diện người dùng với Vue. js làm cho việc tạo khuôn mẫu đơn giản hơn rất nhiều. Và chiếc bút này là một ví dụ về giỏ hàng động được xây dựng thực tế trên nền tảng JavaScript
Giỏ hàng tự động cập nhật với mỗi lần nhấp để bạn có thể thêm/xóa mặt hàng và xem kết quả ngay lập tức. Nút trên cùng bên phải sẽ mở giỏ hàng hiện tại của bạn trong cửa sổ phương thức bằng cách sử dụng thành phần phương thức của Bootstrap
Nếu bạn thích Vue. js, thì mẫu này là một nơi tuyệt vời để bắt đầu xây dựng giỏ hàng. Thật dễ dàng để tùy chỉnh và sẽ hoạt động tốt trong tất cả các trình duyệt
Xem Giỏ hàng đơn giản Pen VueJS 2 của Cristian Matos
Giỏ hàng tên miền
Đây là một trong những thiết kế giỏ mua hàng yêu thích của tôi được mô phỏng theo công ty đăng ký tên miền. Lập trình viên Jesse Bilsten đã mô tả chi tiết về giao diện này bao gồm phần thanh toán và khu vực T&C bắt buộc
Bạn phải nhấp vào nút “Tôi đồng ý” trước khi hoàn tất quy trình thanh toán. Đó là một tính năng nhỏ nhưng có giá trị đối với một số trang web Thương mại điện tử và tôi thực sự thích bố cục hai cột. Và thiết kế này hoàn toàn đáp ứng nên bạn có thể sao chép nó để sử dụng trong hầu hết mọi hệ thống Thương mại điện tử