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

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

Por / JavaScript, Lenguaje PHP / 6 minutos de lectura

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.

Tabla de contenidos

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]

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Publicaciones relacionadas:
  1. Generar un PDF con una tabla PHP y MySQL
  2. Cómo renderizar el gráfico usando Google Charts
  3. Sistema de chat en vivo con Ajax, PHP y MySQL
  4. Programación orientada a objetos OOP
  5. PHP isset() Comprobar variable si está definida
  6. PHP función validar documento identidad
  7. Mostrar datos MYSQL con while array_push
  8. Constantes en PHP: Definición con Ejemplos
  9. PHP PDO Conexión MySQL Class: Mostrar Ejecutar consultas
  10. Conexión PHP Mysql: Mysqli vs PDO
  11. Iniciar sesión con facebook usando PHP: Descargar
  12. Drag Drop arrastrar y ordenar listas PHP jQuery
  13. Unir dos tablas y buscar con PHP & MySQL
  14. 3 formas para mostrar y ocultar contraseñas input password
  15. Conexión remota MySQL usando PHP: Ejemplo Completo
  16. Crear URL única con PHP: Ejemplo completo
  17. Exportar archivos CSV PHP usando fputcsv()
  18. Geolocalización por IP en PHP y país: Completo
  19. Solución Warning: Undefined array key PHP
  20. Sistema de gestión de inventario gratuito y de código abierto
Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad