849 lines
30 KiB
HTML
849 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Giỏ hàng - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="products.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<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" 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="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">
|
|
<option value="hanoi">Kho Hà Nội - Nguyễn Trãi</option>
|
|
<option value="hcm">Kho TP.HCM - Quận 7</option>
|
|
<option value="danang">Kho Đà Nẵng - Sơn Trà</option>
|
|
</select>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- Cart Items -->
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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
|
|
</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>
|