92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
|
async function loadCart() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/cart', {
|
||
|
|
headers: getAuthHeaders()
|
||
|
|
});
|
||
|
|
|
||
|
|
if (response.status === 401) {
|
||
|
|
window.location.href = '/login.html';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const items = await response.json();
|
||
|
|
|
||
|
|
if (items.length === 0) {
|
||
|
|
container.innerHTML = `
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<p class="text-muted">Twój koszyk jest pusty</p>
|
||
|
|
<a href="/" class="btn btn-gothic">Przeglądaj książki</a>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const container = document.getElementById('cart-items');
|
||
|
|
container.innerHTML = items.map(item => `
|
||
|
|
<div class="col-md-6 col-lg-4">
|
||
|
|
<div class="card dark-card h-100">
|
||
|
|
<img src="${item.obraz_url}"
|
||
|
|
class="card-img-top"
|
||
|
|
style="height: 200px; object-fit: cover;">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">${item.tytul}</h5>
|
||
|
|
<p class="card-text">Ilość: ${item.quantity}</p>
|
||
|
|
<p class="text-danger">${item.cena.toString()} PLN</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`).join('');
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Błąd:', error);
|
||
|
|
showError('Wystąpił błąd podczas ładowania koszyka');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
||
|
|
try {
|
||
|
|
const token = localStorage.getItem('token');
|
||
|
|
if (!token) {
|
||
|
|
window.location.href = '/login.html';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await fetch('/api/cart', {
|
||
|
|
headers: {
|
||
|
|
'Authorization': `Bearer ${token}`
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) throw new Error('Błąd ładowania koszyka');
|
||
|
|
|
||
|
|
const cartItems = await response.json();
|
||
|
|
const container = document.getElementById('cart-items');
|
||
|
|
container.innerHTML = '';
|
||
|
|
|
||
|
|
cartItems.forEach(item => {
|
||
|
|
const itemHTML = `
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="card dark-card mb-3">
|
||
|
|
<div class="row g-0">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<img src="${item.obraz_url}" class="img-fluid rounded-start" alt="${item.tytul}">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">${item.tytul}</h5>
|
||
|
|
<p class="card-text">Ilość: ${item.quantity}</p>
|
||
|
|
<p class="card-text">Cena: ${item.cena} PLN</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
container.insertAdjacentHTML('beforeend', itemHTML);
|
||
|
|
});
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error:', error);
|
||
|
|
alert('Nie udało się załadować koszyka');
|
||
|
|
}
|
||
|
|
});
|