113 lines
4.6 KiB
JavaScript
113 lines
4.6 KiB
JavaScript
// view.js
|
||
export class View {
|
||
constructor() {
|
||
this.basketContainer = document.getElementById('basketContainer');
|
||
this.emptyBasketElement = document.querySelector('.empty-basket');
|
||
}
|
||
|
||
// Показать корзину с товарами
|
||
showBasket(items) {
|
||
if (items.length === 0) {
|
||
this.showEmptyBasket();
|
||
return;
|
||
}
|
||
|
||
this.hideEmptyBasket();
|
||
|
||
const basketHTML = items.map(item => this.createBasketItemHTML(item)).join('');
|
||
this.basketContainer.innerHTML = `
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow">
|
||
<div class="card-header" style="background-color: #00264d; color: white;">
|
||
<h5 class="mb-0"><i class="bi bi-cart me-2"></i>Корзина</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
${basketHTML}
|
||
<div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
|
||
<h5>Итого: $${this.calculateTotal(items).toFixed(2)}</h5>
|
||
<button class="btn btn-lg" style="background-color: #00264d; color: white;" id="checkoutBtn">
|
||
<i class="bi bi-credit-card me-2"></i>Оформить заказ
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Создать HTML для элемента корзины
|
||
createBasketItemHTML(item) {
|
||
return `
|
||
<div class="row align-items-center mb-3 basket-item" data-id="${item.id}">
|
||
<div class="col-md-2">
|
||
<img src="${item.image}" alt="${item.name}" class="img-fluid rounded" style="max-height: 80px;">
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h6 class="mb-1">${item.name}</h6>
|
||
<p class="text-muted small mb-0">${item.description}</p>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<span class="fw-bold">$${item.price}</span>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<div class="input-group input-group-sm">
|
||
<button class="btn btn-outline-secondary decrease-btn" type="button">-</button>
|
||
<input type="number" class="form-control text-center quantity-input" value="${item.quantity}" min="1">
|
||
<button class="btn btn-outline-secondary increase-btn" type="button">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<span class="fw-bold me-3">$${(item.price * item.quantity).toFixed(2)}</span>
|
||
<button class="btn btn-sm btn-outline-danger remove-btn">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Показать пустую корзину
|
||
showEmptyBasket() {
|
||
if (this.emptyBasketElement) {
|
||
this.emptyBasketElement.style.display = 'block';
|
||
}
|
||
if (this.basketContainer) {
|
||
this.basketContainer.innerHTML = '';
|
||
}
|
||
}
|
||
|
||
// Скрыть сообщение о пустой корзине
|
||
hideEmptyBasket() {
|
||
if (this.emptyBasketElement) {
|
||
this.emptyBasketElement.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// Рассчитать общую сумму
|
||
calculateTotal(items) {
|
||
return items.reduce((total, item) => total + (item.price * item.quantity), 0);
|
||
}
|
||
|
||
// Показать уведомление
|
||
showNotification(message, type = 'success') {
|
||
// Создаем элемент уведомления
|
||
const notification = document.createElement('div');
|
||
notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
|
||
notification.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 1050; min-width: 300px;';
|
||
notification.innerHTML = `
|
||
${message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
`;
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
// Автоматически удаляем через 3 секунды
|
||
setTimeout(() => {
|
||
if (notification.parentNode) {
|
||
notification.remove();
|
||
}
|
||
}, 3000);
|
||
}
|
||
} |