[Résolu] Problème d'affichage des "Produits phares" en Home Page

[Helmut Van Hutten]

Bonjour,

 

Comme indiqué dans le titre, j'ai un problème d'affichage des "produits phares".

Sur les 8 produits qui peuvent être mis en avant, j'en ai 4 qui s'affichent normalement sur la première ligne, les deux suivant sur une troisème ligne et les deux dernier sur la deuxième ligne (cf. pièce jointe)

Pourtant, et si cela fonctionne comme les "nouveaux produits", je ne devrais avoir que deux lignes avec 4 produits sur chacune d'elles.

 

J'ai bien trouvé un post qui semblait parler d'un problème similaire (https://www.prestashop.com/forums/topic/268679-probleme-affichage-produits-phare/?do=findComment&comment=1360130), mais n'ayant pas vu la demande initiale je n'ai pas bien compris les solutions proposées.

 

Je me tourne donc vers vous pour m'aidez si vous le voulez bien.

 

A savoir :

- Je suis sur Prestashop 1.6

- Au niveau du module "Produits mis en avant sur la page d'accueil", 8 produits peuvent être affichés

- J'ai récemment modifié l'ordre d'affichage des "produits phares" et des "nouveux produits" selon ce tuto (https://www.prestashop.com/forums/topic/324486-afficher-produit-phare-par-d%C3%A9faut-page-accueil/)

- Je ne possède que quelques notions en HTML et CSS alors n'hésitez pas à expliciter, si vous avez le temps bien sur

 

Si vous avez besoin de plus d'informations n'hésitez pas à m'en faire part.

 

Merci d'avance

Edited January 28, 2015 by Helmut Van Hutten (see edit history)

[FMR]

Bonjour,

Thème utilisé ? Possibilité de voir votre site en ligne ?
A première vue, je dirais que c'est un problème de hauteur ou largeur des blocks produits.
Rien de grave, juste à réduire de quelques pixels via CSS.

Bonne journée.
Cordialement.

[Helmut Van Hutten]

Bonjour et merci pour vote réponse.

 

Le site n'est pas encore encore en ligne malheureusement.

Le thème utilisé est une copie de celui par défaut avec juste une modification du background tel qu'indiqué ci dessous:

 

.columns-container {
  background-image:url(../img/05.jpg);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100%;
  background-attachment:fixed;
  }

 

A quel niveau (quel ligne dans global.css si possible ) devrais-je effectuer des modifications selon vous?

[Lactor]

Bonjour,

Vous pouvez mettre cette class tout en bas du fichier global.css, l'emplacement n'est pas des plus important (: (en gardant une copie du fichier global sur votre ordi, bien sûr).

Si la class est déjà existante, mettez simplement vos ajouts dedans (en gardant toujours une copie du fichier original ailleurs).

Bonne continuation,

 

Cordialement,

Okar

[Helmut Van Hutten]

Merci pour votre solution

 

Par contre, et au risque de paraitre un peu bêbête, de quelle "class" parle-t-on s'il vous plait? ^^'

 

A noter, qu'on m'a également proposé de réinitialiser le module (fait), de supprimer les cookies de mon navigateur (fait) et de 

"vider le cache de Prestashop en supprimant tous les fichiers et dossiers sauf index.php via ftp (FileZilla)

dans /cache/smarty/cache (sauf index.php)

et dans /cache/smarty/compile (sauf index.php)"

 

Etant néophyte et ne voulant pas faire de bêtises, serait-ce également une solution viable et surtout sans risque (ça me fait un peu peur de supprimer des dossiers dans mon ftp)? ^^'

Edited January 27, 2015 by Helmut Van Hutten (see edit history)

[Lactor]

Re-bonjour,

 

Aucune question n'est bête quand on ne s'y connaît pas, c'est normal !

En css, on parle de class (ou de classe en français) de styles, ça permet de regrouper plusieurs styles qui agissent sur le même élément html.

ceci : .columns-container est une class. Vu que le fichier global.css est énorme, je pense que cette class doit exister déjà, regardez (avec un ctr+ F et taper .columns-container dans la barre de recherche) avant de la copier en bas.

 

Il n'y a aucun problème à supprimer des fichiers et des dossiers de cache via la FTP, car ils se régénèrent si vous avez activé le cache sur votre boutique. Cela permet seulement de purger des fichiers qui gardent une configuration ancienne alors que vous avez fait des modifications. Supprimez tous les dossiers qui se trouvent dans /www/cache/smarty/compile/ (sauf le fichiers index.php, mais si vous le supprimez par mégarde ce n'est pas le plus grave, il suffira d'aller en copier un autre et de le re coller à cette place).

 

J'espère vous avoir éclairé un peu plus !

 

Cordialement,

Okar

[EDIT]En relisant, je me rends compte que non, ce n'est pas sur cette class que vous devrez faire des modifications, elle sert seulement à afficher une image dans votre fond de colonne. Il faudrait plutôt se tourner vers les classes associées aux produits. Je ne peux pas vous aider en l'état, il faut les noms des classes css. Pour cela, ouvrez firefox et ajoutez-lui le plugin "firebug". Il sert à voir quelles sont les classes et les styles associés aux éléments des pages.  Cela vous permettra de nous donner les différents styles associés à vos produits (: On y verra un peu plus clair à ce moment-là !

En attendant vos styles [/EDIT]

Edited January 27, 2015 by okar (see edit history)

[Helmut Van Hutten]

Merci beaucoup pour votre compréhension et pour ces explications qui sont parfaitement claires

Malheureusement, vidé le cache dans mon FTP n'a pas résolu le problème :_(

En suivant vos consignes, voilà ce que ça donne (cf pièce jointe)

 

J'espère que c'est à peu près lisible ^^'

 

 

 

 

[Lactor]

De rien (: Une question posée gentiment aura une réponse gentille (:

 

Ce n'est pas grave, sachez juste que si vous faites des modifications qui n'apparaissent pas, cela peut être une des causes.

 

J'ai l'impression que le module affiche les lignes par catégorie... Ou que e margin est vraiment énorme....

Je suis dispo ce soir à partir de 18h si vous voulez que je règle le souci de votre boutique. Si je trouve la solution, je la posterais ici, si jamais d'autres personnes sont dans le même cas de figure.

[FMR]

Bonjour,

Tout d'abord, avant de répondre totalement hors sujet, il serait bon de lire le topic entièrement et de le comprendre, Okar.

Bon, comme je le disais, c'est sûrement un simple problème de largeur de ce block.
Ce problème, si vous tulisez les nouveaux produits, au lui des produits phares, apparait-il également ?
Cela me semble bizarre que l'un ait un problème et pas l'autre... fonctionnant sur le même principe.

Quoiqu'il en soit, j'ai essayé de regarder sur un site en ligne utilisant le thème par défault, comme vous.
Ajoutez ce style dans global.css de votre thème, ou homefeatured.css dans les dossier modules :

#homefeatured li.col-md-3 {

    width: 24.5%;

}

Essayez plusieurs montant (23%, 24%, 24.5%), pour jouer au mieux sur l'espacement.
Si je ne me suis pas trompé, cela devrait pouvoir régler le problème.
Encore une fois, rien de garanti, n'ayant pas votre thème sous les yeux, et ses divers problèmes éventuels.

Dans l'attente de votre retour sur cette manipulation.

Bonne continuation,
Cordialement.
 

[Lactor]

Bonjour FMR,

Désolée, ça arrive d'être fatigué.

 

En testant votre style via firebug, ça corrige le problème sur la troisième ligne seulement si on le passe à 33.3%, mais pas sur la deuxième ni les autres (il est à 25% par défaut, déjà) :/ Je pense que c'est peut-être plus un problème au niveau du bloc ou un style parent qui prend le dessus. Un mauvais inline, ou un truc du genre.

J'ai fait dses tests assez peu concluants hier soir, le mieux est que je prenne son global.css et que je teste sur mon bac à sable.

 

Cordialement,

Okar

[Helmut Van Hutten]

Bonjour,

 

J'ai essayé de rajouter cet élément en modifiant les valeurs comme suggéré :

#homefeatured li.col-md-3 {

    width: 24.5%;

}

 

Malheureusement, et comme l'indique Okar, les résultats ne sont pas concluants.

 

J'ai mis le site en ligne si vous voulez y jeter un oeil ( http://www.eurodouglas.fr/ )

 

En tout cas merci à vous deux

 

PS : ce n'est pas grave pour le léger hors-sujet du début, en plus j'ai appris des choses

[Lactor]

Bonjour !

J'ai trouvé, en fait, il vous manque une class, qui existe déjà dans votre css, mais qui n'est pas affichée (:

Allez dans votre template /www/themes/votre_theme/product-list.tpl : ici, à la ligne 41, copiez-collez celle que je vous fournis à la place :

    <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">
N'hésitez pas à garder une copie de votre template avant de la modifier.

Il vous manquait la classe grid qui affiche les produits en tant que grille (: Je m'étais trop concentrée sur le css et je ne me suis pas tout de suite aperçue que la class était manquante ^^

 

Voilà voilà !

Voir pièce jointe pour le rendu !

[EDIT] si vous voulez ensuite modifier l'affichage du nombre de produit par ligne, allez dans le Back office > préférences > produits > pagination[/EDIT]

Edited January 28, 2015 by okar (see edit history)

[Helmut Van Hutten]

Re-bonjour

 

Ça marche!

 

Merci beaucoup Okar pour votre aide, pour le temps que vous m'avez consacré et pour votre amabilité.

Merci également aux autres intervenants qui ont essayé de m'aider.

 

Bonne journée et bonne continuation!

Edited January 28, 2015 by Helmut Van Hutten (see edit history)