Hola,
Tengo un pequeño problema con el que tal vez me puedas ayudar. Busqué en Internet durante bastante tiempo, pero no encontré ninguna respuesta.
Tengo una pequeña tienda web que usa Spring y Thymeleaf. Mi tarea ahora es implementar la opción para cambiar la cantidad de un artículo del carrito dentro del carrito. Este valor se almacena en una variable ${item.quantity} .
Entonces, en conclusión, si presiono "arriba" o "abajo" en el campo de entrada, el artículo en el carrito debería cambiar su cantidad y el precio total de todos los artículos del carrito debería evaluarse nuevamente.
Utilicé un <input type="number"> combinado con un evento onchange que ejecutaba una función javascript, pero todos mis intentos salieron mal.
Aquí está el fragmento de código de la plantilla cart.html:
<input type="number" onchange="change(this.value)" min="1" max="5" th:value="${item.quantity}" >Y este es mi código javascript:
<script th:inline="javascript"> /*<![CDATA[*/ function change(data) { var quantity = /*[[${item.quantity}]]*/ data; location.reload(false); } /*]]>*/ </script>pero esto no funciona.
Espero que entiendas lo que quiero decir y que alguien pueda ayudarme, porque realmente no tengo idea de cómo hacer esto.
Debe enviar la cantidad modificada de vuelta al servidor. Como primer paso hazlo sin JavaScript. Use un formulario simple, por ejemplo:
<form action="/change-quantity"> <input type="hidden" name="itemId" th:value="${item.id}"> <input type="number" min="1" max="5" th:value="${item.quantity}"> <input type="submit" value="Update"> </form> Ahora necesita escribir un controlador POST para la ruta /change-quantity que busca el artículo por ID, cambia su cantidad y finalmente lo redirige a la página de donde vino.