Giao diện giỏ hàng html, css

Content
Trong phần chúng ta sẽ hiển thị các sản phẩm cần thêm vào giỏ 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 component chúng ta chỉ cần code một cái conponent sau đó copy ra nhiều các conponent khác rồi sau đó thay đổ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 có ghi các dấu"." để tách các số tiền ra như 85.000đ mà lại ghi 85000đ. Mình sẽ có phần giải thích ở dưới phần cập nhật giỏ hàng.

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

Code CSS
Trong phần này thì chúng ta sẽ CSS cho nó thằng nav-mobile và các item bên trong nó như: form, nav-content,..Và ẩn các .item_menu và .nav-mobile đó đi là được.

/* nav mobile */
.nav-mobile {
  display: none;
}

.nav-mobile .icon-mobile {
  padding: .5rem;
  font-size: 35px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  outline: none;
}

.nav-mobile .item_menu {
  background: #f1df11;
  position: absolute;
  top: 100%;
  width: 100%;
  display: none;
  padding-bottom: 1rem;
}

.item_menu ul li a {
  color: #43433e;
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05rem;
}

.item_menu ul li a:hover {
  color: #fff;
}

.item_menu form {
  margin: 0 1rem;
  position: relative;
}

.item_menu form input {
  width: 100%;
  border: none;
  background: #fff;
  padding: 7px;
  outline: none;
  border-radius: 12px;
}

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

Reponsive
Trong file reponsive.css các bạn ẩn thằng .content-nav đó đi là được nha. Còn phần modal các bạn width lớn hơn một tí để nó có thể hiển thị rõ 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ẽ display:block, còn nếu nó đã hiển thị rồi khi click lại thì display:none;

// menu mobile
var btn_menu = document.getElementById["btnmenu"];
btn_menu.addEventListener["click", function [] {
  var item_menu = document.getElementById["menutop"];
  if [item_menu.style.display === "block"] {
    item_menu.style.display = "none";
  } else {
    item_menu.style.display = "block";
  }
}]

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

Giao Diện Tablet

Chúng ta cùng xem thử giao diện trang shopping cart nó hiển thị như thế nào nha.

/*tablet*/
@media [min-width:480px] and [max-width:768px] {

    .wrapper {
        padding: 1.5rem;
    }

    .img-nav img {
        vertical-align: middle;
        width: 100%;
    }

    nav .content-nav ul li a {
        font-size: 12px;
        padding: 0px 8px;
    }

    nav .content-nav {
        width: 100%;
    }

    #cart {
        font-size: 12px;
        margin-left: 0.3rem;
        padding: 0;
    }

    .products ul .main-product {
        width: 31%;
    }

    .main-product .content-product .content-product-deltals .price {
        font-size: 18px;
    }

    .products ul .no-margin {
        margin-right: 1rem;
    }

    .cart-item-title {
        font-size: 0.5em;
    }

    .cart-column {
        margin-right: 0.5em;
    }

    .cart-price {
        margin-right: 1rem;
    }
}

Và đây là giao diện tablet khi đã được reponsive

Xóa Sản Phẩm Trong Giỏ Hàng

Các bạn sẽ đặt một câu hỏi lại tại sao chưa thêm sản phẩm vào giỏ hàng mà lại xóa rồi thì các bạn cứ bình tĩnh, từ 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 mình phải mình phải tạo một sản phẩm trong giỏ hàng khi chia được thêm.
Nhằm mục đích là giúp chúng ta tạo được bố cục, kết cấu của giỏ hàng. Sau khi làm chức năng xóa xong, tiếp đến là chức năng tính tổng tiền trong giỏ 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 các sản phẩm mà mình tự tạo trong giỏ hàng đi là được. Không linh tinh liêng thiêng nữa.

Chúng ta bắt tay vào làm thôi nào:
Code HTML
Trong file index.html phần .modal-body các bạn thêm cho mình đoạn code HTMl này vào bên trong .cart-items này giúp mình nha.

// modal
   

                        

                            Sản Phẩm
                            Giá
                            Số Lượng
                        
                        

                            

                            

                                

                                Mũi Hàn 500
                            
                            25000đ
                            

                                
                                Xóa
                            
                        
                        

                            

                                

                                Máy Bơm Chìm Hộ Gia Đình QDX 1500W 220VAC 40L/1min H=8m
                            
                            1599000đ
                            

                                
                                Xóa
                            
                        
                        

                            Tổng Cộng:
                            3223000VNĐ
                        
                    

Code CSS
Trong file style.css các bạn sử dụng flex và width để chia layout cho các .cart-item nha.

/* cart */
.cart-header {
  font-weight: bold;
  font-size: 1.25em;
  color: #333;
}

.cart-column {
  display: flex;
  align-items: center;
  border-bottom: 1px solid black;
  margin-right: 1.5em;
  padding-bottom: 10px;
  margin-top: 10px;
}

.cart-row {
  display: flex;
}

.cart-item {
  width: 45%;
}

.cart-price {
  width: 20%;
  font-size: 1.2em;
  color: #333;
}

.cart-quantity {
  width: 35%;
}

.cart-item-title {
  color: #333;
  margin-left: .5em;
  font-size: 1.2em;
}

.cart-item-image {
  width: 75px;
  height: auto;
  border-radius: 10px;
}

.btn-danger {
  color: white;
  background-color: #EB5757;
  border: none;
  border-radius: .3em;
  font-weight: bold;
}

.btn-danger:hover {
  background-color: #CC4C4C;
}

.cart-quantity-input {
  height: 34px;
  width: 50px;
  border-radius: 5px;
  border: 1px solid #56CCF2;
  background-color: #eee;
  color: #333;
  padding: 0;
  text-align: center;
  font-size: 1.2em;
  margin-right: 25px;
}

.cart-row:last-child {
  border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
  border: none;
}

.cart-total {
  text-align: end;
  margin-top: 10px;
  margin-right: 10px;
}

.cart-total-title {
  font-weight: bold;
  font-size: 1.5em;
  color: black;
  margin-right: 20px;
}

.cart-total-price {
  color: #333;
  font-size: 1.1em;
}

Và đây là kết quả khi chúng ta thêm các sản phẩm vào trong giỏ hàng:

// xóa cart
var remove_cart = document.getElementsByClassName["btn-danger"];
for [var i = 0; i < remove_cart.length; i++] {
  var button = remove_cart[i]
  button.addEventListener["click", function [] {
    var button_remove = event.target
    button_remove.parentElement.parentElement.remove[]
  }]
}

Và đây là kết quả chúng ta làm xong chức năng xóa sản phẩm trong giỏ 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 giỏ hàng, bây giờ sẽ đến phần cập nhật giỏ hàng, cập nhật tổng tiền trong giỏ hàng,..
Code JS
Trong file main.js các bạn cũng gọi HTML DOM như ở trên. Mình sẽ giải thích cơ 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 trong .cart_items có nhiều .cart_row trong mỗi cart_row chứa các thông tin của sản phẩm như hình ảnh, tiêu đề, giá tiền của sản phẩm. Bởi vì .cart-row này trong .cart-items nên không thể gọi document được mà phải gọi dựa trên DOM của .cart_items.

Sau khi gọi được cart_rows chúng ta sẽ chạy vòng lặp để biết có bao nhiêu
.cart_row. Tiếp đến chúng ta sẽ gọi HTML DOM của .cart-price và .cart-quantity-input, 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 [0]
Tiếp đến chúng ta sẽ lấy giá trị của giá 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í. Total sẽ gán bằng 0 đúng không nào. Sau khi chúng ta tính tổng tiền của sản phẩm đầu tiên sẽ được gán vào total. Thì bây giờ total được gán bằng tổng số tiền của sản phẩm đầu tiên, nếu bạn có sản phẩm thứ hai trong giỏ hàng thì total = total của sản phẩm đầu tiên + tổng tiền của sản phẩm thứ hai và gán vào total tổng, cứ thế nhiều sản phẩm hơn cũng làm như vậy đó.

// update cart 
function updatecart[] {
  var cart_item = document.getElementsByClassName["cart-items"][0];
  var cart_rows = cart_item.getElementsByClassName["cart-row"];
  var total = 0;
  for [var i = 0; i < cart_rows.length; i++] {
    var cart_row = cart_rows[i]
    var price_item = cart_row.getElementsByClassName["cart-price "][0]
    var quantity_item = cart_row.getElementsByClassName["cart-quantity-input"][0]
    var price = parseFloat[price_item.innerText]// chuyển một chuổi string sang number để tính tổng tiền.
    var quantity = quantity_item.value // lấy giá trị trong thẻ input
    total = total + [price * quantity]
  }
  document.getElementsByClassName["cart-total-price"][0].innerText = total + 'VNĐ'
  // Thay đổi text = total trong .cart-total-price. Chỉ có một .cart-total-price nên mình sử dụng [0].
}

Sau đó các bạn gọi hàm updatecart[] trong phần xóa sản phẩm trong giỏ hàng nhá.
Tại đâ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 những số ban đầu và bỏ những số 0 sau dấu '.' vì thế đó là lý do mà mình không dùng dấu '.'
Và đây là kết quả khi chúng ta thêm phần cập nhật sản phẩm trong giỏ hàng:
Các bạn thử xóa sản phẩm để xem total nó có thay đổi không nha.

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

Sau khi chúng ta xong phần cập nhật giỏ hàng. Tiếp đến 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[change] số lượng thì gọi function updatecart[]. Nhưng có một cái lỗi nhỏ ở đây là khi mình cho type='number' thì số 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 code là nếu giá trị mà