Avisos
Vaciar todo

Cambiar el aspecto de los productos en lista de productos  

 
Enrique
 Enrique
Reputable Member

Hola, si mirais en la imagen adjunta y en el tema por defecto de prestashop que es el que estoy usando, me da la sensación de que cada producto ocupa mucho espacio en pantalla, quisiera hacer varios cambios:

1º Vereis como me aparece el stock dos veces, en el cuadro de color y junto al precio. ¿Seria posible quitar de ahí el cuadro y que el cuadro de color salga a la derecha del precio cuando no se está seleccionando el producto y tambien el cuadro de color con el producto seleccionado cuando el precio se muestra arriba (más separado) ? De esta forma nos ahorramos un hueco antes ocupado por el boton "en stock" o "agotado".

2ºEliminar el hueco anterior disminuyendo la altura del cuadro por el hueco en blanco por abajo y que suban los botones de favorito y comparar.

3º disminuir un poquito los espacios que separan verticalmente el precio, del boton añadir al carrito, de los botones de favorito y comparar.

4º seria posible disminuir de forma global el ancho de cada cuadro asi como la separacion horizontal entre ambos y que aparezcan 4 en vez de tres donde la primera columna se muestra con otros módulos? En pagina de inicio no seria el caso al ser otro modulo? "destacados en pagina de inicio" etc. y se seguirina mostrando 4 a todo el ancho ya que aqui no hay columna izquierda mostrada. Igual hay algun porcentaje que al tocarlo hace esto.

Saludos, y muchas gracias por adelantado como siempre

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 31/05/2015 5:50 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Para quitar ese cuadro del stock en el listado de productos puedes aplicar un cambio en la plantilla que genera ese listado. En concreto tendrías que editar el archivo themes/default-bootstrap/product-list.tpl y, previa copia de seguridad del mismo, cambiar la línea:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}

por esta otra:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode) && 1==2}

De esta forma, además de dejarse de mostrar la caja se eliminará ese hueco, con lo que ganarás en espacio vertical.

Para disminuir el espacio vertical que separa el precio, tendrás que aplicar cambios en los estilos CSS. Edita el archivo themes/default-bootstrap/css/product_list.css y, previa copia de seguridad del archivo, cambia el código

    ul.product_list.grid > li .product-container h5 {
      padding: 0 15px 7px 15px;
      min-height: 53px; }

por este otro:

    ul.product_list.grid > li .product-container h5 {
      padding: 0 15px 0 15px;
      margin-bottom: 0;
      min-height: 53px; }

Se pueden aplicar otros cambios para disminuir más el espacio. Analizando tu web con el Firebug podrás ver donde hacerlo. Eso sí, es recomendable que desactives la compresión de archivos CSS en Parámetros avanzados->Rendimiento, ya que solo así podrás ver el archivo en concreto donde aplicar los cambios.

Sobre lo de añadir más productos por fila, revisa el siguiente enlace donde se explica cómo hacerlo:

https://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/

Personalmente no te recomiendo cambiar el número de productos por fila, ya que es posible que te quede muy comprimido.

ResponderCitar
Respondido : 01/06/2015 3:51 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Muchas gracias Pablo, lo he puesto tal y como me has indicado.

Seria posible por último que me dijeras como quitar el boton más? no hace mas que estorbar y ocupar espacio ya que no uso el vistazo rápido o vista rápida y voy directo a pagina de producto. Tambien quisiera saber como reducir el espacio horizontal entre los cuadros de productos.

Saludos y gracias

ResponderCitar
Respondido : 02/06/2015 1:03 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

No es posible indicarte el fichero ya que tienes habilitada la compresión en los ficheros CSS, puedes en todo caso utilizar la herramienta firebug para la tarea. En el siguiente artículo del Blog de Webempresa se explica el uso de Firebug, herramienta destinada a localizar cadenas de código, estilos, etc., desde tu navegador:

- https://www.webempresa.com/blog/usando-firebug-para-modificar-la-apariencia-de-una-plantilla-joomla.html

Firebug Lite for Google Chrome:
- https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench

Fifebug Firefox:
- https://addons.mozilla.org/es-es/firefox/addon/firebug/

ResponderCitar
Respondido : 02/06/2015 5:31 am

Cursos Gratuitos WordPress

Enrique
 Enrique
Reputable Member

Estuve probando la herramienta firebug que me dijiste.
Estuve haciendo algunos cambios segun el video que me indicaste tambien y al final no los guardó al actualizar.

Mi pregunta por ahora a este respecto es:
¿el hecho de tener yo comprimidos los CSS es la causa de que los vea en una carpeta caché, con unos nombres de archivo rarísimos y con una estructura interna de dos lineas, y la linea 2 infinita practicamente y que no se guarden los cambios en esos archivos un rato despues?

Gracias y saludos.

ResponderCitar
Respondido : 03/06/2015 11:02 am
Julen
 Julen
Miembro Admin

Hola,

Lo que pasa que estas haciendo las modificaciones en archivos temporales, y cada determinado tiempo perderás los cambios, no debes trabajar sobre los archivos temporales, podrás identificarlos por que tienen nombres autogenerados.

Para ubicar los archivos reales a modificar desde el firebug, tendrás que desactivar la compresión CSS..

Revisa el siguiente enlace que te sera de utilidad: https://www.webempresa.com/blog/item/1378-mejora-la-velocidad-de-tu-tienda-prestashop-en-5-sencillos-pasos.html

Saludos

ResponderCitar
Respondido : 03/06/2015 11:27 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Gracias Julen. Lo he hecho y esto es otra cosa. Sigo cambiando con Firebug las pocas cosas que tenia en mente al hilo de este mismo tema.

Lo que os pido que me echeis un cable por favor, es al quitar el boton "más" (del producto señalado), se queda mal alineado y como un "punto" perdido a la derecha. ¿como podria quitarlo? (Os mando foto)

Por otro lado, me pasa constantemente que no puedo usar el editor de código (el que pone los numeros de linea) por que se me queda colgado el navegador con archivos muy grandes como global.css (tengo que usar el editor simple). Quizás haya algun parámetro que podais tocar en el servidor al respecto como otras veces, ó ¿Aviso a los chicos de soporte con un ticket?

Saludos y gracias como siempre.

ResponderCitar
Respondido : 03/06/2015 12:40 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Para quitar el botón "Más" del listado de productos prueba a añadir el siguiente código CSS al final del archivo globa.css:

.product-container .button-container .button.lnk_view {
display: none;
}

Respecto al otro tema que planteas, es preferible que lo plantees en un hilo nuevo del foro. Por regla general plantea cada tema en un hilo independiente, ya que así será más fácil hacer el seguimiento de los problemas y será más útil para el resto de usuarios.

ResponderCitar
Respondido : 03/06/2015 4:09 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Enrique
 Enrique
Reputable Member

Bueno chicos, creo que ya está mas que contestado éste tema.

Al respecto os diré que ve volví loco con el firebug hasta que decidí dejarlo ya que me empezó a trastocar la parte de abajo del pie de pagina.

Donde más se trastocó fue al tocar los anchos de columnas de la ficha de detalle de producto. Fue quitarlo y vuelta a la normalidad.

Volví a poner los archivos iniciales de los cuales hice copia de seguridad.

Volveré a retocar con más ojo y lo justo y necesario.

Gracias y saludos.

ResponderCitar
Respondido : 04/06/2015 5:00 pm
Julen
 Julen
Miembro Admin

Hola,

Entendemos que con tu ultima respuesta podemos dar el tema por solucionado? Podemos dar por cerrado el hilo?

Saludos

ResponderCitar
Respondido : 04/06/2015 5:04 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enrique
 Enrique
Reputable Member

Creo que sí. Puedo formular mas preguntas ya que tengo muchas, pero para preguntar antes debo procurar solucionarlo yo antes si puedo.

Cerrarlo y gracias.

ResponderCitar
Respondido : 04/06/2015 5:10 pm