Jump to content

[help] choisir couleur produit grâce aux miniatures


Recommended Posts

Bonjour à toutes et à tous.

 

J'ai un petit soucis que je n'arrive pas à régler.

 

Je m'explique :

Dans les versions précédentes de prestashop, lorsqu'on était sur un produit, on pouvait cliquer sur une miniature afin de choisir la couleur voulue (par exemple).

 

Hors aujourd'hui, lorsqu'on clique sur ces même miniatures, elles s'ouvrent en thickbox et la couleur n'est pas sélectionnée.

 

Du coup pour y remédier, j'ai essayer d'insérer le foreach du color picker dans la liste des miniatures, mais cela ne fonctionne pas.

 

Est-ce que quelqu'un pourrait m'aider?

 

 

Merci d'avance.

Edited by arnaud1900 (see edit history)
Link to comment
Share on other sites

Je met le code que j'ai essayé, peut-être que quelqu'un pourra me dire comment remédier à ces erreurs

 

Code de base :

 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}
 <li id="thumbnail_{$image.id_image}">
  <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if (isset($image.cover) AND $image.cover == 1) OR (!isset($image.cover) AND $smarty.foreach.thumbnails.first)}shown{/if}" title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
  </a>
 </li>
 {/foreach}

 

Code modifié :

 {foreach from=$images item=image name=thumbnails}
 {assign var=imageIds value="`$product->id`-`$image.id_image`"}

  {if isset($colors) && $colors}
   {foreach from=$colors key='id_attribute' item='color'}
   <li id="thumbnail_{$image.id_image}">
<a onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');"  title="{$image.legend|htmlspecialchars}">
   <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
  </a>
   </li>
   {/foreach}
  {else}
  <li id="thumbnail_{$image.id_image}">
	    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if (isset($image.cover) AND $image.cover == 1) OR (!isset($image.cover) AND $smarty.foreach.thumbnails.first)}shown{/if}" title="{$image.legend|htmlspecialchars}">
		 <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
	    </a>
  </li>
  {/if}

 {/foreach}

 

Bon forcément un foreach dans un foreach, ça me duplique tout, mais j'ai l'impression de pas être loin du but :/

 

Help, please

Link to comment
Share on other sites

Si dans product.tpl à la ligne, et que j'ai jouté le onclick... :

 

 

<li id="thumbnail_{$image.id_image}">
<a onclick="updateColorSelect({$id_attribute|intval});$('#wrapResetImages').show('slow');" title="{$image.legend|htmlspecialchars}" >

 

et que je change le

updateColorSelect({$id_attribute|intval})

par

updateColorSelect(4)

cela fonctionne bien. Le problème c'est que je n'arrive pas à isoler les id couleurs qui ont été associées aux miniatures....

 

 

Je sombre.....

Edited by arnaud1900 (see edit history)
Link to comment
Share on other sites

Vraiment personne n'aurait 2 min à m'accorder ?

 

EDIT: Je viens de voir une table interessante : ps_product_attribute_image.

Elle présente l'id de l'image en fonction de l'id de l'attribut.

 

Donc en gros il faudrait générer une variable qui utiliserait l'id de l'image pour pouvoir utiliser la bonne couleur.

 

Voici une fonction que je viens de faire au cas ou :

public function idAttributeImage($idimage)
{
 $result = Db::getInstance()->Execute('
 SELECT `id_product_attribute`
 FROM `'._DB_PREFIX_.'ps_product_attribute_image`
 WHERE `id_image` = '.(int)$id_image);
 $result = mysql_fetch_array($result);
 return $result['id'];
}

Edited by arnaud1900 (see edit history)
Link to comment
Share on other sites

Je me répond à moi-même.

 

 

Donc voici la fonction :

public function idAttributeImage($idimage)
{
 return Db::getInstance()->getValue('
 SELECT `id_product_attribute`
 FROM `'._DB_PREFIX_.'product_attribute_image`
 WHERE `id_image` = '.(int)$idimage);
}

 

Puis pour l'exemple je vais appliquer le résultat sur le li en lui ajoutant une classe qui aura l'id de l'attribut:

<li class="id_{$product->idAttributeImage($image.id_image)}" id="thumbnail_{$image.id_image}">

 

Donc pour le moment ça fonctionne, mais c'est pas le bon id que je viens de récupérer ¬_¬.

 

Il faudrait qu'en fonction de l'image, je récupère l'id de la couleur associée...

Edited by arnaud1900 (see edit history)
Link to comment
Share on other sites

  • 3 months later...

Bonjour Arnaud,

 

Je ne comprends pas trop ton problème car en fait, par défaut, moi j'ai l'inverse.

 

Peut-être peux-tu m'aider? Je voudrais que les images de mes attributs (les "textures") s'affichent en thickbox lorsque le client clique dessus... C'est bien ce que tu avais au départ?

 

Pourrais-tu me copier ton code et me dire dans quel fichier il doit aller stp? Je te remercie beaucoup.

 

Est-ce que tu as trouvé la solution pour ton problème?

Link to comment
Share on other sites

Bonjour Axoo

 

Mon problème était (oui, depuis j'ai un peu laissé tomber…) de mettre à jour la sélect-list lors que tu cliques sur une des miniatures.

 

Exemple: L'ipod avec plusieurs couleurs, il a plusieurs miniatures de couleurs différentes, et j'aurai aimé que lorsque tu cliques sur la miniature de l'ipod vert par exemple, que ça ouvre la thickbox et que ça change la référence couleur dans la select-list.

 

 

Pour ton problème, ça se situe dans le fichier product.tpl vers la ligne 221.

 

Il faut travailler sur cette ligne:

<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>

 

 

Là j'ai fait un test en remplaçant le code par celui là:

 

<li>
<a id="color_{$id_attribute|intval}" rel="other-views" class="thickbox {if (isset($image.cover) AND $image.cover == 1) OR (!isset($image.cover) AND $smarty.foreach.thumbnails.first)}shown{/if}" 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>

 

Et ça fonctionne à moitié. C'est à dire quand je clique sur une texture, ça met bien à jour la texture dans la select-list (fonction de base) et ça ouvre bien la thickbox mais par contre dedans, il y a un message d'erreur :

 

The requested content cannot be loaded.Please try again later.

 

 

Je vais voir ce que je peux faire pour t'aider.

Edited by arnaud1900 (see edit history)
Link to comment
Share on other sites

  • 3 weeks later...
  • 11 months later...

Bonjour Arnaud,

Je trouve que dans Prestashop 1.4, l'affichage du choix de la couleur était bien plus ergonomique et surtout doublement intuitif pour le client.

Ainsi, sur la page produit, je souhaiterais avoir avec Prestashop 1.5.6 la même possibilité qu'avec 1.4.7, c'est à dire :

- proposer le choix de la couleur, à la fois sous forme de palette (color picker) et de menu déroulant (drop down)
- faire en sorte que la sélection d'une couleur dans la palette déclenche l'affichage du nom de la couleur correspondante dans le menu déroulant.


Les changements que vous préconisez permettent-ils
- d'avoir ce double affichage
- de synchroniser le choix dans la palette avec celui de la liste déroulante
- d'afficher l'image assignée à l'attribut, que celui-ci soit choisi dans la palette de couleur ou dans la liste déroulante

Merci beaucoup par avance pour tout élément de réponse.

Patrick

Link to comment
Share on other sites

Bonjour,

 

Très pertinent ce topic, c'est exactement ce que je cherche.

En effet, dans Presta plus ancien, on avait la double proposition par palette et liste déroulante, synchronisées avec l'affichage du bigpic en 300/300. Maintenant, si vous avez une palette de couleur, on ne vous affiche que la palette, et la référence plus bas, synchronisée, mais aucun texte pour confirmer au client qu'il a bien cliqué sur la couleur qu'il souhaite.

Je suis novice et pas programmeur, bidouilleur, je cherche le nom de la variable dans laquelle se trouve le nom de la couleur sélectionnée par le client pour la "printer" à la suite de la référence, afin de donner une confirmation textuelle au client du nom de la couleur choisie.

Je suis allé dans product.js, mais je n'ai pas tout compris dans la formation de la variable pour la coller dans le tpl sans faute je crois que c'est tout en bas du fichier js, ligne 724 et suivantes, mais je ne sais pas comment l'écrire.

Merci pour une réponse éventuelle.

 

Rémi

Link to comment
Share on other sites

  • 1 year later...

Bonjour,

 

Très pertinent ce topic, c'est exactement ce que je cherche.

En effet, dans Presta plus ancien, on avait la double proposition par palette et liste déroulante, synchronisées avec l'affichage du bigpic en 300/300. Maintenant, si vous avez une palette de couleur, on ne vous affiche que la palette, et la référence plus bas, synchronisée, mais aucun texte pour confirmer au client qu'il a bien cliqué sur la couleur qu'il souhaite.

Je suis novice et pas programmeur, bidouilleur, je cherche le nom de la variable dans laquelle se trouve le nom de la couleur sélectionnée par le client pour la "printer" à la suite de la référence, afin de donner une confirmation textuelle au client du nom de la couleur choisie.

Je suis allé dans product.js, mais je n'ai pas tout compris dans la formation de la variable pour la coller dans le tpl sans faute je crois que c'est tout en bas du fichier js, ligne 724 et suivantes, mais je ne sais pas comment l'écrire.

Merci pour une réponse éventuelle.

 

Rémi

 

 

si c'est pas trop tard ...

:-)

//dans product.js de ton thème

function colorPickerClick(elt)
{
	id_attribute = $(elt).attr('id').replace('color_', '');
	id_attribute2 = $(elt).attr('name');
	$(elt).parent().parent().children().removeClass('selected');
	$(elt).fadeTo('fast', 1, function(){
								$(this).fadeTo('fast', 0, function(){
									$(this).fadeTo('fast', 1, function(){
										$(this).parent().addClass('selected');
										});
									});
								});
	$(elt).parent().parent().parent().children('.color_pick_hidden').val(id_attribute);
	$(elt).parent().parent().parent().children('.color_pick_hidden2').html(id_attribute2);
	findCombination();
}

et dans ton product.tpl

//ajouter
{assign var="default_colorpicker2" value=""}
//après 
{assign var="default_colorpicker" value=""}

ajouter tjs dans product.tpl

//ajouter
{$default_colorpicker2 = $colors.$id_attribute.name}
//après 
{$default_colorpicker = $id_attribute}

et ajouter

//ajouter juste avant 
<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}" value="{$default_colorpicker|intval}" />
//cette ligne-ci
<h3 class="color_pick_hidden2" name="{$groupName|escape:'html':'UTF-8'}">{$default_colorpicker2|escape:'html':'UTF-8'}</h3>
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
×
×
  • Create New...