Skip to content

Commit 1fe436a

Browse files
ksalas039ksalas039
authored
Merge pull request #23 from jap-2024-grupo2/feature-actualización-cart.html
Implementacion de modal en el cart.html
2 parents 1f79b4b + a51b5f4 commit 1fe436a

File tree

2 files changed

+167
-24
lines changed

2 files changed

+167
-24
lines changed

‎cart.html

Lines changed: 150 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -39,42 +39,169 @@
3939
</table>
4040
</div>
4141

42-
<!-- Contenedor para el alert -->
43-
<div id="cart-alert" class="my-4"></div>
44-
45-
<div class="d-flex justify-content-center">
46-
<div class="card w-100 w-md-75 w-lg-50 shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
47-
<div class="card-body p-4">
48-
<div class="row">
49-
<div class="">
50-
<div class="d-flex justify-content-between" style="font-weight: 500;">
51-
<p class="mb-2">USD (Dólares)</p>
52-
<p class="mb-2 usd-total"></p>
42+
<!-- Modal de Selección de Envío -->
43+
<div class="modal fade" id="modalShippingOptions" aria-hidden="true" aria-labelledby="modalShippingLabel"
44+
tabindex="-1">
45+
<div class="modal-dialog modal-dialog-centered modal-lg">
46+
<div class="modal-content">
47+
<div class="modal-header">
48+
<h5 class="modal-title" id="modalShippingLabel">Selecciona el Tipo de Envío</h5>
49+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
50+
</div>
51+
<div class="modal-body">
52+
<!-- Contenedor para Tipo de Envío -->
53+
<div class="d-flex justify-content-center">
54+
<div class="card w-100 w-md-75 w-lg-50 shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
55+
<div class="card-body p-4">
56+
<div class="row">
57+
<div class="mb-3">
58+
<label class="form-label">Elige la forma de entrega</label>
59+
<hr class="my-2">
60+
61+
<div>
62+
<input type="radio" name="shipping-type" value="premium" id="shippingPremium" checked>
63+
<label for="shippingPremium">Premium 2 a 5 días (<span id="premiumCost">UYU
64+
0</span>)</label>
65+
</div>
66+
<div>
67+
<input type="radio" name="shipping-type" value="express" id="shippingExpress">
68+
<label for="shippingExpress">Express 5 a 8 días (<span id="expressCost">UYU
69+
0</span>)</label>
70+
</div>
71+
<div>
72+
<input type="radio" name="shipping-type" value="standard" id="shippingStandard">
73+
<label for="shippingStandard">Standard 12 a 15 días (<span id="standardCost">UYU
74+
0</span>)</label>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
5379
</div>
80+
</div>
5481

55-
<div class="d-flex justify-content-between" style="font-weight: 500;">
56-
<p class="mb-0">UYU (Pesos uruguayos)</p>
57-
<p class="mb-0 uyu-total"></p>
58-
</div>
5982

60-
<hr class="my-4">
6183

62-
<div class="d-flex justify-content-between mb-4" style="font-weight: 500;">
63-
<p class="mb-2">Total (UYU)</p>
64-
<p class="mb-2 grand-total"></p>
84+
<!-- Contenedor para Dirección de Envío -->
85+
<div class="d-flex justify-content-center my-4">
86+
<div class="card w-100 w-md-75 w-lg-50 shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
87+
<div class="card-body p-4">
88+
<div class="row">
89+
<div class="mb-3">
90+
<label class="form-label">Dirección de envío</label>
91+
<hr class="my-2">
92+
93+
<input type="text" class="form-control mb-2" placeholder="Departamento"
94+
id="shippingDepartment">
95+
<input type="text" class="form-control mb-2" placeholder="Localidad" id="shippingCity">
96+
<input type="text" class="form-control mb-2" placeholder="Calle" id="shippingStreet">
97+
<input type="text" class="form-control mb-2" placeholder="Número" id="shippingNumber">
98+
<input type="text" class="form-control mb-2" placeholder="Esquina" id="shippingCorner">
99+
</div>
100+
</div>
101+
</div>
65102
</div>
103+
</div>
104+
</div>
105+
<div class="modal-footer">
106+
<button class="btn btn-primary" data-bs-dismiss="modal"
107+
onclick="openPaymentOptions()">Siguiente</button>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
66112

67-
<div class="text-end">
68-
<button id="pay-button" type="button" class="btn btn-primary btn-lg">
69-
Pagar
70-
</button>
113+
<!-- Modal de Opciones de Pago -->
114+
<div class="modal fade" id="modalPaymentOptions" aria-hidden="true" aria-labelledby="modalPaymentLabel"
115+
tabindex="-1">
116+
<div class="modal-dialog modal-dialog-centered modal-lg">
117+
<div class="modal-content">
118+
<div class="modal-header">
119+
<h5 class="modal-title" id="modalPaymentLabel">Opciones de Pago</h5>
120+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
121+
</div>
122+
<div class="modal-body">
123+
124+
<!-- Contenedor para Forma de Pago -->
125+
<div class="d-flex justify-content-center">
126+
<div class="card w-100 w-md-75 w-lg-50 shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
127+
<div class="card-body p-4">
128+
<div class="row">
129+
<div class="mb-3">
130+
<label class="form-label">Elige cómo pagar</label>
131+
<hr class="my-2">
132+
133+
<div>
134+
<input type="radio" name="payment-method" value="credit-card" id="paymentCreditCard"
135+
checked>
136+
<label for="paymentCreditCard">Tarjeta de crédito</label>
137+
</div>
138+
<div>
139+
<input type="radio" name="payment-method" value="bank-transfer"
140+
id="paymentBankTransfer">
141+
<label for="paymentBankTransfer">Transferencia bancaria</label>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
71146
</div>
72147
</div>
148+
149+
<!-- Contenedor para Resumen de Compras -->
150+
<div id="cart-alert" class="my-4"></div>
151+
152+
<div class="d-flex justify-content-center">
153+
<div class="card w-100 w-md-75 w-lg-50 shadow-2-strong mb-5 mb-lg-0" style="border-radius: 16px;">
154+
<div class="card-body p-4">
155+
<div class="row">
156+
<div class=" ">
157+
158+
<h4 class="text-center">Resumen de compra</h4>
159+
160+
<div class="d-flex justify-content-between" style="font-weight: 500;">
161+
<p class="mb-2">Subtotal Dólares</p>
162+
<p class="mb-2 usd-total"></p>
163+
</div>
164+
165+
<div class="d-flex justify-content-between" style="font-weight: 500;">
166+
<p class="mb-2">Subtotal Pesos uruguayos</p>
167+
<p class="mb-2 uyu-total"></p>
168+
</div>
169+
170+
<div class="d-flex justify-content-between" style="font-weight: 500;">
171+
<p class="mb-0">Costo de envío</p>
172+
<p class="mb-0 shipping-cost"></p>
173+
</div>
174+
175+
<hr class="my-2">
176+
177+
<div class="d-flex justify-content-between mb-4" style="font-weight: 500;">
178+
<p class="mb-2">Total (UYU)</p>
179+
<p class="mb-2 grand-total"></p>
180+
</div>
181+
182+
<div class="text-end">
183+
<button id="pay-button" type="button" class="btn btn-primary btn-lg">
184+
Pagar
185+
</button>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</div>
192+
</div>
193+
<div class="modal-footer">
194+
<button class="btn btn-primary" data-bs-dismiss="modal" onclick="openShippingOptions()">Volver
195+
atrás</button>
73196
</div>
74197
</div>
75198
</div>
76199
</div>
77200

201+
<!-- Botón para abrir el modal inicial -->
202+
<a class="btn btn-primary" data-bs-toggle="modal" href="#modalShippingOptions" role="button">Continuar con
203+
la compra</a>
204+
78205
</div>
79206
</div>
80207
</div>

‎js/cart.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,4 +212,20 @@ document.getElementById('pay-button').addEventListener('click', function () {
212212
document.addEventListener('DOMContentLoaded', () => {
213213
renderCart()
214214
calculateTotals()
215-
})
215+
})
216+
217+
//Funcion para manejar la secuencia de apertura de modales
218+
function openPaymentOptions() {
219+
// Espera a que el modal actual se cierre y luego abre el siguiente
220+
setTimeout(function() {
221+
const paymentModal = new bootstrap.Modal(document.getElementById('modalPaymentOptions'));
222+
paymentModal.show();
223+
}, 500); // Da un pequeño retraso para asegurar que el primer modal se cierre completamente
224+
}
225+
226+
function openShippingOptions() {
227+
setTimeout(function() {
228+
const shippingModal = new bootstrap.Modal(document.getElementById('modalShippingOptions'));
229+
shippingModal.show();
230+
}, 500); // Espera antes de abrir el modal anterior
231+
}

0 commit comments

Comments
 (0)