Jump to content

Modification nombre de produits par ligne


Recommended Posts

Bonjour,

 

voila deux heures que je cherche à modifier le nombre d'articles par ligne dans le fichier product-list.tpl( et non pas par page ) sur prestashop 1.7. Aucun soucis pour faire cette modification sur prestashop 1.6, mais je suis en difficulté sur la version 1.7

 

Initialement prévu pour 3 produits, je souhaite en avoir 5 ou 6 par ligne... Je jouerai apres dans le CSS afin de réduire le pourcentage d'affichage ( width: 70%)

 

 

Merci de m'avoir lu.

 

Cordialement.

 

 

 

 

 

 

Edited by gau (see edit history)
Link to comment
Share on other sites

aprés avoir passé une partie de la matinée sur le CSS, pas moyen de trouver la ligne correspondante sur prestashop 1.7..  Quelle idée m'a pris de ne pas me baser sur la 1.6, j'aurai fini depuis bien longtemps..

 

Aucune solution via google ou sur le forum de prestashop, ou alors je passe à coté...

 

Link to comment
Share on other sites

je n'ai toujours pas trouvé la solution durant la soirée..

 

Si une âme charitable a déja rencontrer ce soucis, ou si quelqu'un à connaissance de la CLASS, car meme avec firebug ca ne donne rien.

 

 

Link to comment
Share on other sites

Je continue un peu en esperant trouver la solution.

 

Ma page catalogue est en full width, sans colonne, j'ai donc gagner la place necessaire à un article en plus par ligne, voir 2. ( de base 3 articles par ligne )

 

dans le fichier TPL, j'ai modifié la classe , de facon à avoir le col-log-3, ainsi un produit prend 3 cases sur les 12 disponible. Pas de soucis, mes articles ainsi que leur titre ont réduit de taille.

<div id="js-product-list">
  <div class="products row product_content grid">
          
		<div class="item-product col-xs-12 col-sm-6 col-md-6 col-lg-4">

 

Il faut maintenant que je trouve la solution pour avoir le 4eme article sur la ligne... J'ai essayé de modifier la regle " clear: both " du fichier CSS theme.css, mais forcement cela part dans tout les sens, puisque je modifie la regle qui permet de bouger les sections.

 

 

Si une personne a 5minutes pour se pencher sur le soucis, je suis sur que la solution n'est pas tres loin.

 

Merci de m'avoir lu.

 

 

Link to comment
Share on other sites

Désolé, je ne reçois plus les notifications du forum.
Pour le theme classic, dans le css, il y a :

 

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
    position: relative;
    margin-bottom: 1.563rem;
    height: 318px;
    width: 257px;
    background: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
}

 

Modifiez la largeur pour définir le nombre de colonne...
Clair, c'est bizarre, mais ils ont décidé de ne pas utiliser les class bootstrap comme vous venez de le faire.

Faut pas chercher à comprendre dés fois... Sur tour que flexbox est natif, et ils ont ajouté un script flexbox... bref.
 

V++

Atch

Link to comment
Share on other sites

Mon thème n'est pas celui par défaut mais la structure est fortement similaire.

 

J'ai essayé votre modification CSS, rien ne bouge d'un pixel.

 

dans mon theme.css, j'ai  :

 

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container {
  position: relative;
  margin-bottom: 1.5625em;
  height: 318px;
  width: 257px;
  background: white;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05); }

 

J'ai essayé differente valeur à width ( 100px, 300px, 800px ) mais rien ne bouge..

 

Malgré que c'est du CSS, j'ai vidé le cache navigateur et prestashop bien entendu, mais rien.. 12h passé à chercher dans un pauvre CSS, je regrette la 1.6.

Link to comment
Share on other sites

Ha fallait commencer par là.

Dire que le thème utilisé n'est pas Classic mais un thème lambda. 

Désolé dans ce cas, sans lien et sans connaître le thème je ne sais pas aider. Il y a 50 façons différentes de faire une grille...

Bon courage.

Atch

Link to comment
Share on other sites

  • 4 months later...
Le 28/02/2018 à 11:37 AM, Atch a dit :

 


#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
    position: relative;
    margin-bottom: 1.563rem;
    height: 318px;
    width: 257px;
    background: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
}

Bonjour,

Je souhaite réduire le nombre de produits pas ligne (3). Le thème est le classic 1.7.3.4. J'ai réalisé plusieurs modifications sur width (200 - 220 - 400), mais aucun changement, même après avoir avoir vidé le cache à chaque modification.

merci pour vos lumières.

 

Link to comment
Share on other sites

  • 1 year later...

 Il ne peut y avoir du changement pas css car la fonctionnalité "grid view" est assurée par du Javascript qui dispatche des classes hard-codés. Ça se trouve généralement dans{[theme}/assets/js/custom.js ... ou dans un autre fichier .js principal du thème. Donc, quoique vous fassiez dessus dans le css ou le template, le js le réécrit par dessus. Il faut supprimer (adapter si vous voulez garder la fonction vues du grid) le bout de js pour que cela marche.

Généralement c'est encapsulé de la sorte : 

$('#js-product-list .products article').each(function() {
            $(this).addClass(' col-sm-6 col-md-4 col-lg-6 col-xl-4');
            $(this).find('.thumbnail-container').removeClass('col-xs-12 col-sm-6 col-md-4 col-lg-4');
            $(this).find('.product-description').removeClass('col-xs-12 col-sm-6 col-md-8 col-lg-8')
            .find('.thumbnail-buttons').remove();
        });

 

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