Cómo crear un slide para definir un rango de precio utilizando jQuery, PHP y MySQL

Un slide para definir un rango es la mar de útil a la hora de añadir un filtro en un listado de datos. Dichos slides suelen ser utilizados para filtrar los datos por un rango de precio. Estos slides de precios permiten al usuario filtrar los registros seleccionando un rango, en lugar de introducir el precio manualmente.

En este tutorial, veremos cómo crear un slide para definir un rango de precio utilizando jQuery y añadiendo la función de filtrado a un conjunto de datos mediante PHP y MySQL. El filtro de precio es una característica casi obligatoria en listados de productos, y el slide para definir rangos es lo que necesitas para llevarlo a cabo. Así que, en este artículo veremos cómo crear un slide para definir un rango de precio utilizando jQuery y a filtrar productos mediante un rango de precios utilizando jQuery, Ajax, PHP y MySQL.

Creación de la tabla de la base de datos

Para almacenar la información de los productos, necesitamos crear una tabla en la base de datos. El siguiente script SQL crea la tabla products, con ciertos campos que necesitaremos más adelante:

CREATE TABLE `products` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `price` float(6,2) NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Configuración de la base de datos

Este fichero lo utilizaremos para conectar y seleccionar la base de datos MySQL. Define tu credenciales, es decir, el host ($dbHost), el nombre de usuario ($dbUsername), contraseña ($dbPassword) y el nombre de la base de datos ($dbName).

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName     = "programacionnet";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

Utilizaremos jQuery para crear el slide de rangos e implementar el filtro mediante ajax, por lo que lo primero que hay que hacer es incluir la librería.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Crear el slide para el rango de precios

jRange es un plugin de jQuery muy ligero que te ayudará a convertir un campo input en un slide de rangos. Por lo tanto, debemos incluir el JS de jRange y la librería CSS.

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

Ahora, coloca el siguiente código después del campo input que va a hacer de slide de rangos. Lo que hará es sustituir el input price_range, transformándolo en un slide de rangos.

<script>
$('.price_range').jRange({
    from: 0,
    to: 500,
    step: 50,
    format: '%s USD',
    width: 300,
    showLabels: true,
    isRange : true
});
</script>

jQuery cuenta con varias opciones de configurar el slide de rangos basándose en tus necesidades. Puedes ver todas las opciones en este enlace.

Listado de productos con slide de rango de precios

Inicialmente, todo los productos se extraen de la base de datos y se listan en el fichero index.php. El slide de rango de precios lo mostraremos en la parte superior del listado, haciendo posible que el usuario puede filtrar los registros por precio.

<div class="container">
    <div class="filter-panel">
        <p><input type="hidden" class="price_range" value="0,500" /></p>
        <input type="button" onclick="filterProducts()" value="FILTER" />
    </div>
    <div id="productContainer">
        <?php
        //Include database configuration file
        include('dbConfig.php');
        
        //get product rows
        $query = $db->query("SELECT * FROM products ORDER BY created DESC");
        
        if($query->num_rows > 0){
                while($row = $query->fetch_assoc()){
            ?>
                <div class="list-item">
                    <h2><?php echo $row["name"]; ?></h2>
                    <h4>Price: <?php echo $row["price"]; ?></h4>
                </div>
        <?php }
        }else{
            echo 'Product(s) not found';
        } ?>
    </div>
</div>

Filtrado por rango de precios

Código Javascript

La función filterProducts() envía el rango de precios al fichero getProducts.php mediante Ajax y muestra los datos filtrados debajo el div productContainer.

<script>
function filterProducts() {
    var price_range = $('.price_range').val();
    $.ajax({
        type: 'POST',
        url: 'getProducts.php',
        data:'price_range='+price_range,
        beforeSend: function () {
            $('.container').css("opacity", ".5");
        },
        success: function (html) {
            $('#productContainer').html(html);
            $('.container').css("opacity", "");
        }
    });
}
</script>

La función filterProducts() se ejecutará al hacer clic en el botón FILTER.

Código PHP (getProducts.php)

Al fichero getProducts.php se le llama en la función filterProducts(). En este fichero, los datos de los productos se extraen de la base de datos mediante un rango de precios dado utilizando PHP y MySQL. La información filtrada se renderizará y se devolverá al método success de Ajax.

<?php
if(isset($_POST['price_range'])){
    
    //Include database configuration file
    include('dbConfig.php');
    
    //set conditions for filter by price range
    $whereSQL = $orderSQL = '';
    $priceRange = $_POST['price_range'];
    if(!empty($priceRange)){
        $priceRangeArr = explode(',', $priceRange);
        $whereSQL = "WHERE price BETWEEN '".$priceRangeArr[0]."' AND '".$priceRangeArr[1]."'";
        $orderSQL = " ORDER BY price ASC ";
    }else{
        $orderSQL = " ORDER BY created DESC ";
    }
    
    //get product rows
    $query = $db->query("SELECT * FROM products $whereSQL $orderSQL");
    
    if($query->num_rows > 0){
        while($row = $query->fetch_assoc()){
    ?>
            <div class="list-item">
                <h2><?php echo $row["name"]; ?></h2>
                <h4>Price: <?php echo $row["price"]; ?></h4>
            </div>
    <?php }
    }else{
        echo 'Product(s) not found';
    }
}
?>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP