Jump to content

Comment modifier la taille d'une texture en déclinaison de produit?

N°6
 Share

Recommended Posts

N°6 Apprentice

N°6

Posted
Posted (edited)

Bonsoir à toutes et à tous.

 

Quelqu'un aurait -il la gentillesse de m'indiquer une solution pour agrandir la taille des textures en vignettes dans les déclinaisons d'un produit qui, par défaut, est de 20px par 20px ? Je souhaiterai les agrandir en 40px par 40px.

Je ne parle de modifier la taille d'une déclinaison couleur, cela Atch l'a expliqué il y a quelques années déjà. Par contre je n'ai rien trouvé concernant la modification de la taille de l'image/ texture qui peut remplacer la couleur d'un produit.

Merci par avance pour votre aide et votre réponse.

 

Bonjour chez vous!

Edited by N°6 (see edit history)
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Bonsoir à toutes et à tous.

 

Quelqu'un aurait -il la gentillesse de m'indiquer une solution pour agrandir la taille des textures en vignettes dans les déclinaisons d'un produit qui, par défaut, est de 20px par 20px ? Je souhaiterai les agrandir en 40px par 40px.

Je ne parle de modifier la taille d'une déclinaison couleur, cela Atch l'a expliqué il y a quelques années déjà. Par contre je n'ai rien trouvé concernant la modification de la taille de l'image/ texture qui peut remplacer la couleur d'un produit.

Merci par avance pour votre aide et votre réponse.

 

Bonjour chez vous!

 

bonjour,

 

il vous suffit de modifier le css correspondant à la taille de cette couleur puisque cela reste une couleur, puis de charger des images de 40x40 pour chaque texture.

Link to comment
Share on other sites
N°6 Apprentice

N°6

Posted
  • Author
Posted

Bonsoir et merci pour la réponse!

Malheureusement j'ai essayé d'intégrer l'image de la texture en 40x40, mais elle ne s'affiche qu'en 20x20, contrairement au fond couleur qui s'affiche en arrière en 40x40.

Il y a sûrement un fichier qui doit être modifié pour passer de 20x20 à 40x40 autre que celui du css que j'ai déjà modifié.

Un vrai casse-tête...

Bonjour chez vous!

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Bonjour,

 

dans le product.tpl de votre template à la ligne 211 vous avez un truc comme cela :

 


{if isset($colors) && $colors}
       <!-- colors -->
       <div id="color_picker">
           <p>{l s='Pick a color:' js=1}</p>
           <div class="clear"></div>
           <ul id="color_to_pick_list">
           {foreach from=$colors key='id_attribute' item='color'}
               <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
           {/foreach}
           </ul>
           <div class="clear"></div>
       </div>
       {/if}

à remplacer par 


{if isset($colors) && $colors}
       <!-- colors -->
       <div id="color_picker">
           <p>{l s='Pick a color:' js=1}</p>
           <div class="clear"></div>
           <ul id="color_to_pick_list">
           {foreach from=$colors key='id_attribute' item='color'}
               <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="40" height="40" />{/if}</a></li>
           {/foreach}
           </ul>
           <div class="clear"></div>
       </div>
       {/if}

Link to comment
Share on other sites
N°6 Apprentice

N°6

Posted
  • Author
Posted

Bonsoir,

J'ai aussi effectué la modif de code dans le product.tpl du template, mais cela ne donne aucun changement, il doit y avoir encore un autre endroit à modifier...j'ai mis une couleur bleue qui s'affiche en 40x40 derrière la texture qui s'affiche toujours en 20x20. Il y a un truc, mais lequel?

 

Bonjour chez vous!

Link to comment
Share on other sites
N°6 Apprentice

N°6

Posted
  • Author
Posted

Bonsoir,

 

Oui, le cache a bien été vidé et re-vidé pour encore plus de sûreté. J'ai même à tout hasard effectué une régénération des images du site, mais rien de rien.

Non désolé, le site est en cours de réalisation, je ne préfère pas pour le moment donner accès au site. Mais en tout cas très sympa de vouloir m'aider; Je pense que je vais arrêter de me prendre la tête avec cela et bosser avec des textures en 20x20px, même si je trouve cela riquiqui. Je pense que je vais intégrer une loupe sur les pages produits :) pour ceux qui ont des problèmes de vue de près.

Mais apparemment c'est un problème souvent soulevé mais jamais vu sur le forum une seule personne qui ai indiqué la manip correcte (je suis remonté jusqu'à des posts de 2009)

En tout cas merci encore.

Bonne nuit,

Bonjour chez vous!

Link to comment
Share on other sites
  • 7 months later...
Freet Newbie

Freet

Posted
Posted

Bonjour,

 

J'ai actuellement exactement le même problème. J'ai modifié le css et le tpl, il y a bien agrandissement des carrés et des couleurs, mais les images des textures restent en 20x20px.

Quelqu'un aurait-il la solution ? Cela fait des heures que je cherche partout sans trouver.

 

Merci d'avance !

Link to comment
Share on other sites
  • 3 weeks later...
zellige Newbie

zellige

Posted
Posted (edited)

Bonjour,

 

Voici la solution :

 

dans le product.tpl de votre template à la ligne 211 vous avez un truc comme cela :

 


{if isset($colors) && $colors}
	<!-- colors -->
	<div id="color_picker">
		<p>{l s='Pick a color:' js=1}</p>
		<div class="clear"></div>
		<ul id="color_to_pick_list">
		{foreach from=$colors key='id_attribute' item='color'}
			<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
		{/foreach}
		</ul>
		<div class="clear"></div>
	</div>
	{/if}

à remplacer par 


{if isset($colors) && $colors}
	<!-- colors -->
	<div id="color_picker">
		<p>{l s='Pick a color:' js=1}</p>
		<div class="clear"></div>
		<ul id="color_to_pick_list">
		{foreach from=$colors key='id_attribute' item='color'}
			<li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" [color=#ff8c00]width="40" height="40"[/color] />{/if}</a></li>
		{/foreach}
		</ul>
		<div class="clear"></div>
	</div>
	{/if}

 

puis dans le fichier product.css :

 

modifier la ligne 

#color_picker #color_to_pick_list a.color_pick{display:block; height:100px; width:100px; -webkit-border-radius:3px; border-radius:3px; cursor:pointer;}

 

De mon côté ça fonctionne !

:)

Edited by zellige (see edit history)
Link to comment
Share on other sites
Freet Newbie

Freet

Posted
Posted

Bonjour Zellige et merci de ta réponse.

Ce sont les modifications que j'avais faites effectivement mais ça n'a pas fonctionné.

Quoi qu'il en soit j'ai trouvé une alternative qui consiste à agrandir les miniatures au survol de la souris via un petit bout de code Js.

 

Bonne journée !

Link to comment
Share on other sites
  • 5 weeks later...
m0zZa Newbie

m0zZa

Posted
Posted

Bonsoir à tous,

J'ai longuement chercher comme vous comment faire et j'ai enfin trouvé

Il suffit de rajouter ces instructions dans le fichier global.css

 

#primary_block a.color_pick {

display: block;

width: 100px;

height: 100px;

border: 1px solid #666;

cursor: pointer

}

#primary_block a.color_pick img

{

width:100px;

height:100px;

}

 

 

A bientôt

 

m0zZa

Link to comment
Share on other sites
  • 9 months later...
noroxfiles Newbie

noroxfiles

Posted
Posted

<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br />... la ligne 308, dans product.tpl 


Bonsoir,

Oui, le cache a bien été vidé et re-vidé pour encore plus de sûreté. J'ai même à tout hasard effectué une régénération des images du site, mais rien de rien.
Non désolé, le site est en cours de réalisation, je ne préfère pas pour le moment donner accès au site. Mais en tout cas très sympa de vouloir m'aider; Je pense que je vais arrêter de me prendre la tête avec cela et bosser avec des textures en 20x20px, même si je trouve cela riquiqui. Je pense que je vais intégrer une loupe sur les pages produits :) pour ceux qui ont des problèmes de vue de près.
Mais apparemment c'est un problème souvent soulevé mais jamais vu sur le forum une seule personne qui ai indiqué la manip correcte (je suis remonté jusqu'à des posts de 2009)
En tout cas merci encore.
Bonne nuit,
Bonjour chez vous!

<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br />... la ligne 308, dans product.tpl 

Link to comment
Share on other sites
  • 3 weeks later...
rider3i1 Newbie

rider3i1

Posted
Posted

La modif est à faire dans le fichier product.tpl du theme actif.

 

Aux alentours des lignes 300, vous devez avoir "<div class="product_attributes">"

 

Vous aller donc avoir en dessous "{elseif ($group.group_type == 'color')}"

 

Et quelques lignes encore en dessous vous trouver cette ligne (pour moi ligne 389) : "<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>"

 

A modifier en : "<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="40" height="40" /><br>"

Link to comment
Share on other sites
  • 1 year later...
LoopingOfficiel Newbie

LoopingOfficiel

Posted
Posted

Bonjour,

 

Je viens d'avoir le même problème. J'ai eu beau chercher, faire tout ce que vous avez expliquer et rien.. J'ai donc fait marcher mon petit cerveau et j'ai analysé le code css :

 

Et là, je suis tomber sur sa : 

 

http://prntscr.com/7228jf

 

Il suffit alors de remplacer les 2   20px  par la taille que vous souhaitez, vous enregistrer votre product.css , vous videz votre cache, actualiser votre page et MAGIE ! Sa marche :D

 

Pour ceux qui galère un peut, venez en MP je vous aiderais sans aucun problème :)

Link to comment
Share on other sites
lily fairy Newbie

lily fairy

Posted
Posted (edited)

merci pour ces explications

 

1ere question :

 

j ai modifié le .css comme indiqué (et rien modifié d autre)

j ai mis en  width: 44px; et  height: 30px;

ça fonctionne

 

mais le bouton panier à perdu de sa couleur !!

pourquoi ? :/

 

 

ex10.png

 

2 eme question : doit on forcément modifié le .tpl ??
 

Edited by lily fairy (see edit history)
Link to comment
Share on other sites
  • 4 months later...
fynndel Newbie

fynndel

Posted
Posted (edited)

salut

 

perso j'ai modifié les valeurs dans product.css de mon theme en place..... les 26px (carré du contour) et 22 px (carré de l'image ou de la couleur)

version 1.6 de prestashop

 

et ça marche :)

    #attributes .attribute_list #color_to_pick_list li {
      float: left;
      margin: 0 3px 3px 0;
      padding: 1px;
      border: 1px solid #d6d4d4;
      clear: none;
      width: 26px;
      height: 26px; }
      #attributes .attribute_list #color_to_pick_list li a.color_pick {
        display: block;
        height: 22px;
        width: 22px;
        cursor: pointer; }
        #attributes .attribute_list #color_to_pick_list li a.color_pick img {
          display: block;
          height: 22px;
          width: 22px; }
      #attributes .attribute_list #color_to_pick_list li.selected {
        border: 1px solid #4d4d4d; }
Edited by fynndel (see edit history)
  • Like 2
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...