Chúng tôi đã sử dụng các mẫu khác nhau khi nói đến quy trình thêm vào giỏ hàng. Ý tưởng cơ bản đằng sau mẫu này là thông báo cho người dùng rằng một mặt hàng đã được thêm vào giỏ hàng và cung cấp cho họ một liên kết để tiến hành thanh toán. Chúng tôi đã thử nghiệm ý tưởng giấu giỏ hàng theo mặc định và hiển thị nó khi người dùng nhấp vào nút Thêm vào giỏ hàng. Bằng cách này, người dùng có thể kiểm tra giỏ hàng và tiến hành thanh toán & nbsp; hoặc tiếp tục mua sắm. Giỏ hàng sẽ dính vào cuối trang, có thể truy cập bất cứ lúc nào. - ⭐ Biểu tượng: Nucleo, Biểu tượng tổ chức & Thư viện biểu tượng
Quan trọng: Thí nghiệm này được xây dựng bằng khung Codyhouse.Important: this experiment is built using the CodyHouse Framework. Tạo cấu trúcCấu trúc HTML giỏ hàng bao gồm hai yếu tố chính: ____ ____ 6 & nbsp; cho kích hoạt giỏ hàng và tổng số giỏ hàng, và .cd-cart__content cho & nbsp; nội dung giỏ hàng.HTML structure is composed of two main elements: a .cd-cart__trigger for the cart trigger
and the cart total, and a .cd-cart__content for the cart content.
<div class="cd-cart cd-cart--empty js-cd-cart">
<a href="#0" class="cd-cart__trigger text-replace">
Cart
<ul class="cd-cart__count"> <!-- cart items count -->
<li>0</li>
<li>0</li>
</ul> <!-- .cd-cart__count -->
</a>
<div class="cd-cart__content">
<div class="cd-cart__layout">
<header class="cd-cart__header">
<h2>Cart</h2>
<span class="cd-cart__undo">Item removed. <a href="#0">Undo</a></span>
</header>
<div class="cd-cart__body">
<ul>
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</div>
<footer class="cd-cart__footer">
<a href="#0" class="cd-cart__checkout">
<em>Checkout - $<span>0</span>
<svg class="icon icon--sm" viewBox="0 0 24 24"><g fill="none" stroke="currentColor"><line stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="3" y1="12" x2="21" y2="12"/><polyline stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="15,6 21,12 15,18 "/></g>
</svg>
</em>
</a>
</footer>
</div>
</div> <!-- .cd-cart__content -->
</div> <!-- cd-cart -->
Danh sách không được đặt hàng bên trong phần tử & nbsp; ____ 8 8 trống theo mặc định (giỏ hàng trống); Khi một sản phẩm được thêm vào giỏ hàng, một phần tử mục danh sách được chèn bằng JavaScript. <div class="cd-cart__body">
<ul>
<li class="cd-cart__product">
<div class="cd-cart__image">
<a href="#0">
<img src="assets/img/product-preview.png" alt="placeholder">
</a>
</div>
<div class="cd-cart__details">
<h3 class="truncate"><a href="#0">Product Name</a></h3>
<span class="cd-cart__price">$25.99</span>
<div class="cd-cart__actions">
<a href="#0" class="cd-cart__delete-item">Delete</a>
<div class="cd-cart__quantity">
<label for="cd-product-productId">Qty</label>
<span class="cd-cart__select">
<select class="reset" id="cd-product-productId" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
<svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
Thêm phong cáchCác phần tử ____ 7 & nbsp; và .cd-cart__trigger đều ở vị trí & nbsp; đã sửa và di chuyển ra ngoài chế độ xem (sử dụng <div class="cd-cart__body">
<ul>
<li class="cd-cart__product">
<div class="cd-cart__image">
<a href="#0">
<img src="assets/img/product-preview.png" alt="placeholder">
</a>
</div>
<div class="cd-cart__details">
<h3 class="truncate"><a href="#0">Product Name</a></h3>
<span class="cd-cart__price">$25.99</span>
<div class="cd-cart__actions">
<a href="#0" class="cd-cart__delete-item">Delete</a>
<div class="cd-cart__quantity">
<label for="cd-product-productId">Qty</label>
<span class="cd-cart__select">
<select class="reset" id="cd-product-productId" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
<svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
1). Khi một mục được thêm vào giỏ hàng, lớp ____ 12 & nbsp; được loại bỏ khỏi phần tử <div class="cd-cart__body">
<ul>
<li class="cd-cart__product">
<div class="cd-cart__image">
<a href="#0">
<img src="assets/img/product-preview.png" alt="placeholder">
</a>
</div>
<div class="cd-cart__details">
<h3 class="truncate"><a href="#0">Product Name</a></h3>
<span class="cd-cart__price">$25.99</span>
<div class="cd-cart__actions">
<a href="#0" class="cd-cart__delete-item">Delete</a>
<div class="cd-cart__quantity">
<label for="cd-product-productId">Qty</label>
<span class="cd-cart__select">
<select class="reset" id="cd-product-productId" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
<svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
3 và giỏ hàng được hiển thị..cd-cart__trigger,
.cd-cart__content {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.cd-cart--empty .cd-cart__trigger,
.cd-cart--empty .cd-cart__content { // hide cart
transform: translateY(150px);
}
Đối với hoạt hình giỏ hàng: Chúng tôi gán & nbsp; chiều cao và chiều rộng cố định cho & nbsp; ________ 14 & nbsp; phần tử (giống nhau của <div class="cd-cart__body">
<ul>
<li class="cd-cart__product">
<div class="cd-cart__image">
<a href="#0">
<img src="assets/img/product-preview.png" alt="placeholder">
</a>
</div>
<div class="cd-cart__details">
<h3 class="truncate"><a href="#0">Product Name</a></h3>
<span class="cd-cart__price">$25.99</span>
<div class="cd-cart__actions">
<a href="#0" class="cd-cart__delete-item">Delete</a>
<div class="cd-cart__quantity">
<label for="cd-product-productId">Qty</label>
<span class="cd-cart__select">
<select class="reset" id="cd-product-productId" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
<svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
5); Khi giỏ hàng & nbsp; được mở, chúng tôi sử dụng & nbsp; ________ 16 & nbsp; lớp để làm động chiều cao của nó và & nbsp; width & nbsp; trong khi tiết lộ nội dung giỏ hàng..cd-cart__layout {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
overflow: hidden;
height: 72px;
width: 72px;
border-radius: var(--radius);
transition: height .4s .1s, width .4s .1s, box-shadow .3s;
transition-timing-function: cubic-bezier(.67,.17,.32,.95);
background: var(--cd-color-3);
box-shadow: 0 4px 30px rgba(#000, .17);
}
.cd-cart--open .cd-cart__layout {
height: 100%;
width: 100%;
transition-delay: 0s;
}
Lớp ____ 17 & nbsp; được sử dụng để loại bỏ một mục khỏi giỏ hàng: & nbsp; phần tử bị xóa có vị trí tuyệt đối và hoạt hình & nbsp; ____ 18 được sử dụng để tạo hiệu ứng trượt ra. .cd-cart__product--deleted { // this class is added to an item when it is removed form the cart
position: absolute;
left: 0;
width: 100%;
opacity: 0;
animation: cd-item-slide-out .3s forwards;
}
@keyframes cd-item-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(80px);
opacity: 0;
}
}
Nếu người dùng nhấp vào 'UNDO', lớp ____ 17 & nbsp; bị xóa và phần tử được đặt lại trong danh sách. Xử lý sự kiệnKhi người dùng nhấp vào nút ____ 20 & nbsp;, hàm & nbsp; ____ 21 được sử dụng để chèn một mục danh sách mới bên trong phần tử .cd-cart__trigger,
.cd-cart__content {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.cd-cart--empty .cd-cart__trigger,
.cd-cart--empty .cd-cart__content { // hide cart
transform: translateY(150px);
}
2. Các chi tiết sản phẩm được sử dụng là người giữ chỗ, cần được thay thế bằng thông tin sản phẩm thực sự:function addProduct(target) {
// this is just a product placeholder
var productAdded = '<li class="cd-cart__product"><div class="cd-cart__image"><a href="#0"><img src="assets/img/product-preview.png" alt="placeholder"></a></div><div class="cd-cart__details"><h3 class="truncate"><a href="#0">Product Name</a></h3><span class="cd-cart__price">$25.99</span><div class="cd-cart__actions"><a href="#0" class="cd-cart__delete-item">Delete</a><div class="cd-cart__quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="cd-cart__select"><select class="reset" id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select><svg class="icon" viewBox="0 0 12 12"><polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/></svg></span></div></div></div></li>';
cartList.insertAdjacentHTML('beforeend', productAdded);
};
Các chức năng bổ sung, như & nbsp; ____ 23 hoặc & nbsp; ________ 24, đã được xác định để cập nhật số lượng giỏ hàng và tổng số khi các sản phẩm mới được thêm/xóa hoặc khi số lượng sản phẩm được thêm vào xe đẩy được thay đổi. Tăng lên các kỹ năng CSS của bạnMỗi tháng chúng tôi gửi email hướng dẫn CSS 1 phút cho các nhà phát triển 20K
Đáng kinh ngạc! Chúng tôi vừa gửi cho bạn một liên kết xác nhận qua email Lỗi - Vui lòng thử lại hoặc liên hệ với chúng tôi Địa chỉ email của bạn đã được đăng ký
Làm cách nào để thêm nút Thêm vào giỏ hàng?
Để làm điều đó, hãy đảm bảo chọn phần bổ sung chính vào giỏ hàng và sao chép nó. Sau đó, hãy vào trang sản phẩm hoặc chọn bất kỳ danh sách bộ sưu tập nào được kết nối với danh mục Sản phẩm trên mạng và dán thêm thành phần bổ sung tùy chỉnh đầy đủ của bạn vào thành phần giỏ hàng. Chọn phần bao bọc chính vào giỏ hàng để sao chép nó vào các trang và danh sách khác.
Làm thế nào thêm vào giỏ hàng hoạt động trong JavaScript?
Mã này bắt đầu đối tượng phiên JavaScript.Khi nhấp vào nút Thêm vào giỏ hàng trên gạch sản phẩm, chức năng này được gọi. Nó đọc chi tiết sản phẩm từ lưới sản phẩm nơi đặt thêm vào thêm vào giỏ hàng.Ví dụ, nó có được tên sản phẩm, số lượng và các chi tiết khác.On clicking the “Add to cart” button on the product tile, this function is invoked. It reads the product details from the product grid where the clicked “Add to cart” is placed. For example, it gets the product name, quantity and other details.
Làm cách nào để thêm nút Thêm vào giỏ hàng trong HTML?
Cho phép người dùng làm trống giỏ hàng bằng một lần nhấp ... Bước 1: Tạo thẻ.HTML: .... Bước 2: Thêm tiêu đề thẻ.HTML: .... Bước 3: Thêm chi tiết sản phẩm.HTML: .... Bước 4: Tạo một bộ đếm.HTML: .... Bước 5: Thêm phần giá.HTML: .... Bước 7: Tạo phần thanh toán.HTML:. | 
