Jump to content

[Resolu] Bug sur fiches produits, accessoires plus visible après la 4 eme

Deelight
 Share

Recommended Posts

enola Newbie

enola

Posted
Posted

Bonjour,

 

Les produits accessoires sont affichés dans un slider. Le css se trouve dans le module "productscategory" fichier "productscategory.css".

Si vous n'avez pas installé ce module, le css ne sera pas appelé. Copiez les propriétés du fichier "productscategory.css" dans "product.css" ce devrait fonctionner.

Link to comment
Share on other sites
enola Newbie

enola

Posted
Posted

Placez ce code dans le fichier "product.css"  ...

   .accessories-block .block_content .bx-wrapper{
    position: relative;
    padding: 0;
    *zoom: 1;
    margin: 0 !important; }
  .accessories-block .block_content .bx-wrapper img {
    max-width: 100%;
    display: block; }
  .accessories-block .block_content .bx-wrapper .bx-pager,
  .accessories-block .block_content .bx-wrapper .bx-controls-auto{
    position: absolute;
    bottom: -30px;
    width: 100%; }
  .accessories-block .block_content .bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(images/bx_loader.gif) center center no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    display: none; }
 .accessories-block .block_content .bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #666;
    padding-top: 20px; }
 
 .accessories-block .block_content .bx-wrapper .bx-pager .bx-pager-item,
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-controls-auto-item{
    display: inline-block;
    *zoom: 1;
    *display: inline; }
 .accessories-block .block_content .bx-wrapper .bx-pager.bx-default-pager a{
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #000;
    outline: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; }
 
.accessories-block .block_content .bx-wrapper .bx-pager.bx-default-pager a:hover,
  .accessories-block .block_content .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #000; }
 
.accessories-block .block_content .bx-wrapper .bx-controls-direction a{
    margin-top: 38px;
    height: 20px;
    width: 20px;
    line-height: 0;
    position: absolute;
    top: 40%;
    margin-top: -10px;
    font-size: 0;
    overflow: hidden; }
    .accessories-block .block_content .bx-wrapper .bx-controls-direction a:before {
      padding-left: 2px;
      color: #c0c0c0;
      font-family: "FontAwesome";
      font-size: 20px;
      line-height: 22px; }
   .accessories-block .block_content .bx-wrapper .bx-controls-direction a:hover:before {
      color: #333333; }
 .accessories-block .block_content .bx-next {
    right: 10px; }
  .accessories-block .block_content .bx-next:before {
      content: "\f138"; }
 .accessories-block .block_content .bx-prev {
    left: 10px; }
   .accessories-block .block_content .bx-prev:before {
      content: "\f137"; }
  .accessories-block .block_content .bx-wrapper .bx-controls-direction a.disabled {
    display: none; }
  .accessories-block .block_content .bx-wrapper .bx-controls-auto {
    text-align: center; }
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px; }
  
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-start:hover,
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0; }
 .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px; }
  
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-stop:hover,
  .accessories-block .block_content .bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px; }
  .accessories-block .block_content .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%; }
  .accessories-block .block_content .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px; }
  .accessories-block .block_content .bx-wrapper .bx-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666666 \9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%; }
 .accessories-block .block_content .bx-wrapper .bx-caption span {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    font-size: .85em;
    padding: 10px; }
  • Like 1
Link to comment
Share on other sites
Deelight Newbie

Deelight

Posted
  • Author
Posted

Merci pour les infos, mais j'ai essayé de copier au début, à la fin, a la place, a la place de la petite partie d'origine "accessoire" dans le fichier... rien n'y fait.

Je visualise bien des changements, mais uniquement sur la partie haute de la fiche produit, pas sur la mise en page des produits accessoire

 

Exemple:

http://www.archertechnicien.com/index.php?id_product=139&controller=product

Il y a 10 accessoires sur ce produits

Merci

Link to comment
Share on other sites
enola Newbie

enola

Posted
Posted

Bonjour,

 

Par défaut le carrousel est configuré pour affiché 6 produits. Essayer de modifier le fichier "product.js" qui se trouve dans le dossier js de votre thème.

Remplacer :  maxSlides: 6,

Par : maxSlides : 10,   (ou le chiffre correspond à votre nombre d'accessoires)

 

Quand vous dites que vous ne voyez les changements que "sur la partie haute de la fiche produit"... c'est-à-dire? Vous visualisez bien le slider?

Link to comment
Share on other sites
  • 2 weeks later...
JonathanB Newbie

JonathanB

Posted
Posted

Bonjour,

Je réponds sur celui là pour dire que sur Mozilla Firefox (29.0.1) sur windows 7, j'ai le choix sur 6 accessoires dont la dernière photo est absente (montage flèche).

J'ai bien la petite flèche pour passé à droite, comme sur la première photo.

Donc le problème n'est pas de firefox.

Voici les images.

Je vais tester cela sur mon magasin en local pour voir si nous avons le même souci.
 

post-652551-0-86493500-1400584654_thumb.png

post-652551-0-16952700-1400584664_thumb.png

Link to comment
Share on other sites
JonathanB Newbie

JonathanB

Posted
Posted (edited)

Bon perso j'ai le même truc sur mon magasin, il est bien d'être ironique mais le problème est réel.
Je n'ai aucune flèche sur mon magasin.

Bon j'ai réussi à bidouiller virtuellement pour se passer d'une flèche invisible.

J'ai changer le css grâce à firefox qui malheureusement se passe dans la formule js (dont je comprend que dalle).

 

<div class="block products_block accessories-block clearfix">

    <div class="block_content">
        <div class="bx-wrapper" style="max-width: 1168px; margin: 0px auto;">
            <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 267px;">
                <ul id="bxslider" class="bxslider clearfix" style="width: 1115%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"></ul>

J'ai changé le height à 267px à 100%et le width à 1115% à 100%.
Comme sur l'image mis en pièce jointe.

et vous avez le résultat sur l'image en haut tout les accessoires s'affichent.
C'est fait virtuellement par firefox et je ne sais pas comment le changé dans les fichiers mais donnera un point de départ aux codeurs.

PS : avec l'astuce D'enola les flèches apparaissent. Je pense que mon bidouillage virtuel ne sert plus à grand chose.

post-652551-0-53998700-1400593339_thumb.png

Edited by JonathanB (see edit history)
Link to comment
Share on other sites
Deelight Newbie

Deelight

Posted
  • Author
Posted

Bon effectivement, il y a bien une flèche, mais sur mon écran elle est quasi invisible :angry:  Ce qui explique cela... Ce n'est pas des lunette qu'il faut que j'achète, mais un écran :unsure:

 

Il faudra que j'achète des écrans à mes clients aussi?  :P

 

Bon merci du coup de main, il est résolut à moitié, car ce n'est pas vraiment clair pour mes clients....qui cherchent où sont les produits.

Le top, c'est bien de les afficher en colonne et non en lignes...

A suivre donc

Link to comment
Share on other sites
Xavier du Tertre Newbie

Xavier du Tertre

Posted
Posted

Effectivement, la solution en colonnes de Jonathan est pas mal du tout.

 

Pour la flèche quasi-invisible, tu peux aller changer la couleur dans productscategory.css (ici sur le Git : https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/css/modules/productscategory/css/productscategory.css#L81)

 

Par contre on va voir pour améliorer ça car je me rend compte qu'elle est pas méga propre, cette fonctionnalité... (des "underscore" sous les flêches, les flêches qui n'apparaissent que si tu installes le module "Products in the same category", etc)

Link to comment
Share on other sites
jomcdonald Rookie

jomcdonald

Posted
Posted (edited)

J'ai modifié la couleur (de gris à rouge) dans ce fichier, remis sur le serveur, mais je ne vois pas de modif? Il y une manip spéciale à faire? 

 

Il y a deux solution, soit tu n'a pas correctement modifié le fichier, soit tu doit doit vider le cache.

Perso je pencherais vers la première solution car je ne vois aucune modif.

 

Il faut modifier cette partie:

.accessories-block .block_content .bx-wrapper .bx-controls-direction a:before{
padding-left: 2px;
color: #c0c0c0; /* à remplacer par la couleur que tu désire */
font-family: "FontAwesome";
font-size: 20px;
line-height: 22px;
}
Edited by jomcdonald (see edit history)
Link to comment
Share on other sites
Deelight Newbie

Deelight

Posted
  • Author
Posted (edited)

J'ai bien l'habitude des couleurs hexa, voici la modif qui est faite dans ce css

 

#crossselling_list .bx-wrapper .bx-controls-direction a:before, .accessories-block .block_content .bx-wrapper .bx-controls-direction a:before, #productscategory_list .bx-wrapper .bx-controls-direction a:before {
      padding-left: 2px;
      color: #fe2222;
      font-family: "FontAwesome";
      font-size: 20px;
      line-height: 22px; }
 
PS : si vous avez un tuyau pour un éditeur qui tient la route... par ce que le bloc note ou word pad, c'est pas top.. :wacko:
 
voici ce que cela donne pour le moment:
Edited by Deelight (see edit history)
Link to comment
Share on other sites
JonathanB Newbie

JonathanB

Posted
Posted

Bonjour,

Pour un éditeur tu as notepad++, qui "colorise" le langage qu'il connait (en fonction du format du fichier), cela permet de bien distinguer les éléments d'un code.
Pour le back office je ne pourrais pas t'aider le mieux et de faire un nouveau sujet, pour des personnes compétentes te renseignent.

Link to comment
Share on other sites
Deelight Newbie

Deelight

Posted
  • Author
Posted

Bonjour,

 

Pour un éditeur tu as notepad++, qui "colorise" le langage qu'il connait (en fonction du format du fichier), cela permet de bien distinguer les éléments d'un code.

Pour le back office je ne pourrais pas t'aider le mieux et de faire un nouveau sujet, pour des personnes compétentes te renseignent.

Merci

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
 Share
Go to topic listing
×
×
  • Create New...