Mẫu javascript html

Question

Xu thế thiết lập web ngày càng tăng dẫn đến việc các cửa hàng ngày một số chuyển đổi và kinh doanh trực tuyến. Dù quy mô lớn hay nhỏ, các trang thương mại điện tử đa quốc gia đến các trang web bán hàng nhỏ lẻ. Nếu đã kinh doanh bán hàng thì gần như các trang web luôn luôn có chức năng bổ sung sản phẩm vào giỏ hàng

Nội dung chính Show

Triển khai
Bắt Đầu Code Thôi Lào
Mã Giao Diện Trang Giỏ Hàng
Giỏ hàng Giao Diện Trang Responsive
Xây dựng Các Chức năng Trang Giỏ hàng
Clear Product In Giỏ hàng
Cập Nhật Giỏ Hàng
Thay Đổi Số Lượng Sản Phẩm Trọng Giỏi Hàng
Thêm Sản Phẩm Vào Giỏ Hàng

Không chỉ là một tính năng, phương pháp này xếp hạng xa hơn là nó còn có thể tăng doanh thu cho chính danh nghiệp đó. Vì dựa vào hình thái và cách thức tiêu dùng, nếu họ đặt sản phẩm vào giỏ hàng thì sau này dù họ có quên họ củng có thề tìm thấy nó lại ở thùng hàng của mình, lúc này họ sẽ nhớ ra rằng họ từng

Nhưng nếu không có thùng hàng, nếu thời điểm đó dù họ thích nhưng họ không mua, không có phương pháp tiện lợi nào để họ có thể lưu lại và giúp họ ghi nhớ thì coi như doanh nghiệp đã mất luôn đơn hàng đó

Triển khai

Có rất nhiều cách để xây dựng một chức năng bổ sung thêm hàng hóa, có thể sử dụng back-end hoặc cả frond-end. Vì vậy hôm nay, hãy cùng mình đi xây dựng một chức năng bổ sung thêm giỏ hàng bằng Javascript nhé!

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 ở trong phần này.





    
    
    
    Shopping-cart
    
    
    



    
    
        
            
                
            
            
                
                    Trang Chủ
                    Sản Phẩm
                    Liên Hệ
                    Giới Thiệu
                
                
                    
                    
                
            
            
            
            
                
                    
                        Giỏ Hàng
                        ×
                    
                    
                        
                            Sản Phẩm
                            Giá
                            Số Lượng
                        
                        

                        
                        
                            Tổng Cộng:
                            0VNĐ

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


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

Footer
Trong cái footer này mình cũng làm đơn giản thôi. Một bên thì mình sẽ hiển thị logo, bên còn lại mình sẽ hiển thị các biểu tượng xã hội.

Đây là giao diện khi chúng ta chưa CSS

Nhìn nó thật đúng không phải mọi người. Bây giờ chúng ta CSS cho nó để trang giỏ hàng trở nên dễ nhìn hơn.

Mã CSS

Header
Trong phần header này chúng ta cho phép sử dụng flex để chia bố cục và chỉnh sửa theo ý mình muốn
Vẫn là phần modal khi hiển thị .

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

li {
  list-style: none;
}

/* header */
nav {
  padding: 15px;
  width: 100%;
  display: flex;
  background: #f1df11;
}

nav .content-nav {
  display: flex;
  line-height: 2rem;
  flex-direction: row;
  justify-content: flex-end;
  width: 60%;
}

nav .content-nav ul {
  display: flex;
}

nav .content-nav ul li a {
  text-decoration: none;
  color: #43433e;
  text-transform: uppercase;
  padding: 0 15px;
  font-weight: 800;
}

nav .content-nav ul li a:hover {
  color: #fff;
}

.content-nav form {
  position: relative;
}

.content-nav form input {
  border: none;
  background: #fff;
  padding: 7px;
  outline: none;
  border-radius: 12px;
}

.content-nav form button {
  padding: 5px;
  border-radius: 12px;
  position: absolute;
  right: 0;
  top: 2px;
  border: none;
  outline: none;
  background: #fff;
}

/* modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  margin: 0 auto;
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;

}

.modal-body {
  padding: 1rem;
}

.modal-footer {
  display: flex;
  border-top: 1px solid #aaaaaa;
  padding: 1rem;
  flex-direction: row;
  justify-content: flex-end;
  border-top: 1px solid #aaaaaa;
  padding: 1rem;
}

.modal-footer>:not(:first-child) {
  margin-left: .25rem;
}

.btn {
  cursor: pointer;
  outline: none;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: all .2s ease-in-out;
}

.btn-secondary {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #aaaaaa;
  padding: 1rem;
}

h5.modal-title {
  font-size: 1.5rem;
}

.close {
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#cart {
  font-size: 15px;
  color: #fff;
  background: #c7b200;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  margin-left: 1rem;
  padding: 12px;
  cursor: pointer;
}

#cart:hover {
  border-color: #fff;
}

Nội dung
Chúng tôi sử dụng width và float. left to chia layout cho các thẩm định viên trong nội dung.

/* wrapper */
.wrapper {
  padding: 2rem;
}

.products ul {
  display: inline-block;
}

.products ul .main-product {
  margin-bottom: 2rem;
  margin-right: 1rem;
  display: block;
  float: left;
  width: 24%;
}

.products ul .no-margin {
  margin-right: 0;
}

.products ul .img-product img {
  width: 100%;
}

.content-product .content-product-h3 {
  padding: .5rem 0;
  overflow: hidden;
  color: #222;
  font-weight: 500;
  font-size: 16px;
  max-height: 50px;
  min-height: 50px;
  text-align: center;
  line-height: 19px;
  margin: 0 0 5px;
}

.content-product .content-product-deltals {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.main-product .content-product .content-product-deltals .price {
  color: #c7b200;
  font-weight: 700;
  margin-right: 1rem;
  vertical-align: middle;
  font-size: 20px;
}

.content-product .content-product-deltals .price .money {
  vertical-align: middle;
}

.content-product .content-product-deltals .btn-cart {
  background: #f1df11;
  border-radius: 5px;
  color: #fff;
  font-weight: 500;
}

.content-product .content-product-deltals .btn-cart:hover {
  background: #c7b200;
}

/* footer */
.footer-item {
  padding: .5rem 2rem;
  background: #f1df11;
  display: flex;

}

.footer-item .img-footer {
  align-items: center;
  display: flex;
}

.footer-item .img-footer img {
  width: 100%;
}

.footer-item .social-footer {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

.footer-item .social-footer li a {
  color: #000000;
  font-size: 2rem;
}

.footer-item .social-footer li:last-child {
  margin-left: .5rem;
}

Footer
Trong footer này mình sử dụng flex để chia bố cục cho footer

/* footer */
.footer-item {
  padding: .5rem 2rem;
  background: #f1df11;
  display: flex;

}

.footer-item .img-footer {
  align-items: center;
  display: flex;
}

.footer-item .img-footer img {
  width: 100%;
}

.footer-item .social-footer {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

.footer-item .social-footer li a {
  color: #000000;
  font-size: 2rem;
}

.footer-item .social-footer li:last-child {
  margin-left: .5rem;
}

Và đây là giao diện khi chúng tôi đã CSS cho nó.

Code JS
Trong file main. js bây giờ các bạn code cho mình một đoạn code để hiển thị thùng hàng(modal).
To show thị thùng hàng thì cũng đơn giản thôi. Các bạn gọi HTML là Dom ra thôi
Mình sẽ giải thích cách hoạt động của nó cho mấy bạn dễ hiểu nha
Đó là khi mình click vào thùng hàng( . Khi chúng ta click vào nút 'Đóng', dấu 'x' hay là khi click bên ngoài modal thì nó sẽ ẩn modal đó đi.

// Modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("cart");
var close = document.getElementsByClassName("close")[0];
// tại sao lại có [0] như  thế này bởi vì mỗi close là một html colection nên khi mình muốn lấy giá trị html thì phải thêm [0]. 
Nếu mình có 2 cái component cùng class thì khi [0] nó sẽ hiển thị component 1 còn [1] thì nó sẽ hiển thị component 2.
var close_footer = document.getElementsByClassName("close-footer")[0];
var order = document.getElementsByClassName("order")[0];
btn.onclick = function () {
  modal.style.display = "block";
}
close.onclick = function () {
  modal.style.display = "none";
}
close_footer.onclick = function () {
  modal.style.display = "none";
}
order.onclick = function () {
  alert("Cảm ơn bạn đã thanh toán đơn hàng")
}
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Và đây là kết quả khi chúng tôi đã mã js để hiển thị thùng hàng

Giỏ hàng Giao Diện Trang Responsive

Giao diện di động

Khi chúng ta chuyển sang chế độ di động thì giao diện di động bị vỡ và bị vỡ như thế nào thì chúng ta cùng xem nó bị vỡ như thế nào nha.

Rồi bây giờ chúng ta sẽ làm như thế nào để các sản phẩm không bị vỡ nha. Mỗi sản phẩm là 1 thành phần bây giờ chúng ta chỉ cần chiều rộng. 100% cho nó là được.
In the header section you hide the menu in. content-nav go nha. Mình sẽ viết một cái. nav-mobile trong đó chứa toàn bộ menu mà nó được hiển thị trên máy tính để bàn.
Mã HTML

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;


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

0

Và đây là giao diện di động khi chúng ta đã reponsive cho nó

Máy tính bảng Giao Diện

Chúng ta cùng xem thử giao diện giỏ hàng của trang mà nó hiển thị như thế nào nha.

Thì các bạn sẽ thấy giao diện hơi bị vỡ một chút, bây giờ các bạn cần tăng chiều rộng của sản phẩm lên một chút thì sẽ thấy ổn thôi.
Còn lại các phần tiêu đề bạn chỉ cần chỉnh sửa lại kích thước phông chữ của các menu trong đó. content-nav và width. 100% cho. content-nav is been.


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

1

Và đây là máy tính bảng giao diện khi đã được phản hồi

Đây là chúng ta đã hoàn thành giao diện cho giỏ hàng rồi nha.
Tiếp theo là phần quan trọng nhất trong giỏ hàng. Các bạn cùng theo dõi tiếp nha.

Xây dựng Các Chức năng Trang Giỏ hàng

Clear Product In Giỏ hàng

Các bạn sẽ đặt câu hỏi lại tại sao chưa thêm sản phẩm vào thùng hàng mà lại xóa rồi các bạn cứ bình tĩnh, từ để mình giải thích.
Tại sao mình lại làm chức năng xóa sản phẩm trước và làm như thế nào?
Mình làm chức năng trước vì khi mình làm chức năng này thì trước tiên .
Nhằm mục đích là giúp chúng ta tạo ra được cục bộ, kết cấu của thùng hàng. Sau khi thực hiện xong chức năng xóa, tiếp theo là chức năng tính tổng tiền trong thùng hàng.

Sau khi chúng ta làm xong các bước trên thì đến bước thêm sản phẩm vào giỏ hàng cũng dựa theo các bố cục,. ở trên. Sau đó các bạn sẽ xóa các sản phẩm mà mình tự tạo trong thùng hàng đi là được. Không linh thiêng nữa

Chúng ta bắt tay vào làm thôi nào.
Mã HTML
Trong chỉ mục tệp. phần html. modal-body các bạn thêm cho mình đoạn mã HTMl này vào bên trong. cart-items này giúp mình nha.


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

2

Mã CSS
Trong kiểu tệp. css các bạn sử dụng flex và width để chia bố cục cho các. giỏ hàng nha.


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

3

Và đây là kết quả khi chúng tôi thêm sản phẩm vào thùng hàng.

Code JS
Trong file main. js chúng ta sẽ gọi HTML Dom của nút là "xóa" trong sản phẩm.
Tại sao mình lại sử dụng vòng lặp mà không sử dụng lại


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

8. Bởi vì khi sử dụng


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

8 thì nó chỉ lấy nút giá trị đầu tiên mà thôi. Ví dụ như mình có 4 sản phẩm thì có 4 nút "xóa" nếu như mình sử dụng


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

8 thì chỉ có thể xóa sản phẩm đầu tiên vì thế nên mình sử dụng vòng lặp.
Nó sẽ bao gồm tất cả các sản phẩm mà bạn thêm vào giỏ hàng và xem thử có bao nhiêu nút "xóa".
Sau khi biết bao nhiêu nút "xóa" sau đó thêm sự kiện nhấp chuột. Khi bấm vào nút xóa thì nó sẽ xóa phần cha bọc nó. Ở đây có hai parentElement thì nó sẽ xóa phần tử cha bọc bên ngoài cùng (xóa sản phẩm ấy).


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

4

Và đây là kết quả chúng ta đã hoàn thành chức năng xóa sản phẩm trong thùng hàng

Cập Nhật Giỏ Hàng

Sau khi mình làm xong chức năng xóa sản phẩm trong thùng hàng, bây giờ sẽ đến phần cập nhật thùng hàng, cập nhật tổng tiền trong thùng hàng,.
Code JS
Trong file main. js you also call HTML DOM as at on. Mình sẽ giải thích chế độ hoạt động của updatecart() này cho các bạn dễ hiểu nha.
Thì nó sẽ gọi. cart_items in. cart_items có nhiều. cart_row trong mỗi cart_row chứa các thông tin về sản phẩm như hình ảnh, tiêu đề, giá tiền của sản phẩm. By because. giỏ hàng-hàng này trong. cart-items không thể gọi tài liệu được mà phải gọi dựa trên DOM của. giỏ_hàng.

Sau khi gọi là cart_rows, chúng ta sẽ chạy vòng để biết có bao nhiêu
. giỏ_hàng. Tiếp theo chúng ta sẽ gọi HTML DOM của. giá giỏ hàng và. giỏ hàng-số lượng-đầu vào, bởi vì chỉ có một giá tiền và số lượng sản phẩm nên chúng ta sử dụng


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

8
Tiếp theo chúng ta sẽ lấy giá trị của tiền và số lượng của sản phẩm.

Cuối cùng là tính tổng tiền, ở đây mình sẽ nói rõ ra tí. Tổng số sẽ gán bằng 0 không đúng. Sau khi chúng tôi tính tổng tiền của sản phẩm đầu tiên sẽ được tính vào tổng số. Thì bây giờ tổng cộng được phân bổ bằng tổng số tiền của sản phẩm thứ nhất, nếu bạn có sản phẩm thứ hai trong Kho hàng thì tổng cộng = tổng số tiền của sản phẩm đầu tiên + tổng tiền của sản phẩm thứ hai và được phân bổ vào tổng, thứ


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

5

Sau đó các bạn gọi hàm

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 do 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.

Thay Đổi Số Lượng Sản Phẩm Trọng Giỏi Hàng

Sau khi chúng ta hoàn thành phần cập nhật giỏ hàng. Tiếp theo chúng ta sẽ làm phần thay đổi số lượng sản phẩm, chúng ta bắt sự kiện khi mình thay đổi (thay đổi) số lượng thì gọi hàm

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ị


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

6

Và đâ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 class cart-items.


    
        
            
                
                    
                        
                    
                    
                        Mũi Hàn 500
                        
                            
                                25000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Trạm Hàn Hakko 942 75W 200-480*C 220VAC Cực Nóng
                        
                            
                                1299000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                        
                            
                                1599000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module DIY Sạc Không Dây Qi IOS/Androi - Bộ phát V2
                        
                            
                                89000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Bộ Điều Chỉnh Điện Áp CHLVFU SDTY-200P 20KW 200A (BH 06 Tháng)
                        
                        
                            
                                2199000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module ISD1760 Thu Âm Thanh - Phát Âm Thanh 75s
                        
                            
                                115000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Raspberry Pi 3 E14 Model B Plus B+ 2.4G/5G Bluetooth
                        
                            
                                1295000đ
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Module IOT ESP8266 ESP-12E CH340 V3
                        
                            
                                85000đ

7

Và đâ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 đây

Lời Kết

Vậ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

programming javascript