Afficher le nom des couleurs

[sebchapo]

Bonjour,

Je suis en cours de création de mon premier  site sous Prestashop et je touche enfin au but. Cependant, j'ai un dernier soucis. Je n'arrive pas à faire afficher le nom des couleurs quand elles sont sélectionnées. Il y a les vignettes couleur, cela s'affiche correctement dans le panier mais il n'est pas possible pour le client de savoir quelle couleur il a sélectionné autrement que dans l'URL.

On peut voir cela sur cet exemple : Creme de cirage à l'Anglaise

J'ai essayé de regarder dans le code, sans aucun succès. Auriez vous une idée ?

Un grand merci !

 

[Christophe Boix]

Bonjour,

Le texte de la couleur se trouve dans la class="sr-only"  (dans la div class="product-variants"), du fichier product.tpl

Il suffit de changer le CSS de cette classe

[sebchapo]

Bonsoir merci pour cette réponse.

 

Je l'ai trouvé dans le product-variants associé à ce product.tpl.

 

J'ai le code suivant :

<span
                {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</span></span>

J'ai fait plusieurs essais, notamment avec des solutions proposées sur des forums anglophones, mais je n'ai jamais réussit à afficher le nom de la couleur qu'elle soit sélectionnée ou non. (J'ai des éléments de réponse ici https://www.prestashop.com/forums/topic/394851-display-only-color-name-selected/,  mais qui remonte à une ancienne version et qui ne marchent pas).

 

Sauriez vous que faire ? Merci beaucoup

 

[Ariane Web et Plus]

Comment souhaitez vous que cela s'affiche ? les un en dessous des autres ? ou a coté ? ou le nom en dessous ?

 

Bonne journée

[sebchapo]

De préférence les uns en dessous des autres avec le nom, mais au regard du temps que j'y ai passé sans aucun succès, je ne suis pas très tatillon sur la solution que je peux trouver.

La seule alternative que j'ai trouvé serait de faire un produit par couleur. Dans le pire des cas c'est une solution.

[Ariane Web et Plus]

Bonjour,

Je suppose que vous avez déjà modifié theme.css du coup ? Donc on va le modifier directement, c'est pas trés propre parce qu'il faudrait faire une recompilation mais bon... Ca marche quand même

A la fin du fichier theme.css

Ecrivez

#group_3 li {
float: inherit!important; 
}

Toujours dans theme.css faites une recherche sur le selecteur .sr-only

et remplacez 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

par 

.sr-only {
    position: absolute;
    left: 30px;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: inherit!important;
    clip: inherit!important;
    border: 0;
    Line-Height: 0.8;

Le problème c'est que dans votre thème le  texte est à l'intérieur du bloc de couleur, le plus propre serait de modifier le tpl de la page produit pour l'extraire. Mais bon la solution que je vous ai donné marche je pense.

 

Dites moi si ca fonctionne.

 

Bonne journée

 

Bonne journée

[sebchapo]

Merci beaucoup !! ça a en grande partie marché.  J'ai encore 1 ou deux soucis. J'ai essayé de les régler depuis tout à l'heure, mais j'ai seulement réussit à tout modifier et à devoir remettre la sauvegarde d'hier. Tout d'abord sur la page d'accueil il y a les noms qui viennent se superposer sur les couleurs des produits avec couleur quand on survole (Par exemple le cirage à l'anglaise). Ensuite, sur les produits il y n'est possible de sélectionner les couleurs qu'en sélectionnant le carré et non avec le texte. J'ai essayé de modifier cela dans le product-variants , sans aucun succès. Sauriez vous comment modifier cela ?

Si cela ne vous dérange pas, je vais transmettre cela aux personnes qui cherchaient cela sur le forum anglophone.

 

 

 

[Ariane Web et Plus]

Sachez que cette solution ne fonctionne que pour votre thème.

Remettez : 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

et ajoutez à la fin de theme.css ça sélectionnera mieux la page produit

#group_3 li .sr-only {
    left: 30px;
    overflow: inherit!important;
    clip: inherit!important;
}

Pour la sélection il faudrait modifier les tpl et la c'est un peu plus compliqué.

Bonne journée

[sebchapo]

Merci beaucoup cela a fonctionné ! Pour la sélection je vais continuer à essayer de trouver une solution, mais dans le pire des cas c'est fonctionnel et je mettrais en gras de bien cliquer sur le logo.

[Ariane Web et Plus]

Ce n'est pas trés compliqué à faire mais comme je ne connais pas votre thème je ne peux pas vous dire, c'est dans le .tpl de la page produit. Il faudrait sortir le span du texte du span carré de couleur mais attention dans ce cas ma modife ne va plus fonctionner, mais ca sera simple à faire. La c'est un peu compliqué car il y ce span dans le span.

 

Bonne journée

[Design by Rhino]

Salut Sebchapo, je cherchais à faire de même sur mon site, voir apparaître le nom des couleurs sur les boutons radio lorsque l'on passe la souris dessus.

Je dois dire que je découvre PS depuis une semaine, mais quand un truc me turlupine et bien je m'acharne !

J'ai vu que les articles composés de plusieurs couleurs présents en amont dans les pages, ont un slider d’aperçu rapide qui laisse apparaître les boutons couleurs avec leurs noms en étiquette.

J'ai donc regardé sur d'autres sites et j'ai remarqué que je n'avais pas l'attribut title sur ma ligne.

Voilà ce que j'ai fait :

themes>classic>templates>catalog>_partials>product-variants.tpl

ajouter à la fin de la ligne 45

 title="{$group_attribute.name}"

la fin de la ligne donne ceci : Je l'ai copié depuis la ligne 37

45 <input class="input-color" type="radio" ... checked="checked"{/if} title="{$group_attribute.name}">

En souhaitant que ça fonctionne pour toi, en effet perso j'avais crée des attributs pour donner des noms en dessous des boutons... Galère car ça duplique les déclinaisons et ça peu vite charger le serveur surtout sur un petit hébergement.

Voilà le résultat 

 

 

 

Edited April 6, 2019 by Design by Rhino (see edit history)