Mediante PHP
se van contabilizando los pasos y añadiendoles en una sesión para evitar regresar al principio en caso de actualizar o refrescar la página, el valor es obtenido por medio de la siguiente variable $step
<?php
session_start();
if ( !empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
El valor de la variable la recibimos en el código javascript
de jQuery.
show_step(<?= $step; ?>);
Que sería igual a: (por el valor default recibido)
show_step(1);
Cada paso del proceso se va mostrando según el valor recibido de PHP
al código Javascript
como ya lo venía mencionando.
Sin la necesidad de tener que añadir controles adicionales como lo siguiente:
current = $(this).parent();
next = $(this).parent().next();
Para luego así saber mediante la animación en que paso del proceso se encuentra el formulario.
El problema se encuentra en la siguiente function
function animacion(caso){
$( ".cartanime" ).animate({ "left": "+=250px" }, "slow" ,function(){
$(".progressbar li").addClass("active");
});
};
Activa todos los li
con la clase actve
al continuar con los pasos del wizard y al seguir con el restos de pasos, o al retroceder para atrás los active
quedan activados.
Y el icono
del carrito que se va deslizando en la barra de progreso, va aumentando el left
al continuar de la misma manera y al retroceder para atrás también va aumentando todo sin control.
Mi código:
$(function() {
show_step(<?= $step; ?>);
});
// funcion animar proceso
function animacion(caso){
$( ".cartanime" ).animate({ "left": "+=250px" }, "slow" ,function(){
$(".progressbar li").addClass("active");
});
};
// funcion para guardar los datos del form y cambiar el paso
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
// realizamos la peticion ajax
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
// si todo va bien
// ocultamos los pasos
$('.step').css( "display", "none" );
// mostramos el paso correspondiente
$('#step'+step).fadeIn("slow");
//movemos la animación al paso correspondiente
animacion(step);
});
};
.container {
width: 100%;
padding-top: 73px;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
}
.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 {
color: green;
}
.progressbar li.active:before {
background-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
.cartanime {
position: absolute;
height: 30px;
background: url(https://media.dermstore.com/images/style/bootstrap3/img/cart-icon.png);
background-repeat: no-repeat;
background-size: cover;
width: 30px;
top: 73px;
left: 450px;
}
<div class="container">
<ul class="progressbar">
<li class="active"><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
<div class="cartanime"></div>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
<h1>Paso 1</h1>
<a data-ref="#" onclick="show_step(2)">continuar</a>
</div>
<div id="step2" class="step">
<h1>Paso 2</h1>
<a data-ref="#" onclick="show_step(1)">Atras</a>
<a data-ref="#" onclick="show_step(3)">continuar</a>
</div>
<div id="step3" class="step">
<h1>Paso 3</h1>
<a data-ref="#" onclick="show_step(2)">Atras</a>
<button>Enviar</button>
</div>
</form>
animación
y por qué no hace uso de su parámetrocaso
?switch
dentro de la funciónfunction animacion(caso)
por eso no estaba dando su uso...switch
? ¿Por qué no...animate({ "left": caso*250+"px" }...
y$(".progressbar li:nth-child("+caso+")")...
?