3

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.

introducir la descripción de la imagen aquí


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>

3
  • Disculpa, no acabo de entender bien. ¿Cual es el uso de la función animación y por qué no hace uso de su parámetro caso?
    – delCano
    Commented el 13 dic. 2017 a las 22:08
  • @delCano Realmente quería ver si existía otra forma que no sea utilizar un switch dentro de la función function animacion(caso) por eso no estaba dando su uso...
    – Otto
    Commented el 14 dic. 2017 a las 6:30
  • ¿Un switch? ¿Por qué no ...animate({ "left": caso*250+"px" }... y $(".progressbar li:nth-child("+caso+")")...?
    – delCano
    Commented el 14 dic. 2017 a las 9:43

2 respuestas 2

2
+150

Creo que realmente va hacer imposible no usar switch al menos que se utilice algunos otros parámetros / controles / lógica / operaciones, dentro de la función: function animacion(caso){} donde puedas saber cuándo retroceder (atrás) para realizar un -1 y al continuar realizar un +1 no creo que se pueda usar algo así:

-caso +caso

Pero planteó la duda a discusión...

Se debe tomar en cuenta el parámetro (caso) de la misma forma de su anterior animación (historial de edición) sprite usando switch

Ejemplo:

function animacion(caso){
    switch(caso) {
        case 1:
          $( ".cartanime" ).animate({ "left": "450px" }, "slow" ,function(){
            $(".progressbar li:nth-child(1)").addClass("active");
          });
          break;
        case 2:
          $( ".cartanime" ).animate({ "left": "900px" }, "slow" ,function(){
            $(".progressbar li:nth-child(2)").addClass("active");
          });
          break;
        case 3:
          //
          break;
        // -> # code...
    };
};

Ahora solo debe ir cambiando los valores del cartanime en donde desea mostrarlo en cada paso respectivo.

Y si va añadir más pasos, ir cambiando el valor numérico (2) de la siguiente condición CSS li:nth-child(2) ejemplo en el tercer li que tiene en su wizard añadir de la siguiente manera: li:nth-child(3) y así sucesivamente entre más pasos, sí se añaden más en el wizard.

2
  • ¿Por qué un Switch para calcular lo que fundamentalmente son valores "caso" y "caso*450"? ¿No es más fácil insertar los resultados de los cálculos en la cadena y no hacer un switch?
    – delCano
    Commented el 14 dic. 2017 a las 9:41
  • @delCano Es lo que más mejor me ha parecido.... Ahora Usted aún puede dar una respuesta, la pregunta aún está activa la recompensa de la pregunta aún se encuentra visible... Ahora Ud puede aportará con una respuesta explicando lo que menciona... Saludos! Commented el 14 dic. 2017 a las 10:02
1

Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    for(var i = 1; i <= caso; i++) {
       $(`.progressbar li:nth-child(${i})`).addClass("active");  
    }
  });
};

10
  • El ejemplo que has dado funciona, pero solo va activando el paso que está, si ya estoy en el paso 3, solo se activa el tercer li y los otros no...
    – Otto
    Commented el 16 dic. 2017 a las 16:56
  • Oh, había entendido mal. El cambio que acabo de realizar (el añadido del bucle for) debería solucionarlo.
    – delCano
    Commented el 16 dic. 2017 a las 18:04
  • funciona perfecto, solo que no se porque hace un tipo de traba en añadir la clase active al continuar los pasos hace un apagado de unos 4 segundos y aparece la clase activada de la barra... Esto se puede solucionar con los estilos css, o es el código de su respuesta que causa este efecto???
    – Otto
    Commented el 16 dic. 2017 a las 18:42
  • ¿Qué quieres decir con un "apagado de unos 4 segundos"?
    – delCano
    Commented el 16 dic. 2017 a las 18:45
  • Es como si demorara en añadir la clase active es decir demora unos 4 segundos en que añada la barra verde en el paso que se encuentra a eso me refiero...
    – Otto
    Commented el 16 dic. 2017 a las 18:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.