Better Search Block
Un módulo ligero que transforma el bloque de búsqueda estándar de Drupal en un cuadro de búsqueda estéticamente atractivo con efectos de iconos animados.
better_search
Install
composer require 'drupal/better_search:^2.0'
Overview
Better Search Block es un módulo de tematización ligero que mejora la apariencia visual del bloque de búsqueda predeterminado de Drupal. Con una configuración mínima, los administradores del sitio pueden reemplazar el formulario de búsqueda estándar con una interfaz de búsqueda moderna y animada que presenta un icono de lupa.
El módulo proporciona cuatro temas de animación distintos que se activan al pasar el cursor o enfocar, creando una experiencia de usuario interactiva. Estas animaciones incluyen transiciones de color de fondo, campos de búsqueda expandibles, iconos escalables y efectos de deslizamiento de iconos. Todo el estilo se logra mediante CSS puro sin dependencias de JavaScript, asegurando un rendimiento óptimo.
El módulo funciona perfectamente tanto con el bloque de búsqueda colocado en regiones como con el formulario de búsqueda en páginas de búsqueda dedicadas. Incluye compatibilidad con temas Bootstrap y ofrece opciones para personalizar el texto del marcador de posición, el ancho del campo de búsqueda y la visibilidad del botón de envío.
Features
- Cuatro temas de cuadro de búsqueda animados: Desvanecimiento de fondo, Expandir al pasar el cursor, Expandir icono al pasar el cursor y Deslizar icono al pasar el cursor
- Texto de marcador de posición personalizable que se muestra en el campo de entrada de búsqueda
- Ancho del cuadro de búsqueda configurable con 11 opciones de tamaño que van de 10 a 30 caracteres
- Opción para aplicar el estilo de Better Search a las páginas de búsqueda (/search) además de los bloques de búsqueda
- Capacidad de ocultar el botón de envío usando la clase visually-hidden para una apariencia más limpia
- Animaciones CSS puras sin dependencias de JavaScript para un rendimiento óptimo
- Icono de búsqueda basado en SVG para una visualización nítida en todas las resoluciones de pantalla
- Compatibilidad con temas Bootstrap con detección automática y estilizado apropiado
- Soporte para múltiples navegadores con prefijos de proveedor para navegadores antiguos
- Funciona con los formularios search_block_form y search_form
Use Cases
Mejorar la estética de la búsqueda del sitio
Un administrador del sitio quiere mejorar la apariencia visual del bloque de búsqueda predeterminado de Drupal sin escribir CSS personalizado. Al habilitar Better Search Block y seleccionar el tema 'Expandir al pasar el cursor', el campo de búsqueda se convierte en un elemento interactivo que se expande cuando los usuarios pasan el cursor sobre él, proporcionando retroalimentación visual y un aspecto moderno.
Búsqueda minimalista en el encabezado
Un diseñador necesita un icono de búsqueda compacto en el encabezado que se expanda al hacer clic. Usando el tema 'Expandir al pasar el cursor' con un ajuste de tamaño más pequeño (por ejemplo, 10), el campo de búsqueda aparece inicialmente solo como un icono y se expande para mostrar el campo de entrada completo cuando los usuarios interactúan con él.
Estilo de búsqueda consistente en todas las páginas
Un sitio tiene tanto un bloque de búsqueda en la barra lateral como un formulario de búsqueda en la página /search. Al habilitar 'Better Search en páginas de búsqueda' y 'Ocultar el botón de envío', ambas interfaces de búsqueda reciben el mismo estilo animado para una experiencia de usuario consistente en todo el sitio.
Integración con tema Bootstrap
Un sitio que usa un tema basado en Bootstrap quiere estilo de búsqueda animado. Better Search Block detecta automáticamente Bootstrap y sus temas derivados, aplicando las clases apropiadas (usando sintaxis de array en lugar de objetos Attribute) para asegurar la compatibilidad mientras mantiene los efectos de animación.
Búsqueda animada accesible
Una organización requiere interfaces accesibles pero aún desea mejoras visuales. Better Search mantiene el botón de envío en el DOM con la clase visually-hidden (los lectores de pantalla aún pueden acceder a él), mientras que los usuarios pueden enviar búsquedas presionando Enter, cumpliendo con los requisitos de accesibilidad mientras proporciona un acabado visual.
Tips
- Limpie la caché de Drupal después de cambiar la configuración de Better Search para asegurar que la nueva biblioteca CSS se cargue correctamente.
- El icono de búsqueda es un archivo SVG ubicado en css/images/search-icon.svg y puede reemplazarse con un icono personalizado sobrescribiendo el CSS.
- Para que el tema 'Expandir al pasar el cursor' funcione correctamente, asegúrese de que su tema no establezca un ancho fijo en el contenedor del formulario de búsqueda.
- Pruebe el tema seleccionado con el esquema de colores de su sitio - el predeterminado usa un fondo oscuro (#2b303b) que puede necesitar sobrescrituras de CSS para coincidir con su diseño.
- El ajuste de tamaño afecta el atributo HTML size; el ancho visual real puede variar según la configuración de fuente de su tema.
- Si las animaciones no aparecen, verifique que su tema u otros módulos no estén cargando CSS conflictivo para el formulario de búsqueda.
Technical Details
Admin Pages 1
/admin/config/search/better-search
Configurar la apariencia visual y el comportamiento del bloque de búsqueda mejorado de Better Search. Esta página permite a los administradores seleccionar un tema de animación, personalizar el texto del marcador de posición, establecer el ancho del cuadro de búsqueda y controlar si el estilo se aplica a las páginas de búsqueda.
Permissions 1
Hooks 2
hook_help
Implementa hook_help() para proporcionar documentación del módulo en la página de ayuda. Muestra información sobre el propósito del módulo y enlaces a la página del proyecto.
hook_form_alter
Altera los formularios search_block_form y search_form para inyectar el icono de búsqueda, adjuntar la biblioteca CSS apropiada según el tema seleccionado, establecer el texto del marcador de posición, configurar el tamaño del campo y opcionalmente ocultar el botón de envío.
Security Notes 3
- El módulo sanitiza correctamente el texto del marcador de posición usando el sistema de traducción de Drupal con el patrón @placeholder para prevenir XSS.
- Los cambios de configuración requieren el permiso 'administer Better Search settings', previniendo modificaciones no autorizadas.
- No se almacenan ni procesan datos enviados por el usuario; el módulo solo afecta la capa de presentación.