Tengo el siguiente Wizard desarrollado nativamente usando jQuery aquí no se ejecuta correctamente, pueden observar la [demostración](http://leodan.co/blog/) en mi alojamiento. <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> 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); }); <!-- language: lang-css --> .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; } <!-- language: lang-html --> <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> <!-- end snippet --> 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);