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

<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.

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.