trabajando en envios dentro del presupuesto

This commit is contained in:
2025-10-28 22:28:27 +01:00
parent f770bd07d6
commit c272fd7b9b
8 changed files with 277 additions and 104 deletions

View File

@ -15,6 +15,10 @@ cart.shipping.info=Todos los pedidos incluyen un envío gratuito a la Península
cart.shipping.order=Envío del pedido
cart.shipping.samples=Envío de pruebas
cart.shipping.onlyOneShipping=Todo el pedido se envía a una única dirección.
cart.shipping.tirada=Tirada:
cart.shipping.unidades=unidades
cart.shipping.ud=ud.
cart.shipping.uds=uds.
cart.shipping.errors.noAddressSelected=Debe seleccionar una dirección de envío para el pedido.

View File

@ -1,7 +1,31 @@
import { formateaMoneda } from '../../imprimelibros/utils.js';
import { showLoader, hideLoader } from '../loader.js';
$(() => {
$(document).ajaxStart(showLoader).ajaxStop(hideLoader);
$(document).on('updateCart', () => {
// get form and submit
const form = $('#cartForm');
const container = $("#onlyOneShipping").is(':checked') ? $('#shippingAddressesContainer') : $('.product');
// remove name from container . direccion-card
container.find('.direccion-card input[type="hidden"]').removeAttr('name');
container.find('.direccion-card').each(function (i) {
$(this).find('.direccion-id').attr('name', 'direcciones[' + i + '].id');
$(this).find('.direccion-cp').attr('name', 'direcciones[' + i + '].cp');
$(this).find('.direccion-pais-code3').attr('name', 'direcciones[' + i + '].pais.code3');
// añade aquí más campos si quieres que viajen
});
$.post(form.attr('action'), form.serialize(), (response) => {
// handle response
}).always(() => {
hideLoader();
});
updateTotal();
});
updateTotal();
function updateTotal() {
@ -55,7 +79,7 @@ $(() => {
console.error('Error al eliminar. Status:', res.status);
return;
}
else{
else {
card?.remove();
updateTotal();
}

View File

@ -1,5 +1,10 @@
import { showLoader, hideLoader } from '../loader.js';
$(() => {
// Si usas jQuery AJAX:
$(document).ajaxStart(showLoader).ajaxStop(hideLoader);
$("#onlyOneShipping").on('change', function () {
if ($(this).is(':checked')) {
$('.nav-product').hide();
@ -8,21 +13,29 @@ $(() => {
if (detailsBtn) new bootstrap.Tab(detailsBtn).show();
});
$('#shippingAddressesContainer').empty().show();
$('.div-shipping-product').show();
$('.div-shipping-product').toArray().forEach(element => {
$(element).empty().hide();
});
$('#addOrderAddress').show();
} else {
$('.nav-product').show();
$('#shippingAddressesContainer').hide();
$('.div-shipping-product').empty().hide();
$('#shippingAddressesContainer').empty().hide();
$('.div-shipping-product').toArray().forEach(element => {
$(element).empty().show();
});
$('.div-shipping-product').empty().show();
$('#addOrderAddress').hide();
}
});
$('#shippingAddressesContainer').on('click', '.btn-delete-direccion', function (e) {
$(document).on('click', '.btn-delete-direccion', function (e) {
e.preventDefault();
const $card = $(this).closest('.direccion-card');
const $div = $card.parent();
$card.remove();
$('#addOrderAddress').show();
if($div.hasClass('shipping-order-address')){
$('#addOrderAddress').show();
}
});
const language = document.documentElement.lang || 'es-ES';
@ -41,17 +54,24 @@ $(() => {
}
});
$('#addOrderAddress').on('click', () => {
$('#addOrderAddress').on('click', async () => {
if ($('#onlyOneShipping').is(':checked')) {
if(seleccionarDireccionEnvio()){
if(await seleccionarDireccionEnvio()){
$('#addOrderAddress').hide();
}
} else {
// Add address to multiple shipping addresses container
}
});
async function seleccionarDireccionEnvio() {
$(document).on('click', '.btn-add-shipping', function () {
const presupuestoId = $(this).closest('.product').find('.item-presupuesto-id').val();
const container = $(this).closest('.product').find('.shipping-addresses-item');
const tirada = $(this).closest('.product').find('.item-tirada').val();
const totalTirada = container.find('.item-tirada').toArray().reduce((acc, el) => acc + parseInt($(el).val() || 0), 0);
const remainingTirada = parseInt(tirada) - parseInt(totalTirada);
seleccionarDireccionEnvio(presupuestoId, remainingTirada, container);
});
async function seleccionarDireccionEnvio(presupuestoId = null, tirada = null, container = null) {
const { value: direccionId, isDenied } = await Swal.fire({
title: window.languageBundle['cart.shipping.add.title'] || 'Seleccione una dirección',
@ -161,16 +181,60 @@ $(() => {
});
}
let unidades = null;
if(tirada !== null && tirada >= 1 && direccionId){
// Swal preguntando numero de unidades a asignar con máximo de tirada, necesito guardar el valor
const { value: unidadesValue } = await Swal.fire({
title: window.languageBundle['cart.shipping.enter-units'] || 'Introduzca el número de unidades para esta dirección',
input: 'number',
inputLabel: window.languageBundle['cart.shipping.units-label']?.replace('{max}', tirada) || `Número de unidades (máximo ${tirada})`,
inputAttributes: {
min: 1,
max: tirada,
step: 1,
value: tirada
},
inputValue: 1,
showCancelButton: true,
confirmButtonText: window.languageBundle['app.ok'] || 'Aceptar',
cancelButtonText: window.languageBundle['app.cancel'] || 'Cancelar',
inputValidator: (value) => {
if (!value || isNaN(value) || value < 1 || value > tirada) {
return window.languageBundle['cart.shipping.units-error']?.replace('{max}', tirada) || `Por favor, introduzca un número válido entre 1 y ${tirada}.`;
}
return null;
}
});
if (unidadesValue) {
unidades = parseInt(unidadesValue);
} else {
// Si el usuario cancela, salir de la función
return false;
}
}
if (direccionId) {
// Obtén el objeto completo seleccionado
const response = await fetch(`/cart/get-address/${direccionId}`);
showLoader();
let uri = `/cart/get-address/${direccionId}`;
if (presupuestoId !== null && unidades !== null) {
uri += `?presupuestoId=${presupuestoId}&unidades=${unidades}`;
}
const response = await fetch(uri);
if (response.ok) {
const html = await response.text();
$('#shippingAddressesContainer').append(html);
if(presupuestoId !== null){
container.append(html);
}
else{
$('#shippingAddressesContainer').append(html);
}
$(document).trigger('updateCart');
return true;
}
hideLoader();
return false;
}
hideLoader();
return false;
}

View File

@ -0,0 +1,11 @@
export function showLoader() {
const el = document.getElementById('sectionLoader');
el.classList.remove('d-none');
el.classList.add('d-flex');
}
export function hideLoader() {
const el = document.getElementById('sectionLoader');
el.classList.remove('d-flex');
el.classList.add('d-none');
}

View File

@ -3,96 +3,102 @@
data-iva-21=${item.iva21},
data-base=${item.base}">
<div class="card-body">
<input type="hidden" class="item-presupuesto-id" th:value="${item.cartItemId}" />
<input type="hidden" class="item-tirada" th:value="${item.tirada}" />
<div class="step-arrow-nav mt-n3 mx-n3 mb-3">
<ul class="nav nav-pills nav-justified custom-nav nav-product" style="display: none;" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fs-15 active" th:id="${'pills-details-' + item.cartItemId + '-tab'}"
th:data-bs-target="${'#pills-details-' + item.cartItemId}" type="button" role="tab"
th:aria-controls="${'#pills-details-' + item.cartItemId}" aria-selected="true" data-bs-toggle="tab">
<i class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
<label class="fs-13 my-2" th:text="#{cart.tabs.details}">Detalles</label>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-15" th:id="${'pills-shipping-' + item.cartItemId + '-tab'}"
th:data-bs-target="${'#pills-shipping-' + item.cartItemId}" type="button" role="tab"
th:aria-controls="${'#pills-shipping-' + item.cartItemId}" aria-selected="false" data-bs-toggle="tab">
<i class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
<label class="fs-13 my-2" th:text="#{cart.tabs.envio}">Envío</label>
</button>
</li>
</ul>
<ul class="nav nav-pills nav-justified custom-nav nav-product" style="display: none;" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fs-15 active" th:id="${'pills-details-' + item.cartItemId + '-tab'}"
th:data-bs-target="${'#pills-details-' + item.cartItemId}" type="button" role="tab"
th:aria-controls="${'#pills-details-' + item.cartItemId}" aria-selected="true"
data-bs-toggle="tab">
<i
class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
<label class="fs-13 my-2" th:text="#{cart.tabs.details}">Detalles</label>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fs-15" th:id="${'pills-shipping-' + item.cartItemId + '-tab'}"
th:data-bs-target="${'#pills-shipping-' + item.cartItemId}" type="button" role="tab"
th:aria-controls="${'#pills-shipping-' + item.cartItemId}" aria-selected="false"
data-bs-toggle="tab">
<i
class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
<label class="fs-13 my-2" th:text="#{cart.tabs.envio}">Envío</label>
</button>
</li>
</ul>
</div>
<div class="tab-content row gy-3">
<div class="tab-pane fade show tab-pane-details active" th:id="${'pills-details-' + item.cartItemId}" role="tabpanel"
th:aria-labelledby="${'pills-details-' + item.cartItemId + '-tab'}">
<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>
<div class="tab-content">
<div class="tab-pane fade show active tab-pane-details" th:id="${'pills-details-' + item.cartItemId}"
role="tabpanel" th:aria-labelledby="${'pills-details-' + item.cartItemId + '-tab'}">
<!-- 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-1">
<div th:each="linea : ${item.resumen.lineas}">
<li class="list-inline-item me-3">
<div th:utext="${linea['descripcion']}"></div>
</li>
<div class="row g-3 align-items-start">
<!-- Col 1: imagen -->
<div class="col-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>
</ul>
</div>
<ul class="list-inline text-muted mb-1" th:if="${item.resumen.servicios != null}">
<span th:utext="#{pdf.servicios-adicionales}">Servicios adicionales</span>
<span class="spec-label" th:text="${item.resumen.servicios}"></span>
</ul>
<!-- Col 2: detalles -->
<div class="col">
<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>
<ul class="list-inline text-muted mb-1" th:if="${item.resumen != null
and #maps.containsKey(item.resumen, 'datosMaquetacion')
and item.resumen['datosMaquetacion'] != null}">
<li class="list-inline-item spec-row mb-1">
<span th:text="#{pdf.datos-maquetacion}">Datos de maquetación:</span>
<span th:utext="${item.resumen.datosMaquetacion}"></span>
</li>
</ul>
<ul class="list-unstyled text-muted mb-1 ps-0">
<li th:each="linea : ${item.resumen.lineas}" class="mb-1">
<span th:utext="${linea['descripcion']}"></span>
</li>
</ul>
<ul class="list-inline text-muted mb-1" th:if="${item.resumen != null
and #maps.containsKey(item.resumen, 'datosMarcapaginas')
and item.resumen['datosMarcapaginas'] != null}">
<li class="list-inline-item spec-row mb-1">
<span th:text="#{pdf.datos-marcapaginas}">Datos de marcapáginas:</span>
<span th:utext="${item.resumen.datosMarcapaginas}"></span>
</li>
</ul>
<ul class="list-unstyled text-muted mb-1" th:if="${item.resumen.servicios != null}">
<li>
<span th:utext="#{pdf.servicios-adicionales}">Servicios adicionales:</span>
<span class="spec-label" th:text="${item.resumen.servicios}"></span>
</li>
</ul>
</div>
<ul class="list-unstyled text-muted mb-1"
th:if="${item.resumen != null and #maps.containsKey(item.resumen,'datosMaquetacion') and item.resumen['datosMaquetacion'] != null}">
<li class="spec-row mb-1">
<span th:text="#{pdf.datos-maquetacion}">Datos de maquetación:</span>
<span th:utext="${item.resumen.datosMaquetacion}"></span>
</li>
</ul>
<!-- Precio o totales (si los tienes) -->
<div class="col-sm-auto text-end">
<p class="text-muted mb-1" th:text="#{cart.precio}">Precio</p>
<h5 class="fs-14 mb-0">
<span th:text="${item.baseTotal != null ? item.baseTotal : '-'}">0,00</span>
</h5>
<ul class="list-unstyled text-muted mb-1"
th:if="${item.resumen != null and #maps.containsKey(item.resumen,'datosMarcapaginas') and item.resumen['datosMarcapaginas'] != null}">
<li class="spec-row mb-1">
<span th:text="#{pdf.datos-marcapaginas}">Datos de marcapáginas:</span>
<span th:utext="${item.resumen.datosMarcapaginas}"></span>
</li>
</ul>
</div>
<!-- Col 3: precio -->
<div class="col-auto ms-auto text-end">
<p class="text-muted mb-1" th:text="#{cart.precio}">Precio</p>
<h5 class="fs-14 mb-0">
<span th:text="${item.baseTotal != null ? item.baseTotal : '-'}">0,00</span>
</h5>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade show tab-pane-shipping" th:id="${'pills-shipping-' + item.cartItemId}" role="tabpanel"
th:aria-labelledby="${'pills-shipping-' + item.cartItemId + '-tab'}">
<div class="tab-pane fade show tab-pane-shipping" th:id="${'pills-shipping-' + item.cartItemId}"
role="tabpanel" th:aria-labelledby="${'pills-shipping-' + item.cartItemId + '-tab'}">
<div class="col-sm">
<!-- Título / enlace -->
@ -106,6 +112,40 @@
<span th:text="#{cart.item.presupuesto-numero}">Presupuesto #</span>
<span th:text="${item.presupuestoId != null ? item.presupuestoId : ''}">#</span>
</h5>
<h5 class="fs-14 text-truncate mb-1">
<span
th:text="#{cart.shipping.tirada} + ' ' + (${item.tirada} != null ? ${item.tirada} : '') + ' ' + #{cart.shipping.unidades} ">
</span>
</h5>
<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
<div class="card-body">
<div class="ribbon ribbon-primary ribbon-shape" th:text="#{checkout.shipping.order}">Envio
del pedido
</div>
</div>
<div class="ribbon-content mt-4">
<div class="px-2 mb-2">
<button type="button" class="btn btn-secondary btn-add-shipping"
th:text="#{cart.shipping.add}">Añadir dirección</button>
<div class="shipping-addresses-item d-flex flex-wrap gap-3 mt-4"></div>
</div>
</div>
</div>
<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4"
th:if="${item.hasSample}">
<div class="card-body">
<div class="ribbon ribbon-primary ribbon-shape" th:text="#{cart.shipping.samples}">Envio
de pruebas
</div>
</div>
<div class="ribbon-content mt-4">
</div>
</div>
</div>
<div class="col-sm-auto div-shipping-product">
</div>

View File

@ -37,6 +37,14 @@
</div>
<div class="container-fluid row gy-4">
<div id="sectionLoader" class="position-absolute top-0 start-0 w-100 h-100 d-none justify-content-center align-items-center
bg-body bg-opacity-75" style="z-index:10;">
<div class="spinner-border" role="status" style="width:2.5rem;height:2.5rem;">
<span class="visually-hidden">Cargando…</span>
</div>
</div>
<div th:if="${items.isEmpty()}">
<div class="alert alert-info" role="alert" th:text="#{cart.empty}"></div>
</div>
@ -59,7 +67,7 @@
<button type="button" class="btn btn-secondary" id="addOrderAddress"
th:text="#{cart.shipping.add}">Añadir dirección</button>
<div id="shippingAddressesContainer" class="d-flex flex-wrap gap-3 mt-4"></div>
<div id="shippingAddressesContainer" class="shipping-order-address d-flex flex-wrap gap-3 mt-4"></div>
</div>
</div>

View File

@ -1,19 +1,35 @@
<div th:fragment="direccionCard(direccion)" class="card card border mb-3 direccion-card bg-light w-100 mx-2" th:attr="data-id=${direccion.id},
data-cp=${direccion.cp},
data-pais-code3=${direccion.pais.code3}" >
<div th:fragment="direccionCard(direccion)" name="direccion"
class="card card border mb-3 direccion-card bg-light w-100 mx-2">
<div class="card-body">
<div class="p-2 mx-3">
<span class="mb-2 fw-semibold d-block text-muted text-uppercase" th:text="${direccion.alias}"></span>
<span class="fs-14 mb-1 d-block" th:text="${direccion.att}"></span>
<span class="text-muted fw-normal text-wrap mb-1 d-block" th:text="${direccion.direccion}"></span>
<span class="text-muted fw-normal d-block" th:text="${pais}"></span>
<span class="text-muted fw-normal d-block"
th:text="#{'direcciones.telefono'} + ': ' + ${direccion.telefono}"></span>
<input type="hidden" class="presupuesto-id" th:value="${presupuestoId}" />
<input type="hidden" class="direccion-id" th:value="${direccion.id}" />
<input type="hidden" class="direccion-cp" th:value="${direccion.cp}" />
<input type="hidden" class="direccion-pais-code3" th:value="${direccion.pais.code3}" />
<input type="hidden" class="item-tirada" th:value="${unidades != null ? unidades : ''}" />
<div class="row g-3 align-items-start">
<div class="col">
<span class="mb-2 fw-semibold d-block text-muted text-uppercase" th:text="${direccion.alias}"></span>
<span class="fs-14 mb-1 d-block" th:text="${direccion.att}"></span>
<span class="text-muted fw-normal text-wrap mb-1 d-block" th:text="${direccion.direccion}"></span>
<span class="text-muted fw-normal d-block" th:text="${pais}"></span>
<span class="text-muted fw-normal d-block"
th:text="#{'direcciones.telefono'} + ': ' + ${direccion.telefono}"></span>
</div>
<div th:if="${unidades != null}" class="col-auto ms-auto text-end">
<span class="mb-2 fw-semibold d-block text-muted text-uppercase" th:if="${unidades == 1}"
th:text="|${unidades} #{cart.shipping.ud}|"></span>
<!-- plural -->
<span class="mb-2 fw-semibold d-block text-muted text-uppercase" th:unless="${unidades == 1}"
th:text="|${unidades} #{cart.shipping.uds}|"></span>
</div>
</div>
<div
class="d-flex flex-wrap align-items-center gap-2 px-2 py-1 bg-light rounded-bottom border-top mt-auto actions-row">
<a href="#" class="d-block text-body p-1 px-2 btn-delete-direccion" data-id="${this._esc(d.id ?? '')}">
<a href="javascript:void(0)" class="d-block text-body p-1 px-2 btn-delete-direccion"
data-id="${this._esc(d.id ?? '')}">
<i class="ri-delete-bin-fill text-muted align-bottom me-1"></i>
<span th:text="#{'direcciones.btn.delete'}">Eliminar</span>
</a>