Buscador de Productos Ajax, PHP & MySQL

Buscador de Productos Ajax, PHP & MySQL. La búsqueda o filtro en los sistemas web y/o páginas web es muy importante y más aún si se trata de productos. Por lo tanto, si deseamos implementar un sistema de ventas (Comercio electrónico).

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.

Ahora, si estás pensando en implementar la opción de filtros de producto en tu proyecto con diferentes opciones acerca de los productos, entonces podemos decir que estás en el lugar correcto.

En este tutorial explicaremos cómo crear un filtro de búsqueda de productos con diferentes elementos de formularios (Casillas de verificación y range input) usando Ajax, PHP y la base de datos MySQL.

Buscador de Productos Ajax, PHP & MySQL

A continuación resolveremos preguntas y detalles del sistema búsqueda con Ajax.

¿Qué elementos de formulario necesito para realizar filtros de productos?

En este artículo usaremos elementos de formulario HTML5 para filtrar productos. Por lo tanto, para la búsqueda de filtros de precio usaremos:

• El deslizador de rango de precios (Range input).
• Casillas de verificación.

Y al lado derecho mostrar el resultado de la búsqueda de filtros ejecutada por el Ajax, PHP y MySQL.

Estructura de ficheros del sistema

Los archivos necesarios para construir el filtro de búsqueda de productos con Ajax, PHP & MySQL son los siguientes.

• Index.php.- Es el fichero principal que cargara las opciones de búsqueda y mostrara los resultados.
• Search.js.- Fichero encargado de realizar la búsqueda, mediante el AJAX que llama a ficheros PHP.
• Action.php.- Es el fichero que realiza consultas a la base de datos de acuerdo a la búsqueda y filtro.
• Product.php.- Muestra los productos de la base de datos.

La base de datos php_productos

Este sistema funciona con una base de datos para almacenar los productos que serán consultadas de acuerdo al filtro. La base de datos tiene de nombre "php_productos" y la tabla tiene nombre de "product_details" para almacenar los detalles del producto que se mostrarán según el filtro de búsqueda.

A continuación, les dejare la tabla que tienen que ejecutar en el PHPMyADMIN.

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;

CONCLUSIÓN

El uso de búsqueda y filtros en sistemas de comercio es muy imprescindible para darle al potencial consumidor todas las ventajas de búsqueda.

Ahora, como vimos en el artículo, podemos ofrecerle un panel donde usando elementos HTML5 pueda filtrar rápidamente por marca, precio y categoría.

Hoy en día existen lenguajes de programación y herramientas que hacen posible tal acción y debemos de apoyarnos de esas herramientas para estar en la vanguardia de la tecnología.