Avisos
Vaciar todo

retocar el modulo externo de busqueda Search Block con imagenes

15 Respuestas
5 Usuarios
0 Reactions
1,725 Visitas
Respuestas: 363
Reputable Member
Topic starter
 

Hola, por favor tengo ganas que quedarme con este modulo con imagenes de busqueda rápida que creo recordar pusiteis un enlace por ahí recomendandolo y lo pillé. Está muy bien, textos grandes y con imagenes de productos.

Pero tengo el problema de que no se como poner mucho mas ancho el desplegable con los resultados para que asi no ocupe tantas lineas.

Además necesito que las imagenes sean mas pequeñas. Aunque sea otro tamaño compartido con otras de la tienda.

De esta forma conseguiremos que sea mucho mas practico.

PAra ponerlo en su sitio (entre el logo y el carrito) no preocuparos que se hacerlo.

Podeis decirme donde poder cambiarlo? Lo he intentado ya varias veces tocando valores de los archivos y nada.

mando una foto y se llama "prosearch"

Muchas gracias por adelantado.

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 30/05/2015 12:35 am
Johnny Heredia Montiel
Respuestas: 20131
Illustrious Member Moderator
 

Hola,

Al parecer esta incrustado en el código del modulo el ancho no en un fichero css por separado.

Te recomiendo buscarlo con una herramienta como textpad la siguiente linea:

<div class="ac_results" style="position: absolute; display: block; width: 318px; top: 245.5px; left: 133.5px;"

donde el valor width tendrás que aumentarlo.


 
Respondido : 30/05/2015 1:15 am
Respuestas: 363
Reputable Member
Topic starter
 

Me pierdo un poco con el fichero del módulo, cual es y donde está?
hay muchos en la carpeta public_html/modules/prosearch, que por cierto es esta?

en cuanto a la herramienta esa tendre que bajarlo a mi ordenador para abrirlo con ella no?

gracias de nuevo.


 
Respondido : 31/05/2015 1:05 am
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Enrique,

¿Nos puedes facilitar el enlace de descarga del módulo para evaluarlo y poder decirte después como y donde se pueden aplicar ciertos cambios? lo he buscado en nuestra documentación y otros hilos del Foro pero no lo he encontrado.

Saludos


 
Respondido : 31/05/2015 3:45 am
Respuestas: 363
Reputable Member
Topic starter
 

Perdona pero no recuerdo si lo pillé gracias a vosotros o no. Tengo tal follón de favoritos de tanto buscar que me vuelvo loco.

De todas formas aqui es donde lo descargué, en:
https://www.prestashop.com/forums/topic/381136-m%C3%B3dulo-libre-ajax-live-search/

Acuerdate por favor de mirar tambien el tamaño o alto de las imagenes en miniatura, ya que seguro esta seria la clave para que ocupe una linea y se vean mas resultados en menos sitio.

Muchas gracias por adelantado y saludos.


 
Respondido : 31/05/2015 3:27 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Para el tema del ancho podrías modificar el archivo global.css de tu theme, al final agrega :

.ac_results {
    min-width: 400px;
}

Saludos.


 
Respondido : 31/05/2015 6:34 pm
Respuestas: 363
Reputable Member
Topic starter
 

Muchas gracias, esto va quedando genial.

Falta reducir las imagenes.

Otra cosa, se podria hacer que la alineación de las lineas de texto partan de la derecha de la imagen (como la primera) y no de abajo (como la segunda), para textos mas largos. (mando foto) Así cabrian en dos lineas practicamente cualquier titulo de producto.

Inicialmente le he puesto 600 en vez de 400 para evitar esto anterior, (pensando inicialmente en una sola linea pero no se si habria problemas al usar la busqueda en los móviles.

Se podria cambiar tambien el tamaño del texto de los resultados? Incluso el que aparece antes de escribir nada, siempre he querido cambiarlo ya que es muy pequeño.

Muchas gracias y saludos.


 
Respondido : 31/05/2015 7:12 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Enrique,

Antes de seguir ampliando el tamaño del buscador deberías analizar como se visualiza en los dispositivos móviles, para no llevarte sorpresas y hacerlo tan ancho que desborde por la derecha.

Saludos


 
Respondido : 31/05/2015 9:05 pm
Respuestas: 363
Reputable Member
Topic starter
 

Si que se ve bien, pero en 400 como ya dijo Jhon. Por algo lo dijo. Lo acabo de probar con mi movil que no llega a las 4" y no tendrá eso, unos 480x854 de resolucion. Asi que perfecto. En uno mas grande y con mas resolucion, se verá perfecto.
Se queda justo al filo derecho. Si pudiesemos mover algo a la izquierda el desplegable de resultados seria perfecto. Y si no pues nada.

Eso si, se hace necesario poder reducir la imagen y que el texto quede alineado con la imagen en dos lineas sin que meta ninguna debajo.

Podeis decirme como? Habria que seguir en el mismo archivo global.css tan grandisimo?

muchisimas gracias. Saludos.


 
Respondido : 31/05/2015 11:15 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Enrique,

Yo las imágenes las veo en un tamaño muy prudente y adecuado ¿como las ves tu?.

Yo los cambios de estilos recomiendo que se los hagas exclusivamente al módulo, a menos que herede estilos del Tema.

¿Puedes facilitarnos una captura de la configuración del módulo?.

Saludos


 
Respondido : 31/05/2015 11:27 pm
Respuestas: 363
Reputable Member
Topic starter
 

Son muy grandes, haciendo el modulo muy poco funcional. Tienen al menos 80 o 90 de lado, fijate, te mando una captura de una tienda externa. Tiene las imagenes de 50 x 50 y queda hueco para 3 lineas a la derecha de la imagen.

En cuanto a la configuracion creo que no tiene, te mando captura tambien.

Los cambios los hago en el modulo, o donde tu me digas. donde es?

Saludos y gracias.


 
Respondido : 01/06/2015 12:37 am
Pablo Velasco
Respuestas: 20382
Illustrious Member
 

Hola,

Para reducir el tamaño de las imágenes añade el siguiente código al final del archivo global.css, o dentro del archivo CSS del módulo:

.ac_results li img {
max-width: 50px;
}

 
Respondido : 01/06/2015 2:57 pm
Respuestas: 363
Reputable Member
Topic starter
 

Que cosa mas bonita. Muchisimas gracias. Esto es otra cosa. On mando foto.

Pero fijaros lo que digo del texto cuando se sale. Os mando otra foto.

Lo suyo seria que estuviera en dos lineas y que aparezca la primera alineada con la parte superior de la imagen y la siguiente mas o menos por el centro, de tal manera que entre ésta y la primera del siguiente resultado tenga una en blanco o un espaciado interlineal mayor.

Quisiera saber tambien como cambiar el tamaño del texto por si tengo que reducirlo un pelín.

Con eso me doy con un canto entre los dientes y agradecido. Ya que endiendo que pedirle mas cosas pues hubiese buscado un modulo de pago.

Gracias de nuevo a todos y falta el remate.


 
Respondido : 01/06/2015 3:50 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

El problema es que el módulo tiene una estructura que no ayuda mucho a lo que quieres ya que el texto esta mezclado con la imagen y no hay ninguna etiqueta que ayude a diferenciar el texto

Lo que se me ocurre ya que podría mejorar en algo es alinear el texto a la derecha y la imagen hacerla flotante a la izquierda, por ejemplo

.ac_results li{
	text-align:rigth;
}

.ac_results li img{
	float:left;
}

El tamaño del texto lo puedes cambiar en ac_results li agregando font-size, te sugiero revisar algo de CSS si vas a seguir haciendo cambios

Saludos.


 
Respondido : 01/06/2015 9:28 pm
Respuestas: 363
Reputable Member
Topic starter
 

Una lástima que no se pueda.

Saludos y gracias


 
Respondido : 01/06/2015 11:55 pm