JavaScriptLenguaje PHP

Búsqueda y Filtro de Productos con Ajax, PHP y MySQL

Búsqueda y Filtro de Productos con Ajax, PHP y MySQL. Si estamos, por montar un sistema de comercio electrónico en línea, la búsqueda o filtro de productos es muy importante. Por lo tanto, en este artículo implementaremos un pequeño sistema para filtrar productos de manera inteligente.

Implementar una búsqueda es muy beneficioso para nuestros potenciales clientes que acceden a nuestra web queriendo adquirir algún producto. Es muy imprescindible contar con un sistema de filtro para permitir la búsqueda de productos con diferentes opciones como filtro de rango de precio del producto y filtro de búsqueda etc.

Busqueda y Filtro de Productos con Ajax, PHP y MySQL

Ahora, en este tutorial explicaremos cómo crear un filtro de búsqueda de productos con diferentes elementos de formularios

  • Casillas de verificación 
  • Range input

Usando lenguajes de programación como jQuery, Ajax, PHP y la base de datos MySQL.

Busqueda y filtro de productos con ajax
Busqueda y filtro de productos con ajax

Estructura de ficheros de este sistema de búsqueda

Los archivos que necesitaremos son los siguientes componentes, tales archivos como jQuery, PHP, JavaScript, etc.

Estructura de busqueda y filtro con AJAX
Estructura de busqueda y filtro con AJAX

Paso 01: Crear tablas de base de datos MySQL

En primer lugar vamos a crear la tabla «product_details» que será la tabla principal para almacenar los detalles del producto que serán usadas para filtrar los productos. La base de datos tendrá como nombre «php_producto«.

CREATE TABLE `product_details` (
`id` int(20) NOT NULL,
`name` varchar(120) NOT NULL,
`brand` varchar(100) NOT NULL,
`price` decimal(8,2) NOT NULL,
`ram` char(5) NOT NULL,
`storage` varchar(50) NOT NULL,
`camera` varchar(20) NOT NULL,
`image` varchar(100) NOT NULL,
`quantity` mediumint(5) NOT NULL,
`status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Insertamos registros que serán filtrados usando Ajax y PHP en «product_details» tabla para este ejemplo.

INSERT INTO `product_details` (`id`, `name`, `brand`, `price`, `ram`, `storage`, `camera`, `image`, `quantity`, `status`) VALUES
(1, 'Honor 9 Lite (Sapphire Black, 64 GB)  (4 GB RAM)', 'Honor', '14499.00', '4', '64', '13', '1.png', 10, '1'),
(2, 'Infinix (Sandstone Blue, 32 GB)  (3 GB RAM)', 'Infinix', '8999.00', '3', '32', '13', 'image-2.jpeg', 10, '1'),
(3, 'VIVO V8 Youth (Black, 32 GB)  (4 GB RAM)', 'VIVO', '16990.00', '4', '32', '16', 'image-3.jpeg', 10, '1'),
(4, 'Moto (Gold, 32 GB)  (3 GB RAM)', 'Moto', '11499.00', '3', '32', '8', 'image-4.jpeg', 10, '1'),
(5, 'Lenovo (Venom Black, 32 GB)  (3 GB RAM)', 'Lenevo', '8999.00', '3', '32', '13', 'image-5.jpg', 10, '1'),
(6, 'Samsung Galaxy (Gold, 16 GB)  (3 GB RAM)', 'Samsung', '11990.00', '3', '16', '13', 'image-6.jpeg', 10, '1'),
(7, 'Moto Plus (Pearl White, 16 GB)  (2 GB RAM)', 'Moto', '8799.00', '2', '16', '8', 'image-7.jpeg', 10, '1'),
(8, 'Panasonic (White, 16 GB)  (1 GB RAM)', 'Panasonic', '6999.00', '1', '16', '8', 'image-8.jpeg', 10, '1'),
(9, 'OPPO (Black, 64 GB)  (6 GB RAM)', 'OPPO', '18990.00', '6', '64', '16', 'image-9.jpeg', 10, '1'),
(10, 'Honor 7 (Gold, 32 GB)  (3 GB RAM)', 'Honor', '9999.00', '3', '32', '13', 'image-10.jpeg', 10, '1'),
(11, 'Asus ZenFone (Midnight Blue, 64 GB)  (6 GB RAM)', 'Asus', '27999.00', '6', '128', '12', 'image-12.jpeg', 10, '1'),
(12, 'Redmi 5A (Gold, 32 GB)  (3 GB RAM)', 'MI', '5999.00', '3', '32', '13', 'image-12.jpeg', 10, '1'),
(13, 'Intex (Black, 16 GB)  (2 GB RAM)', 'Intex', '5999.00', '2', '16', '8', 'image-13.jpeg', 10, '1'),
(14, 'Google Pixel (18:9 Display, 64 GB) White', 'Google', '62990.00', '4', '64', '12', 'image-14.jpeg', 10, '1');

Paso 2: Implementar librería Bootstrap y bootstrap Slider

Hoy en día existen librerías que nos ahorran tiempo para desarrollar sistemas y estamos hablando de la librería Bootstrap, así que primero vamos a incluir Bootstrap, jQuery y bootstrap Slider en el archivo «index.php«.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js"></script>
<script src="js/search.js"></script>
<link rel="stylesheet" href="css/style.css">

Paso 3: Mostrar filtro de producto y opciones de búsqueda

El núcleo de las operaciones será el archivo index.php y en ese fichero se mostrarán las opciones de búsqueda de filtros de producto para permitir a los usuarios buscar productos rápidamente. Sin embargo, incluimos la clase «product.php» y luego llamamos a los métodos para mostrar los valores de opciones de filtro de la tabla de base de datos MySQL «product_details«.

A continuación, crearemos Slider de rango de precios con deslizador bootstrap para buscar productos con rango de precios.

<div class="container">
<?php
include 'class/Product.php';
$product = new Product();
?>
<div class="row">
<div class="col-md-3">
<div class="list-group">
<h3>Price</h3>
<div class="list-group-item">
<input id="priceSlider" data-slider-id='ex1Slider' type="text" data-slider-min="1000" data-slider-max="65000" data-slider-step="1" data-slider-value="14"/>
<div class="priceRange">1000 - 65000</div>
<input type="hidden" id="minPrice" value="0" />
<input type="hidden" id="maxPrice" value="65000" />
</div>
</div>
<div class="list-group">
<h3>Brand</h3>
<div class="brandSection">
<?php
$brand = $product->getBrand();
foreach($brand as $brandDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="productDetail brand" value="<?php echo $brandDetails["brand"]; ?>" > <?php echo $brandDetails["brand"]; ?></label>
</div>
<?php } ?>
</div>
</div>
<div class="list-group">
<h3>RAM</h3>
<?php
$ram = $product->getRam();
foreach($ram as $ramDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="productDetail ram" value="<?php echo $ramDetails['ram']; ?>" > <?php echo $ramDetails['ram']; ?> GB</label>
</div>
<?php
}
?>
</div>
<div class="list-group">
<h3>Internal Storage</h3>
<?php
$storage = $product->getStorage();
foreach($storage as $storageDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="productDetail storage" value="<?php echo $storageDetails['storage']; ?>" > <?php echo $storageDetails['storage']; ?> GB</label>
</div>
<?php
}
?>
</div>
</div>
<div class="col-md-9">
<div class="row searchResult">
</div>
</div>
</div>
</div>

Paso 4: Realizar la búsqueda del filtro del producto Ajax request

El fichero llamado «Search.js”, tenemos que definir una función llamado «filterSearch()» para realizar la solicitud AJAX de acuerdo al resultado de búsqueda de visualización de la opción de búsqueda de filtros.

function filterSearch() {
$('.searchResult').html('<div id="loading">Cargando.....</div>');
var action = 'fetch_data';
var minPrice = $('#minPrice').val();
var maxPrice = $('#maxPrice').val();
var brand = getFilterData('brand');
var ram = getFilterData('ram');
var storage = getFilterData('storage');
$.ajax({
url:"action.php",
method:"POST",
dataType: "json",
data:{action:action, minPrice: minPrice, maxPrice:maxPrice, brand:brand, ram:ram, storage:storage},
success:function(data){
$('.searchResult').html(data.html);
}
});
}

Paso 5: Llamar al método de búsqueda de filtro de producto

En el archivo «Action.php«, vamos a incluir la clase «product.php» y el método Call $product-> searchProducts() para obtener el resultado de la búsqueda HTML y pasar como respuesta JSON usando json_encode.

<?php
include 'class/Product.php';
$product = new Product();
if(isset($_POST["action"])){
$html = $product->searchProducts($_POST);
$data = array(
"html" => $html,
);
echo json_encode($data);
}
?>

Paso 6: Obtener datos de búsqueda de filtro de producto

En la clase product.php, definimos el método «searchProducts()» para obtener los datos de búsqueda de filtros de producto de la tabla de base de datos MySQL. Vamos a crear la consulta SELECT con las opciones de búsqueda de filtros y obtener datos. A continuación, cree HTML de resultados con datos de resultados y devuelva como resultado de búsqueda completo HTML.

public function searchProducts(){
$sqlQuery = "SELECT * FROM ".$this->productTable." WHERE status = '1'";
if(isset($_POST["minPrice"], $_POST["maxPrice"]) && !empty($_POST["minPrice"]) && !empty($_POST["maxPrice"])){
$sqlQuery .= "
AND price BETWEEN '".$_POST["minPrice"]."' AND '".$_POST["maxPrice"]."'";
}
if(isset($_POST["brand"])) {
$brandFilterData = implode("','", $_POST["brand"]);
$sqlQuery .= "
AND brand IN('".$brandFilterData."')";
}
if(isset($_POST["ram"])){
$ramFilterData = implode("','", $_POST["ram"]);
$sqlQuery .= "
AND ram IN('".$ramFilterData."')";
}
if(isset($_POST["storage"])) {
$storageFilterData = implode("','", $_POST["storage"]);
$sqlQuery .= "
AND storage IN('".$storageFilterData."')";
}
$sqlQuery .= " ORDER By price";
$result = mysqli_query($this->dbConnect, $sqlQuery);
$totalResult = mysqli_num_rows($result);
$searchResultHTML = '';
if($totalResult > 0) {
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$searchResultHTML .= '
<div class="col-sm-4 col-lg-3 col-md-3">
<div class="product">
<img src="images/'. $row['image'] .'" alt="" class="img-responsive" >
<p align="center"><strong><a href="#">'. $row['name'] .'</a></strong></p>
<h4 style="text-align:center;" class="text-danger" >'. $row['price'] .'</h4>
<p>Camera : '. $row['camera'].' MP<br />
Brand : '. $row['brand'] .' <br />
RAM : '. $row['ram'] .' GB<br />
Storage : '. $row['storage'] .' GB </p>
</div>
</div>';
}
} else {
$searchResultHTML = '<h3>No product found.</h3>';
}
return $searchResultHTML;
}
Búsqueda y Filtro de Productos con Ajax, PHP y MySQL
Búsqueda y Filtro de Productos con Ajax, PHP y MySQL

CONCLUSIÓN DEL SISTEMA

Como lo mencione en líneas arriba la implementación de ayuda para el potencial cliente siempre es bienvenida y más aun si ayuda al usuario final. Por lo tanto, podemos rescatar dos opciones de importancia.

  • Se trata de un buscador que ayuda al usuario a encontrar lo que busca.
  • No consume muchos recursos del servidor, porque no recarga el servidor en las consultas.

Entonces, su uso es muy recomendado y para variar su curva de aprendizaje es muy baja.

Les dejare un archivo comprimido para que puedan descargarlo e implementarlo.

[sociallocker id=5099] Descargar Sistema [/sociallocker]

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

7 comentarios

  1. Hola Nestor,
    Te felicito. Haces excelentes trabajos.
    Tengo una consulta respecto a tu sistema «Búsqueda y Filtro Ajax, PHP y MySQL», quisiera saber como puedo hacer para que después de de filtrar me muestre el detalle del producto filtrado.
    Yo lo intenté en el archivo Product.php debajo de Storage puse la siguiente línea:
    Storage : ‘. $row[‘storage’] .’ GB
    Ver detalle
    Pero no me funciona 🙁 La verdad es que recién estoy aprendiendo PHP y no se si me podrías ayudar, te lo suplico plssss!!

  2. Hola Nestor, he intento buscar por diferentes lugares sin éxito, estoy tratando de implementar algo similar a este post, pero no logro entender e implementarlo, te explico… Tengo un catálogo de servicios el cual tengo mi campo principal de búsqueda, posteriormente a mis resultados «Encontrados» los quiero filtrar por «Abierto ahora» o «Entrega a Domicilio», o bien, ambos… Quisiera saber si puedo contactarte de algún modo para poder obtener una asesoría al respecto, agradezco mucho tu atención y sobre todo los post que has tenido aquí, me han sido muy útiles para entender muchas cosas.

  3. Muy buenas, muy interesante tu aporte, quisiera poder preguntarte. Si no quisiera que manejara rangos de precios si no por el contrario que maneje un option select y desde ahi genere la data para luego ser filtrada

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba