Tengo el siguiente Wizard desarrollado usando jQueryun simple Wizard
, aquí no se ejecuta correctamenteel funcionamiento es como el uso de un tabs
, pueden observar laque solamente oculta y muestra el demostracióndiv
en mi alojamientoel paso que se encuentra.
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:
<div id="step1" class="step">
</div>
<div id="step2" class="step">
</div>
<div id="step3" class="step">
</div>
El contenido se muestra de acuerdo al paso mediante var step = <?php echo $step ?>;
si en la variable de javascript/jquery
tiene la siguiente información var step = 3;
se va mostrar el contenido del id step3
es decir lo siguiente:
<div id="step3" class="step">
</div>
Para guardar los pasos que se encuentra el usuario actualmente y así evitar el retroceso del avance 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:
La variableEl problema que estoy presentando es al finalizar la compra, donde estoy intentando eliminar las sesiones de los pasos var step$step
guarda elpara reiniciarlos al paso actual en el que quedo el usuario y1, usando la variablefunción var radiounset
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.
if($payment === 'Completed'){
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);
}
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.realizado un var_dump($_SESSION);
y un print_r($GLOBALS);
obteniendo la siguiente información:
session_start();[_SESSION] => Array
unset ($_SESSION['datos_form']);
unset($_SESSION['__step__']); [datos_form] => Array
unset ($_SESSION['formid']);
unset($_SESSION['sPaso']); [__step__] => 3
unset($_SESSION['Pending'] );
unset($_SESSION['radio']);
unset [4b228aaae2a6a7ce403bc4ecbc481de6] => ../libro.pdf
[cart] => Array
($_SESSION['p']
[0] => 11
);
unset
[qty] => Array
($_SESSION['step']
[0] => 1
);
unset($step
[formid] => 64da7c62c643f40684f573acffb144eba6bfaf63
[id_user] => 1
);
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:var_dump
ifarray($payment === 'Completed'6){
//Insertó los datos de transacción a la base de datos
//Utilizo{ la["datos_form"]=> funciónarray(1) unset{ para["__step__"]=> eliminarstring(1) las"3" sesiones
}
Nota: La función unset funciona para mí en Cuando paso al paso 1 se obtiene el caso de vaciar las sesiones del carrito de compra, es decir para pasar la cesta a vacío.siguiente cambio:
[datos_form] => Array
(
[__step__] => 1
)
array(6) { ["datos_form"]=> array(1) { ["__step__"]=> string(1) "1" }
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 elcuando paso queal paso 2 se encuentra.obtiene el siguiente cambio:
<div[datos_form] id="step1"=> class="step">
</div>Array
<div id="step2" class="step"> (
</div> [__step__] => 2
<div id="step3" class="step"> )
</div>array(6) { ["datos_form"]=> array(1) { ["__step__"]=> string(1) "2" }