Jump to content
sebchapo

Afficher le nom des couleurs

Recommended Posts

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 !

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Design by Rhino (see edit history)

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More