Affichage produit sur mobile

[Etienne HDT]

Bonjour à tous,

Mon site www.lheritierdutemps.com est sous PS1.6.1.23. Dans les sous catégories ou catégories mes produits s'affichent au nombre de 3 par ligne. En revanche sur mobile il y en a plus qu'un par ligne. Est ce possible d'en afficher 2 ? Si oui, comment ?

Voici une page exemple: https://www.lheritierdutemps.com/fr/486-dutchbone?id_category=486&n=134

D'avance merci.

[Mediacom87]

Bonjour,

La modification doit être apporté dans votre template.

Dans le fichier product-list.tpl, vous devez changer l'affichage des éléments de la liste.

<li class="ajax_block_product col-xs-12 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">

en changeant la place prise par un élément, actuellement, sur la grille de 12 colonne sur mobile chaque élément prendre 12 colonne comme le code col-xs-12 l'indique.

Référez vous à la documentation bootstrap pour comprendre plus https://getbootstrap.com/docs/3.3/css/#grid

vous pouvez utiliser col-xs-6 pour en afficher 2 par ligne.

[Etienne HDT]

32 minutes ago, Mediacom87 said:

Bonjour,

La modification doit être apporté dans votre template.

Dans le fichier product-list.tpl, vous devez changer l'affichage des éléments de la liste.

<li class="ajax_block_product col-xs-12 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">

en changeant la place prise par un élément, actuellement, sur la grille de 12 colonne sur mobile chaque élément prendre 12 colonne comme le code col-xs-12 l'indique.

Référez vous à la documentation bootstrap pour comprendre plus https://getbootstrap.com/docs/3.3/css/#grid

vous pouvez utiliser col-xs-6 pour en afficher 2 par ligne.

Merci pour votre réponse. Ma ligne est plus complète que celle indiquée: <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-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

 

Si je remplace XS-12 par XS-6, la modification s'appliquera uniquement sur mobile? J'ai déjà 2 produits par lignes sur tablette.

[Mediacom87]

Il y a 1 heure, Etienne HDT a dit :

Si je remplace XS-12 par XS-6, la modification s'appliquera uniquement sur mobile? J'ai déjà 2 produits par lignes sur tablette.

 

Il y a 2 heures, Mediacom87 a dit :

Référez vous à la documentation bootstrap pour comprendre plus https://getbootstrap.com/docs/3.3/css/#grid

 

[Etienne HDT]

Merci pour votre réponse. Je comprend mieux. Faut juste que j'arrive à retrouver le fichier que je ne trouve plus !

[Etienne HDT]

Fichier retrouvé ! Voici donc ce que j'ai: col-xs-6 col-sm-4 col-md-3{else} col-xs-6 col-sm-6 col-md-4{/if}

Mais je n'ai toujours pas deux produits sur la même ligne, il devrait pourtant bien y avoir deux colonnes à présent.

[Mediacom87]

Vous avez bien entendu vidé le cache de PrestaShop après avoir fait vos modifications sur vos tpl ?

Cela se passe dans le menu Performances.

[Etienne HDT]

Oui oui bien entendu, mais lorsque je fais le test sur mon iphone il y a toujours qu'une colonne.

[Mediacom87]

Lorsque je vais sur votre site j'ai toujours cela :

<li class="ajax_block_product col-xs-12 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">

vous travaillez bien dans le dossier /themes/theme1046/

[Etienne HDT]

Oh punaise j'étais sur le fichier de l'ancien thème !!! Mille mercis.

J'ai créé un autre post pour augmenter la hauteur de mon slide, pourriez vous m'aider?

Edited December 26, 2019 by Etienne HDT (see edit history)