Si te interesa mostrar resultados instantáneos al escribir en el formulario de búsqueda, sigue leyendo. En este post te vamos a explicar cómo permitir a tus usuarios / clientes como crear búsquedas en tiempo real en WordPress con Elementor y Jet search.
Índice de contenidos
Qué es una consulta a tiempo real
Una consulta a tiempo real es aquella en la que el plugin consulta la base de tu WordPress mientras que los visitantes están escribiendo en el formulario de búsqueda. Se muestra una lista ordenada de los post, entradas o productos que coinciden con los resultados de las palabras a medida que se escribe y que los muestra según el criterio que definamos desde los ajustes del widget.
Esto quiere decir que los resultados de la búsqueda se ajusta continuamente a medida que el usuario escribe la búsqueda.
Qué plugins necesitaremos
Para poder implementar nuestro formulario de búsqueda en tiempo real necesitaremos estos dos plugins:
- Elementor: Lo podréis encontrar en el repositorio de WordPress o clicando aquí.
- Jet search: Lo podréis conseguir desde la página oficial.
Creando nuestro formulario de búsqueda en tiempo real para Wordpres
Instalamos y activamos ambos plugins. Al trabajar Jet search como widget de Elementor no deberemos realizar ningún tipo de ajuste previo desde nuestro administrador de WordPress, por lo que accederemos a la página/post donde queramos insertar nuestro formulario de búsqueda en tiempo real y desde Elementor buscamos el widget Ajax search y lo insertamos en el contenido y personalizamos los ajustes generales.
- Input icon: Nos permite insertar un icono dentro de campo de formulario de búsqueda.
- Placeholder text: Personaliza el texto que irá dentro del campo del formulario.
- Show Submit Button: Activando esta opción habilitaremos en botón para realizar la consulta. Aunqué no tiene mucho sentido mostrarlo ya que las búsquedas se realizan en tiempo real si que es cierto a que ayuda a que se entienda que es un campo de búsqueda.
- Submit button label: Personaliza el texto del botón de búsqueda.
- Submit button icon: Nos permite insertar y personalizar un icono en el botón de búsqueda.
- Show categories: Habilita el menú desplegable para filtrar por categorías.
- Taxonomy:Crea un menú desplegable en el que permite filtrar mejor las búsquedas en relación a categorías de entradas o de productos si tenemos Woocommerce.
- Select placeholder: Permite personalizar el texto del menú categorías.
- Responsive form on mobile: Activando esta opción habilitamos que el formulario se adapte a resolución de dispositivos moviles.
Seguimos y desde Search Query configuramos como queremos que se muestren los resultados de búsqueda:
- Seach by current query: Habilitando esta opción nos permite mostrar los resultados de búsqueda en relación unicamente a campos personalizados. Insertaremos los campos personalizados separados por comas (_sku, _precio, etc.)
- Source: Nos permite filtrar los resultados de búsqueda en relación a secciones de nuestra web. Es decir, podemos definir que por ejemplo solo muestre entradas del blog o productos de nuestra tienda.
- Terms: Nos permite incluir o excluir contenido de los resultados en relación a los ajustes del campo Source.
- Result order by y result order: Nos ofrece varias opciones de cómo se deben mostrar los resultados en relación a algunos parámetros como por ejemplo, por autor, ID, fecha y en que orden.
- Post per page: Definiremos en número de resultados que se motrarán por página.
- Post number: Definiremos el número máximo de resultados que mostrará.
Seguimos y desde Results Area configuramos el aspecto visual de los resultados de búsqueda:
- Results area width: Desde este ajuste definiremos el ancho del contenedor de los resultados de búsqueda.
- Shop post thumbnail: Habilitaremos si queremos que se muestre la imagen destacada.
- Thumbnail size: Definimos el tamaño de la imagen destacada.
- Thumbnail placeholder: Aquí definiremos una imagen que se mostrará por defecto si un resultado no tiene imagen destacada.
- Post content source: Definimos el texto resumen que acompañará a cada uno de los resultados.
- Post content lenght: Definiremos el número de palabras que mostrará el texto resumen.
- Show product price y Show product rating: Si habilitamos estas 2 opciones nos mostrará el precio y las valoraciones de los productos en el caso de tener Woocommerce.
- Show result content y result content text: Si activamos esta opción nos mostrará el total de resultados y nos permitirá personalizar el texto que acompaña a los resultados.
- Show result button y All results button text: Si activamos esta opción nos mostrará un enlace para ver todos los resultados y nos permite personalizar el texto del enlace.
- Results navigation: Desde este ajuste nos permite personalizar todos los ajustes de la paginación de los resultados de búsqueda.
Ya por último desde notifications nos permite personalizar algunos mensaje como por ejemplo si no se obtiene ningún resultado o si hubo algún problema al realizar la consulta.
Ahora simplemente desde los ajuste de estilo del widget nos faltaria personalizar cada una de las partes del proceso de búsqueda, fuente, tamaños, colores, etc etc
Puedes dar un repaso a los formularios de búsquedas en tiempo real en WordPress y a todo lo comentado en el siguente vídeo.
Que grande !
Gracias
Parece interesante
me parece interesante
Me alegra saberlo. Un saludo.
buen blog
Gracias, me alegro de que te guste.
es interesante
Gracias
buen blog
Gracias