Problème d'affichage dans les pages Catégories de produit

[Lacroix]

Bonjour,

Je rencontre un problème avec l'affichage du haut des pages catégories de produits 

En effet, tout se met l'un à la suite de l'autre et plus l'un à côté de l'autre. 

J'ai beau cherché dans les fichiers que je pense être bons, je ne trouve pas les changements qui ont provoqués ce problème. Tout fonctionne correctement mais l'affichage est légèrement horrible 

Voir photo en annexe pour mieux comprendre. 

Quelqu'un aurait une solution, une piste? 

Merci beaucouuuuup d'avance :) 

[Tadaa !]

Bonjour.

 

Le mieux est de comparer avec le fichier category.tpl d'origine, contenu dans le zip Prestashop, pour trouver la modification à l'origine du problème. Il existe des logiciels capables de pointer toutes les différences entre 2 fichiers.

[Lacroix]

Merci pour l'astuce

Je viens de comparer les deux fichiers et il n'y a pas d'erreurs. Est-ce possible que cela vienne d'ailleurs? 

[Easy Site]

Bonjour

 

Je pense que le fichiers css n'est pas chargé !

 

Vérifier qu'il n'a pas disparu

 

sinon remettre une sauvegarde de celui ci, si vous en avez une

 

Nico

[Lacroix]

C'est bien là une possibilité

 

Mon fichier global.css est bien à sa place. 

Comment vérifier qu'une page .tpl ne charge pas le css qui lui correspond? 

[Tadaa !]

Effectivement, vérifiez aussi le fichier /themes/default-bootstrap/css/global.css (pour le thème par défaut) et d'éventuelles modifications précédentes. Là aussi, comparez avec l'original.

NB : si vous le remplacez par l'original, vous perdez toutes les modifs précédentes !

[Easy Site]

Si il est en place mais pas chargé c'est que votre chemin seo ne marche pas trop !

 

Quand vous êtes en admin, l'interface se charge bien ?

 

Nico

[Tadaa !]

C'est bien là une possibilité

 

Mon fichier global.css est bien à sa place. 

 

Comment vérifier qu'une page .tpl ne charge pas le css qui lui correspond? 

Sur la page de la catégorie, clic-droit > afficher code source

Vérifier s'il y des liens qui pointent vers /themes/default-bootstrap/css/global.css et /themes/default-bootstrap/css/category.css

 

Quelle version de PS ?

[Lacroix]

Désolée, j'ai oublié de préciser cet élément : Je suis en version PS 1.6.1.6 

Mon admin se charge parfaitement bien, je n'ai pas de soucis à ce niveau là. 

 

Sinon, mes pages catégories chargent bien tous les css et javascript

 

<link rel="stylesheet" href="/themes/MyTheme/css/global.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/autoload/highdpi.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/autoload/responsive-tables.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/autoload/uniform.default.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/product_list.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/category.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/scenes.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockcart/blockcart.css" type="text/css" media="all" /><link rel="stylesheet" href="/js/jquery/plugins/bxslider/jquery.bxslider.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/blockpermanentlinks/blockpermanentlinks.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockcurrencies/blockcurrencies.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blocklanguages/blocklanguages.css" type="text/css" media="all" /><link rel="stylesheet" href="/js/jquery/ui/themes/base/jquery.ui.core.css" type="text/css" media="all" /><link rel="stylesheet" href="/js/jquery/ui/themes/base/jquery.ui.slider.css" type="text/css" media="all" /><link rel="stylesheet" href="/js/jquery/ui/themes/base/jquery.ui.theme.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blocklayered/blocklayered.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockmyaccountfooter/blockmyaccount.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blocknewsletter/blocknewsletter.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blocksearch/blocksearch.css" type="text/css" media="all" /><link rel="stylesheet" href="/js/jquery/plugins/autocomplete/jquery.autocomplete.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blocktags/blocktags.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockuserinfo/blockuserinfo.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockviewed/blockviewed.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/homefeatured/homefeatured.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/themeconfigurator/css/hooks.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/themeconfigurator/css/theme8.css" type="text/css" media="all" /><link rel="stylesheet" href="/themes/MyTheme/css/modules/blockcategories/blockcategories.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/productscarousel/views/css/front/productscarousel.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/productscarousel/views/css/front/productscarousel-responsive.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/categoriestopmenu/views/css/front/categoriestopmenu.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/categoriestopmenu/views/css/front/categoriestopmenu-responsive.css" type="text/css" media="all" /><link rel="stylesheet" href="/modules/manufacturerscarouselslider/views/css/manufacturerscarouselslider.css" 

[Easy Site]

vous avez une adresse ? plus simple

 

Nico

[Tadaa !]

Pouvez-vous mettre une capture d'écran + large, avec toute la page ?

 

Aucun autre problème d'affichage sur d'autres pages ? Les majuscules dans le nom du thème ne sont pas une bonne idée : /MyTheme

[Lacroix]

Aucun autre problème d'affichage non. Tout se met correctement sur le reste de mes pages

 

Voici le lien où le problème se trouve : http://jouettoys.com/44-tracteurs-agricoles

 

Puis-je encore changé le nom du thème sans majuscule?

[Easy Site]

c'est un soucis sur votre fichiers category.tpl remplacer le avec une version d'install de prestashop de la même version que votre site (dans votre thème)

 

Cela devrais allez !

 

Nico

 

ps : sympa les petits tracteurs !

[Easy Site]

a part cela, autres soucis dans votre site !

 

Le footer ! et pas de renseignements sur qui vous êtes (mentions légales) je sait pas si vous avez des commandes mais moi je commande pas

 

Nico

[Lacroix]

Hey merci  

Je viens de faire le changement de fichier avec la version d'install de Prestashop. Mais cela n'a rien changé. 

Serais-ce possible qu'un style prend le dessus sur celui de base et ce qui provoque la destructuration de la mise en forme?

[Easy Site]

effacer votre cache dans préférence

 

Nico

et votre cache navigateur, cela devrais allez ! lol

[Lacroix]

Je viens de le faire et j'ai même vidé le cache de mon navigateur, toujours le même affichage. 

A en devenir dingue  

[Easy Site]

Appelez moi, y'en a pour 5mn !

[Tadaa !]

Avez vous ça dans global.css ? Je ne le vois pas sur votre site.

 

.content_sortPagiBar .sortPagiBar {

  border-bottom: 1px solid #d6d4d4;

  clear: both; }

 

Logiquement, juste avant .content_sortPagiBar

[Lacroix]

Oui effectivement, je ne le vois pas non plus via Firebug

 

Voici mon code css concerné : 

.content_sortPagiBar .sortPagiBar{
     border-bottom:1px solid #d6d4d4;clear:both;}

.content_sortPagiBar .sortPagiBar #productsSortForm{
     float:left;margin-right:20px;margin-bottom:10px;}

.content_sortPagiBar .sortPagiBar #productsSortForm select{
     max-width:192px;float:left;}

@media (max-width:991px){.content_sortPagiBar .sortPagiBar #productsSortForm select{max-width:160px;}

[Tadaa !]

Dernière ligne : il manque une accolade de fermeture : }

[Lacroix]

Oui effectivement. Merci pour l'oeil

Mais toujours le même problème  

[Tadaa !]

Pourtant, le pb semble venir du CSS, et de la classe content_sortPagiBar en particulier. L'affichage n'est plus en standard.

 

Désactivez le cache, purgez-le, et dans le fichier original /theme/default-bootstrap/css/global.css, copiez tous ce qui concerne les classes associées à content_sortPagiBar (il y en a un paquet, environ 70 lignes), et remplacez-les dans votre fichier /theme/MyTheme/css/global.css Faites une sauvegarde de celui-ci, avant !

 

Enregistrez les modifs, et rechargez la page.

[Lacroix]

Purger le cache, ce qui veut dire vider tout le contenu du smarty compile et smarty cache? 

J'espère que ça fonctionnera Merci de m'aider en tout cas

[Tadaa !]

Dans Paramètres avancés > Performances

Il y a un bouton "vider le cache" en haut à droite.

 

Faites aussi Ctrl + F5 pour vider le cache du navigateur, sur votre pc

[Lacroix]

Ah oui j'avais aussi vérifier le bon fonctionnement de mon fichier uniform.default.css

 

Voici le code de celui-ci :

div.selector {
  background-position: 0 -54px;
  line-height: 27px;
  height: 27px;
  padding: 0 0 0 10px;
  position: relative;
  overflow: hidden; }
  div.selector span {
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    background-position: right 0;
    height: 27px;
    line-height: 27px;
    padding-right: 30px;
    cursor: pointer;
    width: 100%;
    display: block; }
  div.selector.fixedWidth {
    width: 190px; }
    div.selector.fixedWidth span {
      width: 150px; }
  div.selector select {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    position: absolute;
    height: 27px;
    top: 0px;
    left: 0px;
    width: 100%; }
  div.selector.active span {
    background-position: right -27px; }
  div.selector.hover span, div.selector.focus span {
    background-position: right -27px; }
  div.selector.hover.active span, div.selector.focus.active span {
    background-position: right -27px; }
  div.selector.disabled span, div.selector.disabled.active span {
    background-position: right 0; }

Ou peut-être que la largeur de mes colonnes ne lui plaisent pas?

[Lacroix]

Merci Tadaaa,

 

Je connais ce bouton mais parfois, j'ai l'impression qu'il ne purge pas tout le cache. Car j'ai encode des fichiers dans mes fichiers caches. 

[Tadaa !]

Si ce sont les valeurs par défaut, pas de raison que ça pète.

 

Oui, le cache de Presta est parfois bizarre. Et le navigateur en garde une partie pour lui ^^

 

Il faudrait vous souvenir des dernières modifs apportées, et sur quoi elles étaient faites.

[Lacroix]

Super je vois enfin le bout du tunnel et le problème est plus ciblé. 

Concrètement, que puis-je faire alors pour rééquilibrer tout ça?

[Tadaa !]

Autant pour moi. Je pensais que l'affichage souhaité était celui par défaut.

[Lacroix]

L'affichage souhaité est en effet comme par défaut

Okom, le code que tu dis qu'il me manque, il est bien dans mon global.css
En fait, effectivement on dirai que l'image citée ci-dessous prend toute la largeur de ma page alors que je ne voudrais qu'une partie de la page. 

Comment faire pour rééquilibrer tout ça?

[Tadaa !]

Je sèche un peu. J'ai vraiment l'impression que c'est la classe sortPagiBar qui déconne. But why ???

[Lacroix]

Pas de soucis. Vous avez déjà beaucoup aidé ! Je vous remercie  

 

J'avais pensé un moment à un soucis avec les colonnes mais je ne vois pas trop ce qui aurait changé uniquement pour cette partie

[Tadaa !]

Vous avez remplacé les lignes faisant référence à sortPagiBar  ?

 

.content_sortPagiBar .sortPagiBar {

  border-bottom: 1px solid #d6d4d4;

  clear: both; }

  .content_sortPagiBar .sortPagiBar #productsSortForm {

    float: left;

    margin-right: 20px;

    margin-bottom: 10px; }

    .content_sortPagiBar .sortPagiBar #productsSortForm select {

      max-width: 192px;

      float: left; }

      @media (max-width: 991px) {

        .content_sortPagiBar .sortPagiBar #productsSortForm select {

          max-width: 160px; } }

    .content_sortPagiBar .sortPagiBar #productsSortForm .selector {

      float: left; }

  .content_sortPagiBar .sortPagiBar .nbrItemPage {

    float: left; }

    .content_sortPagiBar .sortPagiBar .nbrItemPage select {

      max-width: 59px;

      float: left; }

    .content_sortPagiBar .sortPagiBar .nbrItemPage .clearfix > span {

      padding: 3px 0 0 12px;

      display: inline-block;

      float: left; }

    .content_sortPagiBar .sortPagiBar .nbrItemPage #uniform-nb_item {

      float: left; }

  .content_sortPagiBar .sortPagiBar label,

  .content_sortPagiBar .sortPagiBar select {

    float: left; }

  .content_sortPagiBar .sortPagiBar label {

    padding: 3px 6px 0 0; }

  .content_sortPagiBar .sortPagiBar.instant_search #productsSortForm {

    display: none; }

.content_sortPagiBar .display,

.content_sortPagiBar .display_m {

  float: right;

  margin-top: -4px; }

  .content_sortPagiBar .display li,

  .content_sortPagiBar .display_m li {

    float: left;

    padding-left: 12px;

    text-align: center; }

    .content_sortPagiBar .display li a,

    .content_sortPagiBar .display_m li a {

      color: #808080;

      font-size: 11px;

      line-height: 14px;

      cursor: pointer; }

      .content_sortPagiBar .display li a i,

      .content_sortPagiBar .display_m li a i {

        display: block;

        font-size: 24px;

        height: 24px;

        line-height: 24px;

        margin-bottom: -3px;

        color: #e1e0e0; }

      .content_sortPagiBar .display li a:hover i,

      .content_sortPagiBar .display_m li a:hover i {

        color: gray; }

    .content_sortPagiBar .display li.selected a,

    .content_sortPagiBar .display_m li.selected a {

      cursor: default; }

    .content_sortPagiBar .display li.selected i,

    .content_sortPagiBar .display_m li.selected i {

      color: #333; }

    .content_sortPagiBar .display li.display-title,

    .content_sortPagiBar .display_m li.display-title {

      font-weight: bold;

      color: #333;

      padding: 7px 6px 0 0; }

[Lacroix]

Oh oui exactement comme vous me l'aviez demandé  

Dans le code via firebug, je vois la ligne suivante qui ne me semble pas normal : 

<div class="selector" id="uniform-selectProductSort" style="width: 868.182px;">

Ce "width" serait peut-être le problème?

[Tadaa !]

C'est généré dynamiquement, et effectivement, la div prend toute la largeur disponible.

[Lacroix]

Comment l'empêcher de prendre toute la largeur? 

[Tadaa !]

Honnêtement, je ne vois pas ce que vous avez modifié pour avoir ce résultat.

 

Faites une sauvegarde de /MyTheme/category.tpl, de /MyTheme/css/global.css et de /MyTheme/css/category.css

Remplacez-les un par un par les fichiers originaux de Prestashop. A chaque modif, videz le cache et vérifiez si l'affichage normal renvient : ça permettra déjà de déterminer le fichier incriminé.

Quand vous l'avez identifié, comparez son contenu avec avec le contenu de l'original.

 

Si vous bossez avec un IDE, pensez à faire du versioning pour pouvoir revenir en arrière.

[Lacroix]

Merci en tout cas pour votre aide

Je viens de faire toutes les démarches mais rien n'y fait. On dirait que ça ne vient pas de ces fichier mais d'un autre qui prend le dessus. 

[Lacroix]

EUREKA ! 

J'ai trouvé En fait, il s'agissait de la balise page-heading qui, je ne sais pas par quel phénomène, n'appelait pas le css de mon thème mais du thème 8 de Prestashop. 

Merci quand même à toutes les personnes qui ont porté attention à mon problème