Jump to content

Desabilitar scroll horizontal en tabla resumen del carro de compra.


Recommended Posts

Buenas, 

tengo un problema con la versión móvil de  prestashop. Uso el tema por defecto de prestashop 1.6.1, el caso es que la tabla del resumen de productos en el carro, me sale con un scroll horizontal en la versión para móvil y tablet, pero me parece poco intuitiva y ya varios clientes han tenido problemas para terminar su compra debido a eso. ¿Como podría desactivar ese scroll horizontal y que se muestre todo en la pantalla sin deslizar? Pongo foto de lo que me pasa ahora y de cómo me gustaría que quedase. 

spacer.pngspacer.png

Ojala me pudiéseis ayudar, estoy ya un poco desesperada.

Muchas gracias! :)

Link to comment
Share on other sites

Hola @meljimvaz

Puede arreglarse modificando el archivo correspondiente de tu tema. Desconozco la versión 1.6. En versiones 1.7 el contenido se recoge en varios archivos dentro de themes > tutema > templates > checkout ...

Con unas reformillas en la tabla, eliminando columnas quizá innecesarias (como disponibilidad) o partiendo las filas en dos tablas, como hace la plantilla por defecto de prestashop en versiones 1.7...  Puede quedar como te dé la gana, solo es necesario conocer HTML, CSS y dedicar algo de tiempo... 🙂

O con algo de suerte alguien ya hizo esa reforma y decide compartir muy amablemente su código.

¡Saludos!

Link to comment
Share on other sites

@meljimvaz

Si esta solución algo "chapucera" te sirve, no es difícil hacerla.

Eliminando las columnas "disponibilidad" (sin mucho sentido en el checkout) y el total (subtotal en realidad) de cada producto (redundante?) podría quedar como en la captura que adjunto. Habría que eliminar las etiquetas <td> que corresponda dentro de cada <tr>, rectificar los atributos colspan y eliminar la regla CSS de los enlaces: white-space: nowrap; cuyo efecto impide que se creen saltos de linea para adaptar el texto a celdas estrechas (o contradecir esa regla con un !important, puesto que viene definida por defecto desde bootstrap).

¡Saludos!

Captura checkout planeta-friki.png

Link to comment
Share on other sites

  • 2 weeks later...

Ei, metiendo estos dos archivos sabremos cual de los dos está usando. Luego podemos probar algo más y arreglar ese descuadre que aparece. La columna Descuentos no es el problema, puesto que su ancho depende de las dos celdas que tiene arriba. Además de cargarnos otra columna, igual podria reducirse algo la imagen y quizá meter la descripción debajo de ésta? Nosé, es cuestión de ir probando...

shopping-cart.tpl shopping-cart-advanced.tpl

Link to comment
Share on other sites

Buenas,

No ha cambiado, pero ahora sé que tu tema usa el archivo shopping-cart.tpl, ya puedo seguir jugando 😋 Te paso dos archivos para que los reemplaces, donde eliminé una columna y junté la descripción con la imagen... Ya sabes, lo ideal es tener una copia en local y hacer las pruebas ahí... ¡No te olvides de guardar copia de los originales!

Vemos como queda?

shopping-cart.tpl shopping-cart-product-line.tpl

Link to comment
Share on other sites

Bueno,

Me alegro que te agrade! 🙂 La "chapucilla" ha quedado algo apañada, pero no hay que olvidar que es una chapucilla... por que si cambias la configuración de Presta puede usar otro archivo sin esas modificaciones, hemos eliminado información útil: el subtotal de cada línea, algo prescindible... Quizá lo correcto sería ocultar la columna solo en dispositivos móviles, o dividir bien la tabla para no tener que ir borrando cosas. Si ahora decidieras añadir el costo del embalaje (actualmente deshabilitado) habría que readaptar la tabla, si actualizas el tema también se irá, puesto que no hay un tema hijo, etc, etc, etc.

Espero que te sirva para seguir decentemente hasta tu próxima actualización, donde el checkout está mejor resuelto 🤞 👍

¡Saludos!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...