Tạo giỏ hàng đơn giản bằng html và css

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 số lượt 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 để thực hiện điều này là sử dụng một thiết kế sạch sẽ 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 để tổ chức dữ liệu nhưng ví dụ này của Alex Rodrigues sử dụng ____ ____ 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ỏ mua 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ử

Chúng tôi có thể tạo trang web Thương mại điện tử bằng HTML và CSS không?

Làm thế nào để thiết kế một giỏ hàng?