update cart
This commit is contained in:
Phuoc Nguyen
920
html/cart.html
920
html/cart.html
@@ -8,20 +8,6 @@
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<style>
|
||||
.quantity-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.conversion-text {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<!-- Header -->
|
||||
@@ -29,15 +15,25 @@
|
||||
<a href="products.html" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="header-title">Giỏ hàng (3)</h1>
|
||||
<button class="back-button">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
<h1 class="header-title">Giỏ hàng (<span id="totalItemsCount">3</span>)</h1>
|
||||
<button class="back-button" onclick="selectAll()">
|
||||
<i class="fas fa-check-square"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container" style="padding-bottom: 120px;">
|
||||
<!-- Select All Section -->
|
||||
<div class="select-all-section">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
|
||||
<span class="checkmark"></span>
|
||||
<span class="checkbox-label">Chọn tất cả</span>
|
||||
</label>
|
||||
<span class="selected-count" id="selectedCountText">Đã chọn: 0/3</span>
|
||||
</div>
|
||||
|
||||
<!-- Warehouse Selection -->
|
||||
<div class="card mb-3">
|
||||
<!--<div class="card mb-3">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<label class="form-label" for="warehouse">Kho xuất hàng</label>
|
||||
<select id="warehouse" class="form-input form-select">
|
||||
@@ -46,113 +42,807 @@
|
||||
<option value="danang">Kho Đà Nẵng - Sơn Trà</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- Cart Items -->
|
||||
<div class="cart-item">
|
||||
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch men cao cấp 60x60</div>
|
||||
<div class="text-small text-muted">Mã: ET-MC6060</div>
|
||||
<div class="cart-item-price">450.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">10</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">(Quy đổi: <strong>28 viên</strong> / <strong>10.08 m²</strong>)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-item">
|
||||
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch granite nhập khẩu 1200x1200</div>
|
||||
<div class="text-small text-muted">Mã: ET-GR8080</div>
|
||||
<div class="cart-item-price">680.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">15</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">(Quy đổi: <strong>11 viên</strong> / <strong>15.84 m²</strong>)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-item">
|
||||
<img src="https://images.unsplash.com/photo-1600607687644-aac4c3eac7f4?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch mosaic trang trí 750x1500</div>
|
||||
<div class="text-small text-muted">Mã: ET-MS3030</div>
|
||||
<div class="cart-item-price">320.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value">5</span>
|
||||
<button class="quantity-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">(Quy đổi: <strong>5 viên</strong> / <strong>5.625 m²</strong>)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discount Code -->
|
||||
<div class="card">
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<label class="form-label">Mã giảm giá</label>
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<input type="text" class="form-input" style="flex: 1;" placeholder="Nhập mã giảm giá">
|
||||
<button class="btn btn-primary">Áp dụng</button>
|
||||
<div id="cartItemsContainer">
|
||||
<!-- Cart Item 1 -->
|
||||
<div class="cart-item" data-item-id="1"
|
||||
data-unit-price="450000"
|
||||
data-quantity-m2="10"
|
||||
data-quantity-converted="10.08">
|
||||
<label class="checkbox-container-inline">
|
||||
<input type="checkbox" class="item-checkbox" onchange="updateCartSummary()">
|
||||
<span class="checkmark-inline" style="
|
||||
margin-top: 50px;"></span>
|
||||
</label>
|
||||
<img src="https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch men cao cấp 60x60</div>
|
||||
<!--<div class="text-small text-muted">Mã: ET-MC6060</div>-->
|
||||
<div class="cart-item-price">450.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn" onclick="decreaseQuantity(1)">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value" id="quantity-1">10</span>
|
||||
<button class="quantity-btn" onclick="increaseQuantity(1)">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">
|
||||
(Quy đổi: <strong><span id="converted-1">10.08</span> m²</strong>
|
||||
= <strong><span id="boxes-1">28</span> viên</strong>)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-small text-success">
|
||||
<i class="fas fa-check-circle"></i> Bạn được giảm 15% (hạng Diamond)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<div class="card">
|
||||
<h3 class="card-title">Thông tin đơn hàng</h3>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Tạm tính (30 m²)</span>
|
||||
<span>17.107.200đ</span>
|
||||
|
||||
<!-- Cart Item 2 -->
|
||||
<div class="cart-item" data-item-id="2"
|
||||
data-unit-price="680000"
|
||||
data-quantity-m2="15"
|
||||
data-quantity-converted="15.84">
|
||||
<label class="checkbox-container-inline">
|
||||
<input type="checkbox" class="item-checkbox" onchange="updateCartSummary()">
|
||||
<span class="checkmark-inline" style="
|
||||
margin-top: 50px;"></span>
|
||||
</label>
|
||||
<img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=80&h=80&fit=crop" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch granite nhập khẩu...</div>
|
||||
<!--<div class="text-small text-muted">Mã: ET-GR8080</div>-->
|
||||
<div class="cart-item-price">680.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn" onclick="decreaseQuantity(2)">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value" id="quantity-2">15</span>
|
||||
<button class="quantity-btn" onclick="increaseQuantity(2)">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">
|
||||
(Quy đổi: <strong><span id="converted-2">15.84</span> m²</strong>
|
||||
= <strong><span id="boxes-2">11</span> viên</strong>)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Giảm giá Diamond (-15%)</span>
|
||||
<span class="text-success">-2.566.000đ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-between mb-2">
|
||||
<span>Phí vận chuyển</span>
|
||||
<span>Miễn phí</span>
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px;">
|
||||
<div class="d-flex justify-between">
|
||||
<span class="text-bold" style="font-size: 16px;">Tổng cộng</span>
|
||||
<span class="text-bold text-primary" style="font-size: 18px;">14.541.120đ</span>
|
||||
|
||||
<!-- Cart Item 3 -->
|
||||
<div class="cart-item" data-item-id="3"
|
||||
data-unit-price="320000"
|
||||
data-quantity-m2="5"
|
||||
data-quantity-converted="5.625">
|
||||
<label class="checkbox-container-inline">
|
||||
<input type="checkbox" class="item-checkbox" onchange="updateCartSummary()">
|
||||
<span class="checkmark-inline" style="
|
||||
margin-top: 50px;"></span>
|
||||
</label>
|
||||
<img src="https://www.eurotile.vn/pictures/catalog/product/0-gachkholon/120x240/thach-an/map/THA-X01C-1.jpg" alt="Product" class="cart-item-image">
|
||||
<div class="cart-item-info">
|
||||
<div class="cart-item-name">Gạch mosaic trang trí 75...</div>
|
||||
<!--<div class="text-small text-muted">Mã: ET-MS3030</div>-->
|
||||
<div class="cart-item-price">320.000đ/m²</div>
|
||||
<div class="quantity-control">
|
||||
<button class="quantity-btn" onclick="decreaseQuantity(3)">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<span class="quantity-value" id="quantity-3">5</span>
|
||||
<button class="quantity-btn" onclick="increaseQuantity(3)">
|
||||
<i class="fas fa-plus"></i>
|
||||
</button>
|
||||
<span class="text-small text-muted" style="margin-left: 8px;">m²</span>
|
||||
</div>
|
||||
<div class="text-small text-muted">
|
||||
(Quy đổi: <strong><span id="converted-3">5.625</span> m²</strong>
|
||||
= <strong><span id="boxes-3">5</span> viên</strong>)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkout Button -->
|
||||
<div style="margin-bottom: 24px;">
|
||||
<a href="checkout.html" class="btn btn-primary btn-block">
|
||||
<!-- Empty Cart Message (Hidden by default) -->
|
||||
<div id="emptyCartMessage" style="display: none;">
|
||||
<div class="card text-center" style="padding: 40px 20px;">
|
||||
<i class="fas fa-shopping-cart" style="font-size: 64px; color: #ddd; margin-bottom: 16px;"></i>
|
||||
<h3 style="color: #666; margin-bottom: 8px;">Giỏ hàng trống</h3>
|
||||
<p style="color: #999; margin-bottom: 24px;">Bạn chưa có sản phẩm nào trong giỏ hàng</p>
|
||||
<a href="products.html" class="btn btn-primary">
|
||||
<i class="fas fa-shopping-bag"></i>
|
||||
Tiếp tục mua sắm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Footer -->
|
||||
<div class="cart-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<button class="delete-btn" onclick="deleteSelectedItems()" id="deleteBtn">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
<div class="total-info">
|
||||
<div class="total-label">Tổng tạm tính (<span id="selectedProductsCount">0</span> sản phẩm)</div>
|
||||
<div class="total-amount" id="totalAmount">0đ</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="checkout-btn" onclick="proceedToCheckout()" id="checkoutBtn" disabled>
|
||||
Tiến hành đặt hàng
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Select All Section */
|
||||
.select-all-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
font-size: 14px;
|
||||
color: #005B9A;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Checkbox Styles */
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-color: white;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
border-color: #005B9A;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #005B9A;
|
||||
border-color: #005B9A;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 6px;
|
||||
height: 11px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Inline Checkbox for Cart Items */
|
||||
.checkbox-container-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.checkbox-container-inline input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark-inline {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: white;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkbox-container-inline:hover input ~ .checkmark-inline {
|
||||
border-color: #005B9A;
|
||||
}
|
||||
|
||||
.checkbox-container-inline input:checked ~ .checkmark-inline {
|
||||
background-color: #005B9A;
|
||||
border-color: #005B9A;
|
||||
}
|
||||
|
||||
.checkmark-inline:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container-inline input:checked ~ .checkmark-inline:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container-inline .checkmark-inline:after {
|
||||
left: 5px;
|
||||
top: 1px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Cart Item */
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cart-item:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cart-item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cart-item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cart-item-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.cart-item-price {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #005B9A;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Quantity Control */
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.quantity-btn:hover {
|
||||
border-color: #005B9A;
|
||||
color: #005B9A;
|
||||
}
|
||||
|
||||
.quantity-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Cart Footer */
|
||||
.cart-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 2px solid #f0f0f0;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid #dc3545;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
color: #dc3545;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.delete-btn:disabled:hover {
|
||||
background: white;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #005B9A;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
padding: 14px 28px;
|
||||
background: linear-gradient(135deg, #005B9A 0%, #004578 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.checkout-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 91, 154, 0.3);
|
||||
}
|
||||
|
||||
.checkout-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.checkout-btn:disabled:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .checkbox-container-inline {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}*/
|
||||
|
||||
/* .cart-item-image {
|
||||
align-self: center;
|
||||
margin-top: 32px;
|
||||
}*/
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Cart data structure with conversion info
|
||||
// Each product has: unitPrice (đơn giá), quantityM2 (người dùng nhập), quantityConverted (làm tròn lên)
|
||||
const cartData = {
|
||||
1: {
|
||||
name: "Gạch men cao cấp 60x60",
|
||||
code: "ET-MC6060",
|
||||
unitPrice: 450000,
|
||||
quantityM2: 10,
|
||||
quantityConverted: 10.08, // Rounded up m²
|
||||
boxes: 28 // Number of tiles/boxes
|
||||
},
|
||||
2: {
|
||||
name: "Gạch granite nhập khẩu 1200x1200",
|
||||
code: "ET-GR8080",
|
||||
unitPrice: 680000,
|
||||
quantityM2: 15,
|
||||
quantityConverted: 15.84,
|
||||
boxes: 11
|
||||
},
|
||||
3: {
|
||||
name: "Gạch mosaic trang trí 750x1500",
|
||||
code: "ET-MS3030",
|
||||
unitPrice: 320000,
|
||||
quantityM2: 5,
|
||||
quantityConverted: 5.625,
|
||||
boxes: 5
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize cart on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateCartSummary();
|
||||
});
|
||||
|
||||
// Toggle select all checkbox
|
||||
function toggleSelectAll() {
|
||||
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
||||
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
|
||||
|
||||
itemCheckboxes.forEach(checkbox => {
|
||||
checkbox.checked = selectAllCheckbox.checked;
|
||||
});
|
||||
|
||||
updateCartSummary();
|
||||
}
|
||||
|
||||
// Select all function (header button)
|
||||
function selectAll() {
|
||||
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
||||
selectAllCheckbox.checked = true;
|
||||
toggleSelectAll();
|
||||
}
|
||||
|
||||
// Update cart summary (total, selected count, etc.)
|
||||
function updateCartSummary() {
|
||||
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
|
||||
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
||||
|
||||
let selectedCount = 0;
|
||||
let totalAmount = 0;
|
||||
let allSelected = true;
|
||||
|
||||
itemCheckboxes.forEach((checkbox, index) => {
|
||||
const cartItem = checkbox.closest('.cart-item');
|
||||
const itemId = parseInt(cartItem.dataset.itemId);
|
||||
|
||||
if (checkbox.checked) {
|
||||
selectedCount++;
|
||||
|
||||
// CRITICAL: Calculate price using CONVERTED quantity (rounded up)
|
||||
const unitPrice = cartData[itemId].unitPrice;
|
||||
const quantityConverted = cartData[itemId].quantityConverted;
|
||||
const itemTotal = unitPrice * quantityConverted;
|
||||
|
||||
totalAmount += itemTotal;
|
||||
} else {
|
||||
allSelected = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Update select all checkbox
|
||||
selectAllCheckbox.checked = allSelected && itemCheckboxes.length > 0;
|
||||
|
||||
// Update selected count text
|
||||
document.getElementById('selectedCountText').textContent = `Đã chọn: ${selectedCount}/${itemCheckboxes.length}`;
|
||||
document.getElementById('selectedProductsCount').textContent = selectedCount;
|
||||
|
||||
// Update total amount with Vietnamese format
|
||||
document.getElementById('totalAmount').textContent = formatCurrency(totalAmount);
|
||||
|
||||
// Enable/disable checkout and delete buttons
|
||||
const checkoutBtn = document.getElementById('checkoutBtn');
|
||||
const deleteBtn = document.getElementById('deleteBtn');
|
||||
|
||||
if (selectedCount > 0) {
|
||||
checkoutBtn.disabled = false;
|
||||
deleteBtn.disabled = false;
|
||||
} else {
|
||||
checkoutBtn.disabled = true;
|
||||
deleteBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Increase quantity
|
||||
function increaseQuantity(itemId) {
|
||||
cartData[itemId].quantityM2 += 1;
|
||||
|
||||
// Recalculate converted quantity (simulated - in real app this comes from backend)
|
||||
// For demo: add ~8% for rounding up simulation
|
||||
cartData[itemId].quantityConverted = Math.ceil(cartData[itemId].quantityM2 * 1.008 * 100) / 100;
|
||||
|
||||
// Update display
|
||||
document.getElementById(`quantity-${itemId}`).textContent = cartData[itemId].quantityM2;
|
||||
document.getElementById(`converted-${itemId}`).textContent = cartData[itemId].quantityConverted;
|
||||
|
||||
// Update cart item data attribute
|
||||
const cartItem = document.querySelector(`[data-item-id="${itemId}"]`);
|
||||
cartItem.dataset.quantityM2 = cartData[itemId].quantityM2;
|
||||
cartItem.dataset.quantityConverted = cartData[itemId].quantityConverted;
|
||||
|
||||
// Recalculate total if item is selected
|
||||
updateCartSummary();
|
||||
}
|
||||
|
||||
// Decrease quantity
|
||||
function decreaseQuantity(itemId) {
|
||||
if (cartData[itemId].quantityM2 > 1) {
|
||||
cartData[itemId].quantityM2 -= 1;
|
||||
|
||||
// Recalculate converted quantity
|
||||
cartData[itemId].quantityConverted = Math.ceil(cartData[itemId].quantityM2 * 1.008 * 100) / 100;
|
||||
|
||||
// Update display
|
||||
document.getElementById(`quantity-${itemId}`).textContent = cartData[itemId].quantityM2;
|
||||
document.getElementById(`converted-${itemId}`).textContent = cartData[itemId].quantityConverted;
|
||||
|
||||
// Update cart item data attribute
|
||||
const cartItem = document.querySelector(`[data-item-id="${itemId}"]`);
|
||||
cartItem.dataset.quantityM2 = cartData[itemId].quantityM2;
|
||||
cartItem.dataset.quantityConverted = cartData[itemId].quantityConverted;
|
||||
|
||||
// Recalculate total if item is selected
|
||||
updateCartSummary();
|
||||
}
|
||||
}
|
||||
|
||||
// Delete selected items
|
||||
function deleteSelectedItems() {
|
||||
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
|
||||
let selectedItems = [];
|
||||
|
||||
itemCheckboxes.forEach(checkbox => {
|
||||
if (checkbox.checked) {
|
||||
const cartItem = checkbox.closest('.cart-item');
|
||||
const itemId = parseInt(cartItem.dataset.itemId);
|
||||
selectedItems.push(itemId);
|
||||
}
|
||||
});
|
||||
|
||||
if (selectedItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm deletion
|
||||
if (!confirm(`Bạn có chắc muốn xóa ${selectedItems.length} sản phẩm đã chọn?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove items from DOM
|
||||
selectedItems.forEach(itemId => {
|
||||
const cartItem = document.querySelector(`[data-item-id="${itemId}"]`);
|
||||
cartItem.style.opacity = '0';
|
||||
cartItem.style.transform = 'translateX(-100%)';
|
||||
|
||||
setTimeout(() => {
|
||||
cartItem.remove();
|
||||
delete cartData[itemId];
|
||||
|
||||
// Update total items count
|
||||
const remainingItems = document.querySelectorAll('.cart-item').length;
|
||||
document.getElementById('totalItemsCount').textContent = remainingItems;
|
||||
|
||||
// Show empty cart message if no items left
|
||||
if (remainingItems === 0) {
|
||||
document.getElementById('cartItemsContainer').style.display = 'none';
|
||||
document.getElementById('emptyCartMessage').style.display = 'block';
|
||||
document.querySelector('.select-all-section').style.display = 'none';
|
||||
document.querySelector('.cart-footer').style.display = 'none';
|
||||
} else {
|
||||
updateCartSummary();
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
showToast('Đã xóa sản phẩm khỏi giỏ hàng', 'success');
|
||||
}
|
||||
|
||||
// Proceed to checkout
|
||||
function proceedToCheckout() {
|
||||
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
|
||||
let selectedItems = [];
|
||||
|
||||
itemCheckboxes.forEach(checkbox => {
|
||||
if (checkbox.checked) {
|
||||
const cartItem = checkbox.closest('.cart-item');
|
||||
const itemId = parseInt(cartItem.dataset.itemId);
|
||||
selectedItems.push({
|
||||
id: itemId,
|
||||
name: cartData[itemId].name,
|
||||
code: cartData[itemId].code,
|
||||
unitPrice: cartData[itemId].unitPrice,
|
||||
quantityM2: cartData[itemId].quantityM2,
|
||||
quantityConverted: cartData[itemId].quantityConverted,
|
||||
boxes: cartData[itemId].boxes
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (selectedItems.length === 0) {
|
||||
showToast('Vui lòng chọn ít nhất 1 sản phẩm', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Save selected items to localStorage for checkout page
|
||||
localStorage.setItem('checkoutItems', JSON.stringify(selectedItems));
|
||||
|
||||
// Navigate to checkout
|
||||
window.location.href = 'checkout.html';
|
||||
}
|
||||
|
||||
// Format currency to Vietnamese Dong
|
||||
function formatCurrency(amount) {
|
||||
return new Intl.NumberFormat('vi-VN', {
|
||||
style: 'currency',
|
||||
currency: 'VND',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount);
|
||||
}
|
||||
|
||||
// Toast notification
|
||||
function showToast(message, type = 'success') {
|
||||
const colors = {
|
||||
success: '#28a745',
|
||||
error: '#dc3545',
|
||||
warning: '#ffc107',
|
||||
info: '#005B9A'
|
||||
};
|
||||
|
||||
const icons = {
|
||||
success: 'fa-check-circle',
|
||||
error: 'fa-exclamation-circle',
|
||||
warning: 'fa-exclamation-triangle',
|
||||
info: 'fa-info-circle'
|
||||
};
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.innerHTML = `
|
||||
<i class="fas ${icons[type]}"></i>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: ${colors[type]};
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: slideDown 0.3s ease;
|
||||
max-width: 90%;
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideUp 0.3s ease';
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(toast);
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Add animation styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -20px);
|
||||
}
|
||||
}
|
||||
.cart-item {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user