Estilo del desplegable de búsqueda y z-index

albertolab10

¡Hola a todos!

Estoy intentando modernizar la apariencia del desplegable de sugerencias de búsqueda en tiempo real de mi tienda PrestaShop. Por defecto, en el tema Classic, es bastante básico y quiero que parezca una tarjeta flotante con bordes redondeados, miniaturas de producto y el texto de búsqueda resaltado.

Además, tengo un problema de z-index. El desplegable de búsqueda queda por debajo de mi mega menú cuando ambos están activos, lo cual es un desastre visual. He intentado algunas cosas en custom.css pero no consigo el efecto deseado ni solucionar el z-index. Aquí está lo que tengo:

#search_widget .dropdown-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  padding: 10px;
  min-width: 300px;
  z-index: 1000;
}
#search_widget .search-product-item {

¿Alguna idea de cómo puedo mejorar esto y solucionar el z-index? Estoy en PrestaShop 9.0.3.

monica_admin

¡Hola @albertolab10!

Entiendo perfectamente lo que buscas. El tema Classic a veces se queda corto en diseño por defecto. El z-index es un clásico en PrestaShop cuando tienes elementos flotantes como mega menús o carritos desplegables.

Respecto a tu CSS, el z-index: 1000; para el desplegable de búsqueda es un buen intento, pero es muy posible que tu mega menú tenga un z-index igual o incluso superior. Necesitas que el desplegable de búsqueda tenga un valor significativamente más alto para asegurar que siempre esté por encima. Por ejemplo, muchos mega menús usan z-index de 1020 o 1030 para estar sobre el contenido general. Prueba con un valor más elevado, como 9999, para el desplegable de búsqueda.

Para las miniaturas y el texto resaltado, tendrías que modificar la estructura de cada search-product-item y añadir los estilos para las imágenes y el texto dentro de ellos. Tu display: block; no te va a dar mucha flexibilidad para eso. Podrías usar flexbox.

sarahub

Sí, @monica_admin tiene razón con el z-index. Es lo primero que hay que ajustar. Un valor muy alto asegura que no se solape con nada más. También es importante que el elemento padre del desplegable de búsqueda tenga una position definida (relativa o absoluta) para que el z-index funcione correctamente.

Para el tema de las miniaturas, ¿cómo se genera el HTML de esos resultados de búsqueda? Si no tienes control sobre el HTML para añadir una clase específica a la imagen y al texto del resultado, te tocará usar selectores más genéricos o nth-child si la estructura es consistente. Lo ideal sería que el módulo de búsqueda ya inyectara las imágenes o al menos una forma sencilla de acceder a ellas.

Milo

Hola @albertolab10,

Entiendo tu frustración con el estilo por defecto y el tema del z-index, es un escenario muy común. El problema reside en que tu z-index actual es demasiado bajo para competir con un mega menú, y la estructura de tus estilos actuales no está optimizada para mostrar miniaturas y texto resaltado de forma moderna.

Aquí tienes un fragmento de CSS que puedes añadir a tu themes/classic/assets/css/custom.css. Esto debería darte el efecto de tarjeta flotante, la jerarquía visual para el z-index y un estilo más limpio para los resultados con miniaturas y texto resaltado. Asumo que el HTML del resultado incluye una imagen (img) y un texto (span o div).

#search_widget .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
  padding: 10px 0;
  min-width: 320px;
  z-index: 9999; /* Valor alto para asegurar que esté por encima de todo */
  max-height: 400px; /* Limita la altura del desplegable */
  overflow-y: auto; /* Permite desplazamiento si hay muchos resultados */

Explicación de los cambios:

#search_widget .dropdown-menu: Incrementé el z-index a 9999 para que esté por encima de cualquier otro elemento. También ajusté border-radius y box-shadow para un aspecto más moderno. Añadí max-height y overflow-y: auto para manejar muchos resultados de forma elegante.
#search_widget .search-product-item: Cambié display: block a display: flex y align-items: center para que la miniatura y el texto estén en la misma línea y alineados verticalmente. Añadí un transition para un efecto hover suave.
#search_widget .search-product-thumb img: Añadí estilos específicos para las miniaturas, incluyendo width, height, border-radius y object-fit: contain para que las imágenes se vean bien sin distorsionarse.
#search_widget .search-product-name: Un estilo base para el nombre del producto, y el strong anidado para resaltar la parte de la búsqueda que coincide con el término introducido. Asumo que el módulo de búsqueda envuelve la coincidencia en una etiqueta <strong>.

Con esto, deberías ver una mejora significativa tanto en la estética como en la resolución del conflicto de superposición.

albertolab10

¡Increíble, @Milo! Acabo de implementar tu código en mi custom.css y funciona a la perfección. El desplegable de búsqueda ahora se ve exactamente como quería, con el estilo de tarjeta y las miniaturas.

Y lo más importante, ¡el z-index está resuelto! Ya no se solapa con el mega menú. Tu explicación de los cambios fue muy clara. Muchísimas gracias por la ayuda tan directa y efectiva.