Thứ hai là chức năng bổ sung sản phẩm vào giỏ hàng, trong chức năng này nếu chúng ta muốn thêm sản phẩm vào giỏ hàng thì chúng ta cần lấy số tham số của sản phẩm. Sau đó thêm vào phương thức của giỏ hàng
Thứ ba là chức năng xóa sản phẩm. Chúng ta sẽ bắt sự kiện khi nhấp vào nút xóa thì các phần tử cha của nó sẽ bị xóa.
Và còn nhiều chức năng khác nữa.
Bắt Đầu Code Thôi Lào
Mã Giao Diện Trang Giỏ Hàng
Trước tiên trong bất kỳ trang web nào, bước đầu tiên mà chúng ta cần làm đó là mã giao diện cho nó. Thì trang giỏ hàng này cũng không ngoại lệ
Mã HTML
Header
Thì trong phần header này thì mình cũng đã nói ở trên bao gồm những thành phần gì rồi.
Nhưng trong đó phần quan trọng nhất của đối thủ là tiêu đề.
Mình sẽ sử dụng phương thức để hiển thị hàng thùng. Bây giờ chúng ta sẽ code HTML và CSS cho nó, còn phần hiển thị sọt hàng mình sẽ nói ở phần Code JS ở phần này.
Shopping-cart
- Trang Chủ
- Sản Phẩm
- Liên Hệ
- Giới Thiệu
Giỏ Hàng
Giỏ Hàng
×
Sản Phẩm
Giá
Số Lượng
Tổng Cộng:
0VNĐ
Đóng
Thanh Toán
Nội dung
Trong phần chúng ta sẽ hiển thị các sản phẩm cần thêm sọ vào hàng. Mình sẽ sử dụng float để xây dựng các sản phẩm. Mình thì đam mê chế cháo nên các sản phẩm của mình là các đồ linh kiện điện tử.
Mỗi cái sản phẩm là một thành phần chúng ta chỉ cần code một cái thành phần sau đó copy ra nhiều thành phần khác rồi sau đó đổi ảnh và tiêu đề thôi
Và các bạn sẽ để ý thấy là tại sao trong giá tiền mình không ghi các dấu". " to split the money number as 85. 000đ mà ghi lại 85000đ. Mình sẽ có phần giải thích ở bên dưới phần cập nhật sọt hàng
Đây là giao diện khi chúng ta chưa CSS
Trang Chủ
Sản Phẩm
Liên Hệ
Giới Thiệu
.......
.......
.......
.......
Code CSS
Trong phần này thì chúng ta sẽ CSS cho nó là thằng nav-mobile và các mục bên trong nó như. hình thức, nội dung điều hướng,. And hides. item_menu and. nav-mobile that go is been.
________số 8Đáp ứng
Trong tệp phản hồi. css you hide the. content-nav that go is being nha. Các phần còn lại của phương thức chiều rộng của bạn lớn hơn một chút để nó có thể hiển thị rõ ràng nhất.
/*mobile*/
@media only screen and [min-width:240px] and [max-width:480px] {
/* nav */
nav .content-nav {
display: none;
}
nav {
position: fixed !important;
top: 0px;
left: 0;
width: 100%;
display: flex;
padding: 0;
}
.nav-mobile {
display: flex;
}
.img-nav {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.img-nav img {
padding-top: 0.5rem;
vertical-align: middle;
width: 90%;
}
.content-nav,
.item_menu form button {
right: 10px;
}
/* wrapper */
.wrapper {
padding: 1rem;
}
.products {
margin-top: 3rem;
}
.products ul .main-product {
width: 100%;
}
/* modal */
.modal-content {
width: 95%;
}
.cart-item-title {
font-size: 0.6em;
}
.cart-column {
margin-right: 0.5em;
}
.cart-price {
margin-right: 1rem;
}
#cart {
margin: .5rem;
padding: 3px;
}
}
Code JS
Trong file main. js các bạn code cho thằng nav-mobile này là khi click vài icon-mobile thì nó sẽ hiển thị. chặn, còn nếu nó đã hiển thị rồi khi nhấp lại thì hiển thị. không;
2 trong phần xóa sản phẩm trong sọt hàng nhá.
Ở đây thì mình cũng sẽ giải thích một lý do vì sao số tiền trong sản phẩm mình không ngăn cách bằng dấu '. ' thì khi sử dụng parseFloat[] nó sẽ lấy các số ban đầu và bỏ các số 0 sau dấu '. ' because that is reason that mình không dùng dấu '. '
Và đây là kết quả khi chúng tôi thêm phần cập nhật sản phẩm vào giỏ hàng.
Bạn thử xóa sản phẩm để xem tổng thể nó có thay đổi không nha.
2. Nhưng có một lỗi nhỏ ở đây là khi mình cho type='number' thì số lượng có thể dưới 0, mà số lượng sản phẩm thì không bao giờ có giá trị âm hoặc bằng 0 cả nên mình sẽ viết mã là nếu giá trị
-
-
Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
-
Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
-
Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
-
Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A [BH 06 Tháng]
-
Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
-
Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
-
Module IOT ESP8266 ESP-12E CH340 V3
6Và đây là kết quả khi chúng ta thay đổi số lượng sản phẩm trong thùng hàng
Thêm Sản Phẩm Vào Giỏ Hàng
Đây là mục khá quan trọng cũng như mục cuối cùng trong phần này. Thì phần này mình làm cũng dựa vào những mục ở trên mà mình đẫ làm thôi.
Chúng ta sẽ bắt sự kiện khi nhấp vào nút 'Thêm Vào Giỏ'. Khi nhấp vào sẽ lấy đường dẫn ảnh, tiêu đề và giá của sản phẩm.
Khi lấy được giá trị của một sản phẩm thì bước tiếp theo là chúng ta sẽ đưa nó lên thùng hàng.
Làm sao để được đưa lên thùng hàng. Muốn đưa lên được hàng thì chúng ta phải tạo cho nó một bộ khung.
Trước tiên, bạn tạo cho mình một thẻ div và addClass cart-row tiếp tục tạo cho nó một bộ khung html giống bộ khung mà mình tạo để xây dựng chức năng xóa hàng để có thể thực hiện được. .
Tiếp theo các bạn vào chỉ mục tệp. html xóa hai sản phẩm mà mình đã thêm vào để làm chức năng xóa sản phẩm trong Giỏ hàng và nhớ sửa tổng tiền thành 0VNĐ nha. Các bạn đã xóa bộ nhớ để lại lớp giỏ hàng-mục.
-
-
Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
-
Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
-
Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
-
Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A [BH 06 Tháng]
-
Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
-
Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
-
Module IOT ESP8266 ESP-12E CH340 V3
7Và đây là kết quả khi chúng tôi đã thêm sản phẩm vào thùng hàng.
Chạy là xong rồi nha, bài này mình viết khá dài mong mọi người thông cảm. Các bạn có thể tham khảo trang giỏ hàng mà mình đã triển khai lên firebase tại đâyLời KếtVậy Là Xong bài Hướng dẫn xây dựng giỏ hàng trang bằng html, css và javascript rồi nhé. Mình mong muốn sau bài viết này các bạn có thể nắm bắt thêm kiến thức về JS cũng như tự mình design một giao diện thông qua các dự án thực tế
Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực ra những bài viết chủ đề hay và chất lượng hơn ủng hộ mình tại đây nha