Tengo el siguiente Wizard desarrollado 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 está en que al finalizar la compra, el último paso y el método de pago seleccionado queda guardad, y si el usuario que ya realizó una compra se anima hacerlo nuevamente con otro producto, al acceder al diseño del wizard, este le enviará 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, ¿cómo puedo reiniciar los valores del wizard al finalizar la compra o el último paso?
He intentado eliminar las sesiones de los pasos e incluso globalmente todo.
session_start();
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);
La función unset
la agrego cuando el pago es efectuado correctamente, la mayor parte de los servidores de pago nos retornó el dato: Completed, por lo tanto:
if($payment === 'Completed'){
//Insertó los datos de transacción a la base de datos
//Utilizo la función unset para eliminar las sesiones
}
Nota: La función unset funciona para mí en el caso de vaciar las sesiones del carrito de compra, es decir para pasar la cesta a vacío.
No agrego los archivos PHP del carrito y los métodos de pago porque es demasiado código, código extenso que no vincula con los pasos o funcionamiento del wizard, el wizard funciona independientemente, es como el uso de un tabs, solamente oculta y nuestra el div en el paso que se encuentra.
<div id="step1" class="step">
</div>
<div id="step2" class="step">
</div>
<div id="step3" class="step">
</div>