Ver 2 columnas de productos en móvil

[MaMK2]

¡Hola a todos!, en primer lugar me gustaría presentarme. Soy Manuel y desde hace poco utilizo Presta Shop para mi tienda online, encantado.

Tengo un pequeño problema. Uso el tema Classic por defecto y me gustaría que en la versión móvil apareciesen 2 columnas de productos en inicio y demás páginas. He buscado porla red pero no encuentro solución. 

Estaría muy agradecido de vuestra ayuda.

Un saludo.

[Adrian]

Hola MaMK2, bienvenido al foro.

Creo que la solución es la siguiente:

En themes/classic/product-list.tpl, en la linea 49:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}

Cambiar col-xs-12 por col-xs-6.

Saludos.

 

Recuerda borrar caché después de hacer un cambio a un archivo tpl.

 

PD: Haz copia del archivo por si acaso.

Edited March 13, 2019 by Adrian (see edit history)

[MaMK2]

4 hours ago, Adrian said:

Hola MaMK2, bienvenido al foro.

Creo que la solución es la siguiente:

En themes/classic/product-list.tpl, en la linea 49:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}

Cambiar col-xs-12 por col-xs-6.

Saludos.

 

Recuerda borrar caché después de hacer un cambio a un archivo tpl.

 

PD: Haz copia del archivo por si acaso.

Hola Adrian, muy agradecido de tu respuesta. 

Intento buscar el archivo que me indicas pero no lo encuentro en esa ruta. Cómo podría encontrarlo? 

Un saludo.

[Adrian]

Estoy buscandolo, ahora tampoco lo encuentro :s

[Sheesho]

¡Hola! Espero ayudarlos, el fichero se encuentra en

themes > classic > templates > catalog > listing... aquí encontrarán product_list.tpl

 

[Adrian]

Exacto, ahi está! Gracias 

[MaMK2]

7 hours ago, Sheesho said:

¡Hola! Espero ayudarlos, el fichero se encuentra en

themes > classic > templates > catalog > listing... aquí encontrarán product_list.tpl

 

 

2 hours ago, Adrian said:

Exacto, ahi está! Gracias 

Efectivamente, ahí está. Ahora me surge la duda de donde he de colocar ese código. 

Un saludo.

[Adrian]

Parece que ahora ha cambiado, ya no se ha de meter en ese archivo. Sigo buscando.

[MaMK2]

1 minute ago, Adrian said:

Parece que ahora ha cambiado, ya no se ha de meter en ese archivo. Sigo buscando.

Muchísimas gracias Adrian.

[Adrian]

Seguramente has de hacerlo con CSS porque no encuentro el archivo ahora:

En themes/classic/assets/css/custom.css

.product_list.grid .col-xs-6 {

width: 100%;
  
}

[MaMK2]

12 hours ago, Adrian said:

Seguramente has de hacerlo con CSS porque no encuentro el archivo ahora:

En themes/classic/assets/css/custom.css

.product_list.grid .col-xs-6 {

width: 100%;
  
}

Hola Adrian, he probado con ese código y no hace nada. He borrado caché de PS y navegador. 

[DavidPortfolio]

La dirección del archivo es:

/themes/tutema/templates/catalog/_partials/miniatures/product.tpl

Ahí en la clase del article pones lo que te han dicho col-xs-6, y tendría que funcionar por lo menos para el catalogo

[Adrian]

Que ha de poner? Esto?

.product_list.grid .col-xs-6 {

width: 100%;
  
}

Ponerlo ahí tal cual, como si fuese css?

[DavidPortfolio]

No, tienes que poner solo col-xs-6, en ese archivo tiene que haber una etiqueta que sea <article class="xxxxxxxx" pues ahí dentro pones eso, te tiene que quedar así <article class="xxxxxx col-xs-6"

[Adrian]

A ver si el usuario interesado lo prueba y nos dice.

[MaMK2]

15 minutes ago, DavidPortfolio said:

No, tienes que poner solo col-xs-6, en ese archivo tiene que haber una etiqueta que sea <article class="xxxxxxxx" pues ahí dentro pones eso, te tiene que quedar así <article class="xxxxxx col-xs-6"

 

9 minutes ago, Adrian said:

A ver si el usuario interesado lo prueba y nos dice.

Ahora salen 2 columnas pero los productos se montan uno sobre el otro. Qué puedo hacer? Muchísimas gracias.

[DavidPortfolio]

Eso es por el css, prueba a poner la imagen a width 100% en el estilo

[MaMK2]

3 minutes ago, DavidPortfolio said:

Eso es por el css, prueba a poner la imagen a width 100% en el estilo

Donde he de poner eso? Es que no tengo ni idea de código. Nuevamente, muchas gracias.

[MaMK2]

Alguien sabe algo? Gracias!

[burrots]

Quote

Donde he de poner eso? Es que no tengo ni idea de código. Nuevamente, muchas gracias.

Que feliz es la gente...... 🤣

[MaMK2]

On 3/20/2019 at 2:25 AM, burrots said:

Que feliz es la gente...... 🤣

No entiendo... ;(

[franky.martin]

En 20/3/2019 a las 2:25 AM, burrots dijo:

Que feliz es la gente...... 🤣

...no todos, miratelo.

[Pelleque]

Tengo el mismo problema y en la version 1.7.5.2 no salen esas lineas, alguien sabe?

[NEOFRI]

BUENAS NOCHES HE  HECHO LO QUE HAN RECOMENDADO SOBRE  CAMBIAR EL NUMERO 12 POR EN 

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}

Cambiar col-xs-12 por col-xs-6.

ME DA TODO BIEN EXCEPTO QUE LOS PRODUCTOS NO TALGUNOS SAL TAN DE LA  FILA  ADJUNTO PANTALLA

[jose sanzana]

Modificar Prestashop versión 1.7.7.5 , 2 columnas para móvil. índex y categoría  (después de muchos cabezazos y de buscar encontré y mejore esto).

Después de pegar el código le dan a regenera imagenes en Diseño => ajuste de imágenes   => botón al final Regenerar miniaturas  

Ahora si alguien mas experimentado lo puede mejorar me avisa. 😀👍

/*------------------max-width: 768px------------------*/
@media (max-width: 768px) {

/*-----Products thumbnail grid-----*/
    #products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container {
    max-width: 150px;
    height: 208px;
    margin: 2px;
    }

    #products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description,
    #products .highlighted-informations,.featured-products .highlighted-informations,.product-accessories .highlighted-informations,.product-miniature .highlighted-informations {
        width: 140px;
       margin-left: 4px;
    }

    .product-thumbnail img {
        width: 135px;
    }

    .featured-products .product-title {
        margin-top: 3px;
    }
#products .product-title, .featured-products .product-title, .product-accessories .product-title, .product-miniature .product-title {
    text-align: center;
    text-transform: capitalize;
    margin-top: .7rem;
    font-size: 12px;
    /* min-width: 59px; */
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-index #products .product, .page-index .featured-products .product, .page-index .product-accessories .product, .page-index .product-miniature .product, .page-search #products .product, .page-search .featured-products .product, .page-search .product-accessories .product, .page-search .product-miniature .product {
    width: 25%;
    min-width: 160px;
}
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a {
    font-size: 12px;
}

[NuriaH]

Hola Jose sanzana, he aplicado tu código y por lo menos ahora se muestra una coluna en pequeño y ya no muestra el producto en ancho comleto. No consigo mostrarlo a 2 columnas. Quizás sea por el tamaño del botón??

Te mando captura.

Muchas gracias de antemano

[jvasquezwork]

Hola Tenia el mismo problema supongo de querer ver dos columnas en la web desde un movil, cambie todos los 12 por 6 en los archivos product-list.tpl, pero el inconveniente seguia, asi que siguiendo la logica, en la pagina de inicio del web lo que vemos son las novedades, asi que es en esa ruta que hice el cambio desde un gestor FTP mozilla, la ruta del archivo es: /var/www/html/prestashop/themes/classic/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl   , el archivo a modificar es ps_newproducts.tpl se cambia :  el que estaba marcado en negrita, originalmente es 12, lo cambie por seis y luego borre el cache desde el administrador de prestashop, opciones avannzadas, luego en la parte superior derecha borrar cache desde el web de mi pc

esto lo hice en prestashop version 8.1.4, espero a alguien le sirva el tip, ya que tarde varios dias buscando y solo los demas archivos dentro de catalog me indicaban que cambiara pero no funcionaba.

original:  {include file="catalog/_partials/productlist.tpl" products=$products productClass="col-xs-12 col-sm-6 col-lg-4 col-xl-3"}

modificado:

<section class="featured-products clearfix mt-3">
  <h2 class="h2 products-section-title text-uppercase">
    {l s='New products' d='Shop.Theme.Catalog'}
  </h2>
  {include file="catalog/_partials/productlist.tpl" products=$products productClass="col-xs-6 col-sm-6 col-lg-4 col-xl-3"}
  <a class="all-product-link float-xs-left float-md-right h4" href="{$allNewProductsLink}">
    {l s='All new products' d='Shop.Theme.Catalog'}<i class="material-icons">&#xE315;</i>
  </a>
</section>