[help] choisir couleur produit grâce aux miniatures

[Arnaud Drieux]

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 October 15, 2012 by arnaud1900 (see edit history)

[Arnaud Drieux]

Personne n'a d'idée?

[Arnaud Drieux]

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

[Arnaud Drieux]

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 October 15, 2012 by arnaud1900 (see edit history)

[Arnaud Drieux]

UP ? -__-

[Arnaud Drieux]

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 October 22, 2012 by arnaud1900 (see edit history)

[Arnaud Drieux]

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 October 24, 2012 by arnaud1900 (see edit history)

[Laulau2912]

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?

[Arnaud Drieux]

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 January 29, 2013 by arnaud1900 (see edit history)

[paiementprestashop]

cla fonctionne bien :-)

Edited August 9, 2013 by paiementprestashop (see edit history)

[patrmich]

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

[meubleet]

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

[votre-evenement.be]

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>