trabajando en la vista del carro de la compra

src/main/resources/i18n/cart_en.properties

@@ -0,0 +1 @@
+

src/main/resources/i18n/cart_es.properties

@@ -0,0 +1,4 @@
+cart.title=Cesta de la compra
+cart.empty=Tu cesta de la compra está vacía.
+
+cart.item.presupuesto-numero=Presupuesto #

src/main/resources/i18n/presupuesto_es.properties

@@ -11,6 +11,7 @@ presupuesto.add-to-presupuesto=Añadir al presupuesto
 presupuesto.calcular=Calcular
 presupuesto.add=Añadir presupuesto
 presupuesto.guardar=Guardar
+presupuesto.add-to-cart=Añadir a la cesta
 
 presupuesto.nav.presupuestos-cliente=Presupuestos cliente
 presupuesto.nav.presupuestos-anonimos=Presupuestos anónimos
@@ -20,6 +21,7 @@ presupuesto.estado.aceptado=Aceptado
 presupuesto.estado.modificado=Modificado
 
 presupuesto.tabla.id=ID
+presupuesto.tabla.numero=Número
 presupuesto.tabla.titulo=Título
 presupuesto.tabla.cliente=Cliente
 presupuesto.tabla.encuadernacion=Encuadernación
@@ -100,8 +102,8 @@ presupuesto.offset-blanco-volumen=Offset Blanco Volumen
 presupuesto.offset-ahuesado=Offset Ahuesado
 presupuesto.offset-ahuesado-volumen=Offset Ahuesado Volumen
 presupuesto.estucado-mate=Estucado Mate
-presupuesto.volver-datos-generales=Volver a datos generales
-presupuesto.continuar-cubierta=Continuar a diseño cubierta
+presupuesto.volver-datos-generales=Datos generales
+presupuesto.continuar-cubierta=Diseño cubierta
 
 # Pestaña cubierta
 presupuesto.plantilla-cubierta=Plantilla de cubierta
@@ -139,8 +141,8 @@ presupuesto.cartulina-grafica=Cartulina gráfica
 presupuesto.estucado-mate-cubierta=Estucado mate
 presupuesto.gramaje-cubierta=Gramaje cubierta
 presupuesto.gramaje-cubierta-descripcion=Seleccione el gramaje para la cubierta
-presupuesto.volver-interior=Volver a diseño interior
-presupuesto.continuar-seleccion-tirada=Continuar a selección de tirada
+presupuesto.volver-interior=Diseño interior
+presupuesto.continuar-seleccion-tirada=Selección de tirada
 presupuesto.offset=Offset
 presupuesto.estucado=Estucado
 presupuesto.verjurado=Verjurado
@@ -176,8 +178,8 @@ presupuesto.precio-unidad=Precio por unidad
 presupuesto.seleccionar-tirada=Seleccionar tirada
 presupuesto.tirada-seleccionada=Seleccionada
 presupuesto.unidades=UNIDADES
-presupuesto.volver-seleccion-tirada=Volver a selección de tirada
-presupuesto.continuar-extras-libro=Continuar a extras del libro
+presupuesto.volver-seleccion-tirada=Selección de tirada
+presupuesto.continuar-extras-libro=Extras del libro
 presupuesto.error-obtener-precio=No se pudo obtener el precio para los datos introducidos. Por favor, contacte con el soporte técnico.
 
 #pestaña extras del libro
@@ -195,7 +197,7 @@ presupuesto.extras-marcapaginas=Marcapáginas
 presupuesto.extras-maquetacion=Maquetación
 presupuesto.extras-ferro-digital-ribbon=Incluido
 presupuesto.extras-calcular=Calcular
-presupuesto.volver-cubierta=Volver a diseño cubierta
+presupuesto.volver-cubierta=Diseño cubierta
 presupuesto.finalizar=Finalizar presupuesto
 presupuesto.calcular-presupuesto=Calcular presupuesto
 presupuesto.consultar-soporte=Consultar con soporte
@@ -221,7 +223,7 @@ presupuesto.resumen-texto-end=</ul>
 presupuesto.resumen-texto-sobrecubierta=<li>Sobrecubierta impresa en {0} {1} gr. <ul><li>Acabado {2}</li><li>Solapas: {3} mm.</li></ul></li>
 presupuesto.resumen-texto-faja=<li>Faja impresa en {0} {1} gr. con un alto de {2} mm. <ul><li>Acabado {3}</li><li>Solapas: {4} mm.</li></ul></li>
 presupuesto.resumen-deposito-legal=Ejemplares para el Depósito Legal
-presupuesto.volver-extras=Volver a extras
+presupuesto.volver-extras=Extras del libro
 presupuesto.resumen.inicie-sesion=Inicie sesión para continuar
 presupuesto.resumen.agregar-cesta=Agregar a la cesta
 

src/main/resources/static/assets/js/app.js

@@ -49,9 +49,118 @@
       location.replace(url); // alinea y no deja historial extra
     }
 
+    if (document.getElementById("topnav-hamburger-icon")) {
+      document.getElementById("topnav-hamburger-icon").addEventListener("click", toggleHamburgerMenu);
+    }
+
+    window.addEventListener("resize", windowResizeHover);
+    windowResizeHover();
+
     initsAlert();
   }
 
+  function windowResizeHover() {
+    feather.replace();
+    var windowSize = document.documentElement.clientWidth;
+    if (windowSize < 1025 && windowSize > 767) {
+      document.body.classList.remove("twocolumn-panel");
+      if (sessionStorage.getItem("data-layout") == "twocolumn") {
+        document.documentElement.setAttribute("data-layout", "twocolumn");
+        if (document.getElementById("customizer-layout03")) {
+          document.getElementById("customizer-layout03").click();
+        }
+        twoColumnMenuGenerate();
+        initTwoColumnActiveMenu();
+        isCollapseMenu();
+      }
+      if (sessionStorage.getItem("data-layout") == "vertical") {
+        document.documentElement.setAttribute("data-sidebar-size", "sm");
+      }
+      if (document.querySelector(".hamburger-icon")) {
+        document.querySelector(".hamburger-icon").classList.add("open");
+      }
+    } else if (windowSize >= 1025) {
+      document.body.classList.remove("twocolumn-panel");
+      if (sessionStorage.getItem("data-layout") == "twocolumn") {
+        document.documentElement.setAttribute("data-layout", "twocolumn");
+        if (document.getElementById("customizer-layout03")) {
+          document.getElementById("customizer-layout03").click();
+        }
+        twoColumnMenuGenerate();
+        initTwoColumnActiveMenu();
+        isCollapseMenu();
+      }
+      if (sessionStorage.getItem("data-layout") == "vertical") {
+        document.documentElement.setAttribute(
+          "data-sidebar-size",
+          sessionStorage.getItem("data-sidebar-size")
+        );
+      }
+      if (document.querySelector(".hamburger-icon")) {
+        document.querySelector(".hamburger-icon").classList.remove("open");
+      }
+    } else if (windowSize <= 767) {
+      document.body.classList.remove("vertical-sidebar-enable");
+      document.body.classList.add("twocolumn-panel");
+      if (sessionStorage.getItem("data-layout") == "twocolumn") {
+        document.documentElement.setAttribute("data-layout", "vertical");
+        hideShowLayoutOptions("vertical");
+        isCollapseMenu();
+      }
+      if (sessionStorage.getItem("data-layout") != "horizontal") {
+        document.documentElement.setAttribute("data-sidebar-size", "lg");
+      }
+      if (document.querySelector(".hamburger-icon")) {
+        document.querySelector(".hamburger-icon").classList.add("open");
+      }
+    }
+
+    var isElement = document.querySelectorAll("#navbar-nav > li.nav-item");
+    Array.from(isElement).forEach(function (item) {
+      item.addEventListener("click", menuItem.bind(this), false);
+      item.addEventListener("mouseover", menuItem.bind(this), false);
+    });
+  }
+
+  function menuItem(e) {
+    if (e.target && e.target.matches("a.nav-link span")) {
+      if (elementInViewport(e.target.parentElement.nextElementSibling) == false) {
+        e.target.parentElement.nextElementSibling.classList.add("dropdown-custom-right");
+        e.target.parentElement.parentElement.parentElement.parentElement.classList.add("dropdown-custom-right");
+        var eleChild = e.target.parentElement.nextElementSibling;
+        Array.from(eleChild.querySelectorAll(".menu-dropdown")).forEach(function (item) {
+          item.classList.add("dropdown-custom-right");
+        });
+      } else if (elementInViewport(e.target.parentElement.nextElementSibling) == true) {
+        if (window.innerWidth >= 1848) {
+          var elements = document.getElementsByClassName("dropdown-custom-right");
+          while (elements.length > 0) {
+            elements[0].classList.remove("dropdown-custom-right");
+          }
+        }
+      }
+    }
+
+    if (e.target && e.target.matches("a.nav-link")) {
+      if (elementInViewport(e.target.nextElementSibling) == false) {
+        e.target.nextElementSibling.classList.add("dropdown-custom-right");
+        e.target.parentElement.parentElement.parentElement.classList.add("dropdown-custom-right");
+        var eleChild = e.target.nextElementSibling;
+        Array.from(eleChild.querySelectorAll(".menu-dropdown")).forEach(function (item) {
+          item.classList.add("dropdown-custom-right");
+        });
+      } else if (elementInViewport(e.target.nextElementSibling) == true) {
+        if (window.innerWidth >= 1848) {
+          var elements = document.getElementsByClassName("dropdown-custom-right");
+          while (elements.length > 0) {
+            elements[0].classList.remove("dropdown-custom-right");
+          }
+        }
+      }
+    }
+  }
+
+
   function initsAlert() {
     var alerts = document.querySelectorAll('.alert.alert-dismissible');
     alerts.forEach(function (el) {
@@ -67,4 +176,61 @@
   }
 
   document.addEventListener("DOMContentLoaded", initLanguage);
+
+
+  function toggleHamburgerMenu() {
+    var windowSize = document.documentElement.clientWidth;
+
+    if (windowSize > 767)
+      document.querySelector(".hamburger-icon").classList.toggle("open");
+
+    //For collapse horizontal menu
+    if (document.documentElement.getAttribute("data-layout") === "horizontal") {
+      document.body.classList.contains("menu") ? document.body.classList.remove("menu") : document.body.classList.add("menu");
+    }
+
+    //For collapse vertical menu
+    if (document.documentElement.getAttribute("data-layout") === "vertical") {
+      if (windowSize <= 1025 && windowSize > 767) {
+        document.body.classList.remove("vertical-sidebar-enable");
+        document.documentElement.getAttribute("data-sidebar-size") == "sm" ?
+          document.documentElement.setAttribute("data-sidebar-size", "") :
+          document.documentElement.setAttribute("data-sidebar-size", "sm");
+      } else if (windowSize > 1025) {
+        document.body.classList.remove("vertical-sidebar-enable");
+        document.documentElement.getAttribute("data-sidebar-size") == "lg" ?
+          document.documentElement.setAttribute("data-sidebar-size", "sm") :
+          document.documentElement.setAttribute("data-sidebar-size", "lg");
+      } else if (windowSize <= 767) {
+        document.body.classList.add("vertical-sidebar-enable");
+        document.documentElement.setAttribute("data-sidebar-size", "lg");
+      }
+    }
+
+    // semibox menu
+    if (document.documentElement.getAttribute("data-layout") === "semibox") {
+      if (windowSize > 767) {
+        // (document.querySelector(".hamburger-icon").classList.contains("open")) ? document.documentElement.setAttribute('data-sidebar-visibility', "show"): '';
+        if (document.documentElement.getAttribute('data-sidebar-visibility') == "show") {
+          document.documentElement.getAttribute("data-sidebar-size") == "lg" ?
+            document.documentElement.setAttribute("data-sidebar-size", "sm") :
+            document.documentElement.setAttribute("data-sidebar-size", "lg");
+        } else {
+          document.getElementById("sidebar-visibility-show").click();
+          document.documentElement.setAttribute("data-sidebar-size", document.documentElement.getAttribute("data-sidebar-size"));
+        }
+      } else if (windowSize <= 767) {
+        document.body.classList.add("vertical-sidebar-enable");
+        document.documentElement.setAttribute("data-sidebar-size", "lg");
+      }
+    }
+
+    //Two column menu
+    if (document.documentElement.getAttribute("data-layout") == "twocolumn") {
+      document.body.classList.contains("twocolumn-panel") ?
+        document.body.classList.remove("twocolumn-panel") :
+        document.body.classList.add("twocolumn-panel");
+    }
+  }
+
 })();

src/main/resources/static/assets/js/pages/imprimelibros/presupuestador/wizard.js

@@ -33,7 +33,7 @@ export default class PresupuestoWizard {
                 paginasColor: 0,
                 posicionPaginasColor: '',
                 tipoEncuadernacion: 'fresado',
-                entregaTipo: 'peninsula', 
+                entregaTipo: 'peninsula',
                 ivaReducido: true,
             },
             interior: {
@@ -254,67 +254,32 @@ export default class PresupuestoWizard {
         if (this.opts.canSave) {
             $('.guardar-presupuesto').on('click', async () => {
 
-                const alert = $('#form-errors');
-                const servicios = [];
-                const payload = {
-                    id: this.opts.presupuestoId,
-                    mode: this.opts.mode,
-                    presupuesto: this.#getPresupuestoData(),
-                    servicios: this.formData.servicios.servicios,
-                    datosMaquetacion: this.formData.servicios.datosMaquetacion,
-                    datosMarcapaginas: this.formData.servicios.datosMarcapaginas,
-                    cliente_id: $('#cliente_id').val() || null,
-                };
-                try {
-                    alert.addClass('d-none').find('ul').empty();
-                    $.ajax({
-                        url: '/presupuesto/api/save',
-                        type: 'POST',
-                        contentType: 'application/json',
-                        data: JSON.stringify(payload)
-                    }).then((data) => {
-                        Swal.fire({
-                            icon: 'success',
-                            title: window.languageBundle?.get('presupuesto.exito.guardado') || 'Guardado',
-                            timer: 1800,
-                            buttonsStyling: false,
-                            customClass: {
-                                confirmButton: 'btn btn-secondary me-2', // clases para el botón confirmar
-                                cancelButton: 'btn btn-light' // clases para cancelar
-                            },
-                            showConfirmButton: false
-                        });
-                        // opcional: actualizar window.PRESUPUESTO_ID/resumen con el id devuelto
-                        if (data.id) this.opts.presupuestoId = data.id;
-                    }).catch((xhr, status, error) => {
-
-                        const errors = xhr.responseJSON;
-                        if (errors && typeof errors === 'object') {
-                            if (!this.DEBUG && xhr.responseJSON.error && xhr.responseJSON.error == 'Internal Server Error') {
-                                console.error("Error al validar los datos generales. Internal Server Error");
-                                return;
-                            }
-                            Object.values(errors).forEach(errorMsg => {
-                                alert.find('ul').append(`<li>${errorMsg}</li>`);
-                            });
-                            alert.removeClass('d-none');
-                        } else {
-                            alert.find('ul').append('<li>Error desconocido. Por favor, inténtelo de nuevo más tarde.</li>');
-                            $(window).scrollTop(0);
-                            alert.removeClass('d-none');
-                        }
-                        window.scrollTo({ top: 0, behavior: 'smooth' });
-                    });
-                } catch (e) {
+                const success = await this.#guardarPresupuesto();
+                if (success) {
                     Swal.fire({
-                        icon: 'error',
-                        title: window.languageBundle?.get('presupuesto.add.error.save.title') || 'Error',
-                        text: e?.message || '',
+                        icon: 'success',
+                        title: window.languageBundle?.get('presupuesto.exito.guardado') || 'Guardado',
+                        timer: 1800,
                         buttonsStyling: false,
                         customClass: {
                             confirmButton: 'btn btn-secondary me-2', // clases para el botón confirmar
                             cancelButton: 'btn btn-light' // clases para cancelar
                         },
+                        showConfirmButton: false
+                    });
+
+                }
+            });
+
+            $('.add-cart-btn').on('click', async () => {
+                const success = await this.#guardarPresupuesto();
+                if (success) {
+                    await $.ajax({
+                        url: `/cart/add/${this.opts.presupuestoId}`,
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
                     });
                 }
             });
@@ -322,6 +287,68 @@ export default class PresupuestoWizard {
 
     }
 
+    async #guardarPresupuesto() {
+
+        const alert = $('#form-errors');
+        const servicios = [];
+        const payload = {
+            id: this.opts.presupuestoId,
+            mode: this.opts.mode,
+            presupuesto: this.#getPresupuestoData(),
+            servicios: this.formData.servicios.servicios,
+            datosMaquetacion: this.formData.servicios.datosMaquetacion,
+            datosMarcapaginas: this.formData.servicios.datosMarcapaginas,
+            cliente_id: $('#cliente_id').val() || null,
+        };
+
+        try {
+            alert.addClass('d-none').find('ul').empty();
+            return await $.ajax({
+                url: '/presupuesto/api/save',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(payload)
+            }).then((data) => {
+
+                if (data.id) this.opts.presupuestoId = data.id;
+
+                return true;
+            }).catch((xhr, status, error) => {
+
+                const errors = xhr.responseJSON;
+                if (errors && typeof errors === 'object') {
+                    if (!this.DEBUG && xhr.responseJSON.error && xhr.responseJSON.error == 'Internal Server Error') {
+                        console.error("Error al validar los datos generales. Internal Server Error");
+                        return;
+                    }
+                    Object.values(errors).forEach(errorMsg => {
+                        alert.find('ul').append(`<li>${errorMsg}</li>`);
+                    });
+                    alert.removeClass('d-none');
+                } else {
+                    alert.find('ul').append('<li>Error desconocido. Por favor, inténtelo de nuevo más tarde.</li>');
+                    $(window).scrollTop(0);
+                    alert.removeClass('d-none');
+                }
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                return false;
+
+            });
+        } catch (e) {
+            Swal.fire({
+                icon: 'error',
+                title: window.languageBundle?.get('presupuesto.add.error.save.title') || 'Error',
+                text: e?.message || '',
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: 'btn btn-secondary me-2', // clases para el botón confirmar
+                    cancelButton: 'btn btn-light' // clases para cancelar
+                },
+            });
+            return false;
+        }
+    }
+
     #cacheFormData() {
         if (!this.opts.useSessionCache) return;
         sessionStorage.setItem('formData', JSON.stringify(this.formData));
@@ -1633,7 +1660,6 @@ export default class PresupuestoWizard {
 
             if ($target.prop('checked')) {
                 this.formData.servicios.servicios.push(
-                    $target.val(),
                     {
                         id: $target.attr('id') ?? $(`label[for="${$target.attr('id')}"] .service-title`).text().trim(),
                         label: $(`label[for="${$target.attr('id')}"] .service-title`).text().trim(),
@@ -1675,6 +1701,14 @@ export default class PresupuestoWizard {
             this.divExtras.append(item.render());
         }
 
+        if(!this.formData.servicios.servicios.includes(s => s.id === "ferro-digital")) {
+            this.formData.servicios.servicios.push({
+                id: "ferro-digital",
+                label: "Ferro Digital",
+                units: 1,
+                price: 0
+            });
+        }
         this.#cacheFormData();
         Summary.updateExtras();
     }
@@ -1813,15 +1847,15 @@ export default class PresupuestoWizard {
         }
 
         $('#resumen-base').text(formateaMoneda(data.base_imponible, 2, locale));
-        if(data.iva_importe_4 > 0) {
+        if (data.iva_importe_4 > 0) {
             $('#tr-resumen-iva4').removeClass('d-none');
             $('#resumen-iva4').text(formateaMoneda(data.iva_importe_4, 2, locale));
         }
-        else{
+        else {
             $('#tr-resumen-iva4').addClass('d-none');
             $('#resumen-iva4').text(formateaMoneda(0, 2, locale));
         }
-        if(data.iva_importe_21 > 0) {
+        if (data.iva_importe_21 > 0) {
             $('#tr-resumen-iva21').removeClass('d-none');
             $('#resumen-iva21').text(formateaMoneda(data.iva_importe_21, 2, locale));
         } else {

src/main/resources/templates/imprimelibros/cart/_cartItem.html

@@ -0,0 +1,74 @@
+<!-- _cartItem.html -->
+<div th:fragment="cartItem(item)" class="card product mb-3 shadow-sm">
+    <div class="card-body">
+        <div class="row gy-3">
+
+            <div class="col-sm-auto">
+                <div class="avatar-lg bg-light rounded p-1">
+                    <img th:src="${item.imagen != null ? item.imagen : '/assets/images/products/placeholder.png'}"
+                        alt="portada" class="img-fluid d-block rounded">
+                </div>
+            </div>
+
+            <!-- Detalles -->
+            <div class="col-sm">
+                <!-- Título / enlace -->
+                <h5 class="fs-18 text-truncate mb-1">
+                    <a th:href="@{|presupuesto/edit/${item.presupuestoId}|}" class="text-dark"
+                        th:text="${item.titulo != null ? item.titulo : 'Presupuesto #'}">
+                        Presupuesto
+                    </a>
+                </h5>
+                <h5 class="fs-14 text-truncate mb-1">
+                    <span th:text="#{cart.item.presupuesto-numero}">Presupuesto #</span>
+                    <span th:text="${item.presupuestoId != null ? item.presupuestoId : ''}">#</span>
+                </h5>
+
+                <!-- Detalles opcionales (ej: cliente, fecha, etc.) -->
+                <ul class="list-inline text-muted mb-2">
+                    <div th:each="linea : ${item.lineas}">
+                        <li class="list-inline-item me-3">
+                            <div th:utext="${linea['descripcion']}"></div>
+                        </li>
+                    </div>
+                </ul>
+            </div>
+
+            <!-- Precio o totales (si los tienes) -->
+            <div class="col-sm-auto text-end">
+                <p class="text-muted mb-1">Precio estimado</p>
+                <h5 class="fs-14 mb-0">
+                    <span th:text="${item.price != null ? #numbers.formatDecimal(item.price, 1, 2) : '-'}">0,00</span> €
+                </h5>
+            </div>
+        </div>
+    </div>
+
+    <div class="card-footer bg-light">
+        <div class="row align-items-center gy-3">
+            <div class="col-sm">
+                <div class="d-flex flex-wrap my-n1">
+                    <!-- Botón eliminar -->
+                    <div>
+                        <form th:action="@{|/cart/${item.id}/remove|}" method="post" class="d-inline">
+                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
+                            <button type="submit" class="btn btn-sm btn-link text-body p-1 px-2">
+                                <i class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Eliminar
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-auto text-end">
+                <div class="d-flex align-items-center gap-2 text-muted">
+                    <div>Total:</div>
+                    <h5 class="fs-14 mb-0">
+                        <span
+                            th:text="${item.price != null ? #numbers.formatDecimal(item.price, 1, 2) : '-'}">0,00</span>
+                        €
+                    </h5>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/main/resources/templates/imprimelibros/cart/cart.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+    layout:decorate="~{imprimelibros/layout}">
+
+<head>
+    <th:block layout:fragment="pagetitle" />
+    <th:block th:replace="~{imprimelibros/partials/head-css :: head-css}" />
+    <th:block layout:fragment="pagecss">
+        <link th:href="@{/assets/libs/datatables/dataTables.bootstrap5.min.css}" rel="stylesheet" />
+    </th:block>
+    <th:block layout:fragment="pagecss">
+        <link th:href="@{/assets/css/presupuestador.css}" rel="stylesheet" />
+    </th:block>
+</head>
+
+<body>
+
+    <div th:replace="~{imprimelibros/partials/topbar   :: topbar}" />
+    <div th:replace="~{imprimelibros/partials/sidebar :: sidebar}"
+        sec:authorize="isAuthenticated() and hasAnyRole('SUPERADMIN','ADMIN')">
+
+        <th:block layout:fragment="content">
+            <div th:if="${#authorization.expression('isAuthenticated()')}">
+
+                <div class="container-fluid">
+                    <nav aria-label="breadcrumb">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="/"><i class="ri-home-5-fill"></i></a></li>
+                            <li class="breadcrumb-item active" aria-current="page" th:text="#{cart.title}">Cesta de la
+                                compra</li>
+                        </ol>
+                    </nav>
+                </div>
+
+                <div class="container-fluid">
+                    <div th:if="${items.isEmpty()}">
+                        <div class="alert alert-info" role="alert" th:text="#{cart.empty}"></div>
+                    </div>
+                    <div th:unless="${#lists.isEmpty(items)}">
+
+                        <div th:each="item : ${items}" th:insert="~{imprimelibros/cart/_cartItem :: cartItem(${item})}">
+                        </div>
+                    </div>
+                </div>
+        </th:block>
+
+        <th:block th:replace="~{theme/partials/vendor-scripts :: scripts}" />
+        <th:block layout:fragment="pagejs">
+            <script th:inline="javascript">
+                window.languageBundle = /*[[${languageBundle}]]*/ {};
+            </script>
+        </th:block>
+</body>
+
+</html>

src/main/resources/templates/imprimelibros/partials/topbar.html

@@ -68,7 +68,9 @@
 						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>
+							<a href="/cart">
+								<i class="ri-shopping-cart-2-line fs-22"></i>
+							</a>
 							<span id="cart-item-count"
 								class="position-absolute topbar-badge cartitem-badge fs-10 translate-middle badge rounded-pill bg-info d-none">
 								0

src/main/resources/templates/imprimelibros/presupuestos/presupuestador-items/_buttons.html

@@ -7,6 +7,12 @@
     <span th:text="#{presupuesto.guardar}">Guardar</span>
   </button>
 
+  <button th:if="${appMode == 'add' or appMode == 'edit'}" id="btn-add-cart" type="button"
+          class="btn btn-secondary d-flex align-items-center mx-2 add-cart-btn">
+    <i class="ri-shopping-cart-line me-2"></i>
+    <span th:text="#{presupuesto.add-to-cart}">Añadir al carrito</span>
+  </button>
+
   <button id="btn-imprimir" type="button"
           class="btn btn-secondary d-flex align-items-center mx-2 imprimir-presupuesto">
     <i class="ri-printer-line me-2"></i>

src/main/resources/templates/imprimelibros/presupuestos/presupuesto-list-items/tabla-cliente-user.html

@@ -2,7 +2,7 @@
     <table id="presupuestos-clientes-user-datatable" class="table table-striped table-nowrap responsive w-100">
         <thead>
             <tr>
-                <th scope="col" th:text="#{presupuesto.tabla.id}">ID</th>
+                <th scope="col" th:text="#{presupuesto.tabla.numero}">Número</th>
                 <th scope="col" th:text="#{presupuesto.tabla.titulo}">Título</th>
                 <th scope="col" th:text="#{presupuesto.tabla.encuadernacion}">Encuadernación</th>
                 <th scope="col" th:text="#{presupuesto.tabla.cubierta}">Cubierta</th>