Añadir barra de progreso y actualizar el % por Jquery para usarlo en nuestro modulo de Prestashop

En ocasiones y sobre todo cuando usamos ordenes Jquery y Ajax queremos mostrar el resultado de las ordenes mientras se están ejecutando, una de las mas usadas y recomendadas es usar una barra de progreso, que vaya subiendo mientras vamos ejecutando el código.

Lo primero que debemos hacer es añadir esta barra por medio el del fichero .tpl

Publicidad
<div class="progress">
      <div id ="bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0%">
        
      </div>
    </div>

Podemos usar cualquiera de las classes que usa el Bootstrap

Una vez tenemos el código en el fichero .tpl , vamos al fichero .js y le damos la orden de subir el % correspondiente.

Publicidad

Debemos acordarnos que el % que debe subir es justo el % que se asigna a cada orden que vayamos a ejecutar en ajax.

Por ejemplo, leemos los productos de una tienda:

$id_lang = Configuration::get('PS_LANG_DEFAULT');
$products = Product::getProducts($id_lang, 0, 0, 'id_product', 'ASC', false, true);

Si tenemos 100 productos, debemos calcular el % de cada uno de ellos y asignarlo a una variable en el fichero .js

$productos = $products;
$barra = 0;
$saltobar = 100 / $productos;

Ya tenemos el “saltobar” que sera el % que debe subir cada vez que enviamos la orden con 1 producto.

Debemos acordarnos de poner 0 en el tamaño de la barra, para que por supuesto empiece por 0%

una vez tenemos esto, debemos cambiar en cada orden el tamaño de la barra

complete :function() {
    $barra = $barra + $saltobar;
}

De esta manera ya tenemos el código que hace subir cada X% la barra, sumando al valor de la propia barra.

Ahora toca añadir el código para actualizar la barra que hemos añadido

complete :function() { 
    $barra = $barra + $saltobar;
    $('#bar').attr("style","width:"+$barra+'%');
    $('#bar').text($barra+'%');
}

Y con esto tenemos el código tanto en PHP como jQuery para añadir una barra de progreso a nuestro modulo.

Publicidad
Deja un comentario
You May Also Like