estructura inicial de carrito hecha

This commit is contained in:
2025-10-14 15:16:02 +02:00
parent 90376e61c8
commit a33ba3256b
11 changed files with 408 additions and 3 deletions

View File

@ -0,0 +1,28 @@
$(() => {
const badge = document.getElementById("cart-item-count");
if (!badge) return;
function updateCartCount() {
fetch("/cart/count")
.then(res => res.ok ? res.text() : "0")
.then(count => {
const n = parseInt(count || "0", 10);
if (isNaN(n) || n === 0) {
badge.classList.add("d-none");
} else {
badge.textContent = n;
badge.classList.remove("d-none");
}
})
.catch(() => badge.classList.add("d-none"));
}
// Actualizar al cargar
updateCartCount();
// Si quieres refrescar cada 60s:
setInterval(updateCartCount, 60000);
// generate a custom event to update the cart count from other scripts
document.addEventListener("update-cart", updateCartCount);
});

View File

@ -39,6 +39,10 @@
<th:block layout:fragment="pagejs" />
<script th:src="@{/assets/js/app.js}"></script>
<script th:src="@{/assets/js/pages/imprimelibros/languageBundle.js}"></script>
<th:block th:if="${#authorization.expression('isAuthenticated()')}">
<script src="/assets/js/pages/imprimelibros/cart-badge.js"></script>
</th:block>
</body>
</html>

View File

@ -54,8 +54,8 @@
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language py-2" data-lang="en-GB"
title="English">
<a href="javascript:void(0);" class="dropdown-item notify-item language py-2"
data-lang="en-GB" title="English">
<img src="/assets/images/flags/gb.svg" alt="user-image" class="me-2 rounded"
height="18">
<span class="align-middle">English</span>
@ -64,6 +64,19 @@
</div>
</div>
<div th:if="${#authorization.expression('isAuthenticated()')}"
class="ms-1 header-item d-none d-sm-flex">
<button type="button" id="btn_cart"
class="btn btn-icon btn-topbar material-shadow-none btn-ghost-secondary rounded-circle light-dark-mode">
<i class="bx bx-cart fs-22"></i>
<span id="cart-item-count"
class="position-absolute topbar-badge cartitem-badge fs-10 translate-middle badge rounded-pill bg-info d-none">
0
</span>
</button>
</div>
<div th:if="${#authorization.expression('isAuthenticated()')}">
<div class="dropdown ms-sm-3 header-item topbar-user">
@ -92,7 +105,8 @@
<a class="dropdown-item" href="#"
onclick="document.getElementById('logoutForm').submit(); return false;">
<i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i>
<span class="align-middle" data-key="t-logout" th:text="#{app.logout}">Cerrar sesión</span>
<span class="align-middle" data-key="t-logout" th:text="#{app.logout}">Cerrar
sesión</span>
</a>
</div>
</div>