Tengo el siguiente Wizard desarrollado nativamente usando jQuery aquí no se ejecuta correctamente, pueden observar la demostración en mi alojamiento.
var step = 1;
var radio = 1;
function animacion(caso){
if (!caso) {
$(".progressbar").attr("data-active", "");
} else {
$(".progressbar").attr("data-active", caso);
}
var items = $(".progressbar li");
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!caso) {
$(item).removeClass("active");
} else if (i < caso) {
$(item).addClass("active");
} else {
$(item).removeClass("active");
}
}
};
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(resp){
step = parseInt(step);
if (step === 3) {
var radio = parseInt(resp.radio);
switch(radio) {
case 1:
urlform = 'php/pay1.php'
break;
case 2:
urlform = 'php/pay2.php'
break;
case 3:
urlform = 'php/pay3.php'
break;
default:
urlform = 'php/pay1.php'
break;
}
$('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
if(statusTxt === "success") {
$('.step').css( "display", "none" );
$('#step'+ step).fadeIn("slow");
animacion(step);
}
if(statusTxt === "error") {
//
}
});
} else {
$('.step').css( "display", "none" );
$('#step'+ step).fadeIn("slow");
animacion(step);
}
});
};
$(function() {
show_step(step);
});
.wrp-wizard {
width: 100%;
padding-top: 175px;
}
.progressbar {
position: relative;
padding: 0;
margin: 0;
}
.progressbar li {
list-style-type: none;
float: left;
/*width: 33.33%;*/
width: 19.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
border: 1px dotted rgba(0, 0, 0, 0.18823529411764706);
position: relative;
padding: 5px 10px 5px 10px;
display: inline-block;
font-size: .9rem;
color: rgba(44, 63, 76, 0.6196078431372549);
top: -70px;
background-color: rgba(237, 239, 240, 0.61);
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active span {
color: green;
background-color: rgba(0, 128, 0, 0.1);
}
.progressbar li.active:before {
background-color: green;
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
/*.progressbar li.active + li:after {
background-color: green;
width: 50%;
}*/
.progressbar li.active + li:after {
background: linear-gradient(to right, green 0%,green 50%,#edeff0 50%,#edeff0 100%)
}
.progressbar:after {
content: "";
height: 4px;
left: 16.666%;
background: green;
top: 4px;
position: absolute;
-webkit-transition: width 300ms ease;
transition: width 300ms ease;
}
.progressbar[data-active="1"]:after {
width: 0;
}
.progressbar[data-active="2"]:after {
width: 20%; /*33%*/
}
.progressbar[data-active="3"]:after {
width: 40%;
}
.progressbar[data-active="4"]:after {
width: 51%;
}
.progressbar:before {
content: url(assets/img/website/system/cart-icon.png);
margin-top: -20px;
margin-left: -88px; /*-11*/
left: 16.666%;
top: 4px;
position: absolute;
-webkit-transition: left 300ms ease;
transition: left 300ms ease;
}
.progressbar:not([data-active=""]):before {
opacity: 1;
-webkit-transition: left 2900ms ease, opacity 300ms ease;
transition: left 2900ms ease, opacity 300ms ease;
}
.progressbar[data-active="1"]:before {
left: 22.666%;
}
.progressbar[data-active="2"]:before {
left: 40%; /*left: 50%;*/
}
.progressbar[data-active="3"]:before {
left: 60.333%;
}
.progressbar[data-active="4"]:before {
left: 73.333%;
}
.progressbar[data-active=""]:before {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="basket">
<div class="normal-screen">
<div class="container">
<div class="wrp-wizard">
<ul class="progressbar" data-active="">
<li class="active"><span>CARRO DE LA COMPRA</span></li>
<li><span>REVISIÓN & METODO DE PAGO</span></li>
<li><span>PROCESAR PAGO</span></li>
</ul>
<div class="cartanime"></div>
</div>
</div>
<div class="container">
<div id="step1" class="step">
<h1>Carrito</h1>
<a class="basket-checkout back111" data-ref="#" onclick="show_step(2)">Continuar</a>
</div>
<div id="step2" class="step">
<div class="content-payment">
<div class="slect-pay">
<h2>Método de pago</h2>
<div class="group-radio">
<input name="radio" type="radio" id="1" value="1" checked="checked" >
<label for="1" title="Transferencia Bancaria">Transferencia Bancaria</label>
<input name="radio" type="radio" id="2" value="2" >
<label for="2" title="PayPal">PayPal</label>
<input name="radio" type="radio" id="3" value="3" >
<label for="3" title="Tarjeta de credito">Tarjeta de credito</label>
</div>
</div>
</div>
<a class="basket-checkout back111" data-ref="#" onclick="show_step(1)">Atras</a>
<a data-ref="#" onclick="show_step(3); $('[name=formTpv]').submit();"> Procesar Pago</a>
</div>
<div id="step3" class="step">
<div class="info-pay">
<h2>Procesar pago</h2>
<a data-ref="#" onclick="show_step(1)">Editar metodo de pago</a>
<div class="themes-payment">
<div id="divPago"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Estoy usando sesiones de PHP, para mostrarle al usuario el paso donde quedo y no comenzar desde el inicio, para ello tengo tres archivos php:
saveTemp.php
<?php
session_start();
$step = isset($_GET['step']) ? $_GET['step'] : 1;
$_SESSION['datos_form'] = $_POST;
include 'php/libs/validate.php';
header('Content-Type: application/json');
$json = array(
'radio' => $radio,
'step' => $step
);
echo json_encode($json);
?>
wizard.php
<?php
//session_start();
if (isset($_GET['p'])) {
session_destroy();
session_start();
}
include 'validate.php';
$r =array(
1 => 'Transferencia Bancaria',
2 => 'PayPal',
3 => 'Tarjeta de credito',
);
?>
validate.php
<?php
$datosForm = (isset($_SESSION['datos_form']) && is_array($_SESSION['datos_form'])) ? $_SESSION['datos_form'] :array();
$sPaso = isset($datosForm['__step__']) ? $datosForm['__step__'] : 1;
$step = isset($step) ? $step : $sPaso;
$radio = isset($datosForm['radio']) ? $datosForm['radio'] : 1;
$_SESSION['datos_form']['__step__'] = $step;
?>
Ya los pasos guardados los recupero de la siguiente forma:
<script type="text/javascript">
var step = <?php echo $step ?>;
var radio = <?php echo $radio ?>;
</script>
La variable var step
guarda el paso actual en el que quedo el usuario y, la variable var radio
guarda el método de pago seleccionado.
El problema esta en que al finalizar la compra el ultimo paso y el método de pago seleccionado queda guardado y, si el usuario que ya realizo una compra se anima hacerlo nuevamente con otro producto y al acceder al diseño del wizard este le enviara al último paso de procesar el pago sin permitirle al usuario agregar un cupón de descuento o utilizar otro método de pago para hacerlo debe regresar para atrás.
Entonces como puedo reiniciar los valores del wizard al inicio al finalizar la compra o el ultimo paso.
Otro defecto que puede ser confuso es tener que darle a saber a los enlaces manualmente el paso que debe seguir, usando onclick="show_step(1)
sería más fácil usar un id Next
y Back
para que sea más sencillo.
He intentado eliminar las sesiones de los pasos e incluso globalmente todo.
unset($_SESSION['datos_form']);
unset($_SESSION['__step__']);
unset($_SESSION['formid']);
unset($_SESSION['sPaso']);
unset($_SESSION['Pending']);
unset($_SESSION['radio']);
unset($_SESSION['p']);
unset($_SESSION['step']);
unset($step);
unset($radio);