Jump to content

Affichage produit sur mobile


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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