Advertisement
  1. Web Design
  2. WooCommerce

Cómo crear un widget de búsqueda de productos en tiempo real con tecnología AJAX para WooCommerce

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

AJAX (Javascript asíncrono y XML) es una forma de conseguir que una página web se comunique con un servidor, actualizando su contenido sin volver a cargar la página. En WooCommerce AJAX nos permite añadir productos directamente al carrito de la compra, personalizar productos sobre la marcha, filtrar listas de productos y mucho más.

En este tutorial vamos a construir un plugin de "búsqueda en tiempo real" de producto, con un filtro de categoría de producto y entrada de palabras clave. Todo, por supuesto, impulsado por AJAX.

Nuestro plugin nos proporcionará un widget personalizado que después se podrá colocar en cualquier lugar de la tienda WooCommerce. Se verá así (la estética cambiará dependiendo del tema de WordPress que estés usando):

ajax product searchajax product searchajax product search

1. Crea la carpeta para el plugin

Empieza creando una carpeta llamada "product-search" y el archivo php principal "product-search.php" dentro de ella. Abre el archivo y añade el siguiente comentario de encabezado, cambiando los detalles pertinentes por los tuyos:

Aquí describimos qué es nuestro plugin y lo que hace. No voy a cubrir aquí en detalle el desarrollo de plugins pues esto va más allá del alcance de este tutorial, pero si eres nuevo en el desarrollo de plugins, te recomiendo encarecidamente que eches un vistazo a este curso para principiantes:

2. Planifica el desarrollo de nuestro plugin

Así que aquí está nuestro plan: tendremos un campo de entrada de búsqueda con un elemento de selección para definir la categoría del producto. Todo esto se empaquetará dentro de un widget. Los usuarios podrán buscar una palabra clave dentro de una categoría concreta de producto.

Cada vez que el usuario escriba una palabra clave de producto o un SKU de producto, realizaremos una solicitud AJAX para consultar los productos que coincidan con la categoría (si está definida) y contengan la palabra clave especificada en su título, su contenido o coincidan con el SKU especificado. Al usuario se le presentará una lista de resultados de búsqueda.

Nuestro siguiente paso consiste en poner en cola el estilo del plugin y los archivos de script.

3. Poner en cola archivos de plugin

Añade el siguiente código después de la introducción del plugin:

Asegúrate de crear las carpetas correspondientes para los estilos y los scripts (carpetas css y js) y los archivos correspondientes (style.css y main.js).

Para el archivo main.js tendremos que pasar algunos parámetros con la función wp_localize_script. Estos parámetros nos dan la url de AJAX y el "texto sin resultados" por lo que no tenemos que codificarlos en nuestro script.

4. Obtener la taxonomía de la categoría de producto con jerarquía

A continuación, tendremos que recopilar y almacenar en caché todas las categorías de productos con jerarquía. Esto se utilizará para las opciones de selección de categoría.

Esta tarea consta de 4 pasos:

  1. Obtener la taxonomía de la categoría de producto con jerarquía
  2. Enumerar la taxonomía de la categoría de producto con jerarquía como opciones de selección
  3. Almacenar en caché los resultados de la taxonomía de la categoría de producto
  4. Eliminar categorías de productos transitorias (caché) en la edición de términos y las entradas almacenadas

Obtener la taxonomía

Aquí he creado una función recursiva que recopila los términos de taxonomía dados con la relación padre-hijo:

Listar categorías de productos como opciones de selección

A continuación, tenemos que enumerar los términos recopilados con otra función recursiva. Crea la estructura HTML basada en option y optgroup:

Almacenar en caché los resultados de la categoría de producto

Los resultados consultados deben almacenarse en caché para no ralentizar el proceso de renderizado del filtro. Así que aquí tenemos que crear un transitorio para las categorías de productos. No describiré en detalle la API de transitorios, pero si eres nuevo en este tema, te recomiendo encarecidamente que leas estos increíbles tutoriales introductorios:

Por ahora, aquí está la categoría de producto transitoria:

Eliminar las categorías de productos transitorias (caché) en la edición de términos y entradas almacenadas

Por último, necesitamos eliminar el transitorio cada vez que un usuario actualiza o crea una categoría de producto, o actualiza/crea el producto en sí.

Añadiremos acciones para create_term, edit_term, delete_term y save_post

5. Crear el widget

Ahora es el momento de crear el widget en sí. No describiré en detalle el proceso de creación de widgets, pero si necesitas ponerte al día, recomiendo este tutorial:

Por ahora, añade el siguiente código para crear el widget:

Nuestro widget no tiene opciones, pero te permite introducir un título. Es un formulario simple con un campo de búsqueda y un selector de categoría. Y para la selección de la categoría utilizamos la función que creamos anteriormente:

get_product_categories_hierarchy y list_taxonomy_hierarchy_no_instance. Además, necesitaremos un archivo SVG para denotar la carga al realizar la consulta AJAX.

Por ahora, si vas a Apariencia > Widgets verás un nuevo widget disponible, para que puedas añadirlo al área de widget y ver lo siguiente en el front-end:

search widget search widget search widget

¡Tiene un aspecto horrible! Vamos a añadir algunos estilos.

6. Añadir algunos estilos

Abre el archivo style.css y añade lo siguiente:

Ahora actualiza el navegador, (no te olvides de la caché del navegador) y tu widget debería tener mucho mejor aspecto:

product searchproduct searchproduct search

Por ahora, no hace nada en absoluto, así que vamos a aplicar algunas funciones.

7. Añadir funciones de búsqueda

Abre el archivo main.js; aquí vamos a crear nuestra funcionalidad de búsqueda principal.

La idea es simple: añadiremos detectores de eventos para buscar la clave de entrada (escribir) y los cambios en el campo de selección. Cada vez que se active cualquiera de estos eventos, realizaremos una solicitud AJAX para enviar la palabra clave, consultar productos basados en la palabra clave y generar los resultados especificados.

Añade el siguiente código al archivo main.js:

Aquí hemos definido algunas variables necesarias y añadido detectores de eventos a la búsqueda seleccionada. Como puedes ver ambos eventos desencadenan la misma función productSearch que tiene varios parámetros:

  • form
  • query
  • currentQuery
  • timeout;

Función productSearch

En realidad no tenemos esa función todavía, por tanto la búsqueda no funcionará por ahora, así que vamos a crear esa función. Añade el siguiente código justo antes del anterior.

En esta función primero nos aseguramos de que nuestra palabra clave tenga al menos 3 caracteres y no contenga espacios

A continuación, si la longitud de nuestra palabra clave es más o menos igual a 3 caracteres, añadiremos la clase de carga al contenedor primario del campo de búsqueda, esto es necesario para ejecutar la animación CSS mientras realizamos nuestra solicitud AJAX.

Y aquí tendremos que comprobar que la palabra clave introducida no es igual a la palabra clave actual, para evitar solicitudes AJAX duplicadas con la misma palabra clave. A continuación, establecemos el tiempo de espera para 500 ms y realizamos una solicitud AJAX. Con la solicitud pasamos la palabra clave, la categoría y la acción de solicitud AJAX search_product.

Como todavía no tenemos la acción search_product, al ejecutar AJAX obtendremos un error interno del servidor. Así que vamos a crear esa acción ahora.

Acción search_product

Abre el archivo product-search.php principal y en la parte inferior añade el siguiente código:

Por ahora, presta atención a la parte add_action del código. ¿Ves los nombres de acción, con los prefijos wp_ajax_ y wp_ajax_nopriv_? Debemos usar los mismos nombres de acción que especificamos en el archivo main.js, search_product.

Ahora el núcleo de acción

Aquí estamos usando el método de consulta $wpdb para acelerar el proceso de consulta. No soy un gurú de MySQL, así que supongo que los profesionales pueden optimizarlo más, pero para nuestra tarea es lo suficientemente bueno y funciona como se esperaba.

Aquí primero comprobamos si se especificó alguna categoría y, a continuación, consultamos los resultados en esa categoría específica. Si no se especifica ninguna categoría, realizamos una consulta estándar de producto que contenga la palabra clave en el título, o el contenido, o coincida con el SKU. Y si tenemos los resultados creamos la salida basada en los resultados consultados.

Ahora volvamos a main.js. Si nuestra solicitud AJAX ha tenido éxito, devolvemos los datos de salida en la lista y se anexan al div vacío de resultados de búsqueda. Todo lo que queda es eliminar el tiempo de espera.

searching logo itemssearching logo itemssearching logo items

¡Eso es todo! Una eficaz y potente búsqueda AJAX de producto. Ahora, si vas al front-end, vuelve a cargar la página (no te olvides del almacenamiento en caché del navegador) puedes buscar productos y ver el widget en acción.

Conclusión

Eres libre de utilizar este plugin en tus proyectos, tanto comerciales como no comerciales. Espero que te guste y si tienes alguna idea puedes escribir tu opinión libremente en la siguente sección de comentarios. Puedes descargar el plugin desde GitHub. Y aquí está la demostración del plugin. ¡Gracias por leer!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.