Jump to content

Ver 2 columnas de productos en móvil

MaMK2

By MaMK2
in Discusión general

 Share

Recommended Posts

MaMK2 Newbie

MaMK2

Posted
Posted

¡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.

Link to comment
Share on other sites
Adrian Newbie

Adrian

Posted
Posted (edited)

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 by Adrian (see edit history)
Link to comment
Share on other sites
MaMK2 Newbie

MaMK2

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
MaMK2 Newbie

MaMK2

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
MaMK2 Newbie

MaMK2

Posted
  • Author
Posted
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. 

Link to comment
Share on other sites
MaMK2 Newbie

MaMK2

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
  • 1 year later...
NEOFRI Newbie

NEOFRI

Posted
Posted

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

Screenshot_20200723-211705_Samsung Internet.jpg

Link to comment
Share on other sites
  • 1 year later...
jose sanzana Rookie

jose sanzana

Posted
Posted

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;
}

Link to comment
Share on other sites
  • 3 months later...
NuriaH Rookie

NuriaH

Posted
Posted

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

IMG_2729.jpg

Link to comment
Share on other sites
  • 2 years later...
jvasquezwork Newbie

jvasquezwork

Posted
Posted

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>
 

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
 Share
Go to topic listing
×
×
  • Create New...