Jump to content

[Résolu] Cacher ou afficher les champs de personnalisation en fonction d'une déclinaison en javascript (jquery)


besky

Recommended Posts

Bonjour,

Je vous explique ma situation :

Je suis en train de créer une boutique de gravure sur objets. Les clients ont le choix, grâce aux déclinaisons, de faire graver 1, 2, 3 ou 4 photos sur chacun des produits qu’ils achètent. Ils doivent donc envoyer autant de photos qu’il n’y en a à gaver sur l’objet.

Actuellement il est possible d’ajouter plusieurs champs d’upload de photos, seulement j’ai peur que ca embrouille le client de voir 4 champs d’upload alors qu’il ne désire qu’une seule photo sur son objet.

Je souhaiterais donc qu’en fonction du choix du client de graver 1, 2 , 3 ou 4 photos sur son objet, il apparaisse 1, 2, 3 ou 4 champs d’upload de photos. Si possible sans avoir à recharger la page.

Mes questions :

Connaissez vous un module ou une méthode qui soit capable de réaliser ce que je demande ?

Sinon pourriez vous m’indiquer comment faire pour inclure un pont, disons en javascript ou un autre langage, entre le choix de déclinaison et les champs de personnalisation du produit sans pour autant modifier les fichiers sources de prestashop ?

Merci par avance de votre aide.

Link to comment
Share on other sites

Personne n'a, ne serai-ce qu'une suggestion ?

Je suis preneur de tous les conseils pour réussir à faire ce que je souhaite, un petit effort s'il vous plais. Je mettrais le module ou l'astuce en ligne gratuitement par la suite pour que la communauté puisse en profiter.

Link to comment
Share on other sites

Bonjour Broceliande.

Si tu as des pistes à me suggérer je suis preneur, pour le moment je débute sur prestashop et j'avoue que l'intégration de modules sur ce CMS est encore flou pour moi.

Je suis tout à fait conscient que pour ce type de fonctionnalité assez particulière les dev ne peuvent pas me faire un module rien que pour moi. Ceci dit j'aurais besoin d'aide et de conseils afin de développer un module pouvant servir à la communauté.

Si quelques bonnes âmes peuvent m'orienter afin de créer un module de ce type, sans pour autant avoir à modifier le cœur de prestashop je leur en serait super reconnaissant.

Cordialement,

Link to comment
Share on other sites

Bon d'après mes observations, j'ai défini qu'il fallait que dans le fichier de thème "product.tpl" il fallait que je remplace le nombre de champs d'upload, si je ne me trompe représenté par la variable "$customizationFields", par le nombre du champ de ma caractéristique (nombre de photos) renvoyé par l'action javascript suivante:

onchange="[removed]findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');

Seulement étant assez peu doué en javascript je ne sais pas, d'une si je résonne bien et de deux quelle est la variable à utiliser.

Est-ce que quelqu'un pourrait me dire si je suis sur la bonne voie et si c'est le cas, la variable à utiliser pour remplacer le nombre de champs définis dans l'administration ou si je suis à coté de la plaque (ce dont j'ai bien peur) ?

Merci :)

Link to comment
Share on other sites

Je te dis ça de mémoire car je n'ai pas le temps de faire plus pour l'instant, mais peut être que ça peut t'aider:
$customizationFields est en effet la variable qui t'intéresse, sauf que ce tableau peut contenir autre chose que des champs d'upload .
Pour tous tes produits concernés, il faudra que tu crées au moins donc le nombre de champs max d'upload que tu souhaites dans le BO, et masquer ceux que tu ne veux pas afficher.
Il faudra donc tester leur type "si type upload alors , si on a le compte indiqué pour ce produit on ne l'affiche pas"
Ca peut marcher

Pourquoi au fait faire ça en javascript lorsque tu peux faire ces manip dans le tpl ?

Link to comment
Share on other sites

Bonjour Broceliande et merci de m'aider.

Qu'appel-tu exactement "faire ca dans le tpl" ?

Je souhaite le faire en javascript pour éviter d'avoir à recharger la page.

Ceci dit je suis peut-être totalement a coté de la plaque, comme je l'ai dis je ne connais pas encore trop le fonctionnement de PS, donc j'essaie de faire un peu comme je peux pour faire au mieux.

Si tu as une méthode plus simple ou en tous cas plus abordable pour moi je suis preneur :)

Link to comment
Share on other sites

Non non, ton approche est bonne , je suis allé trop loin dans la complexité (lol) en pensant que tu voulais que le nombre de champs d'uploads soit fonction du produit.

Sorry de pas pouvoir creuser plus par contre, pour l'instant, je n'ai pas le temps de tester pour te donner des bouts de codes.

Link to comment
Share on other sites

Bonjour,

Je galère, je galère :(

Le truc c'est que je ne trouve pas quelle variable renvoi la fameuse action javascript "onchange" suivante:




Est-ce que quelqu'un peut m'éclairer sur ce point s'il vous plais ?

Ps: j'ai été obligé de mettre des espaces dans le javascript sans quoi le code est supprimé

Link to comment
Share on other sites

Je récapitule à la fois pour moi et pour ceux qui voudrait m'aider ou seraient interessés.

En gros à l'arrivé sur la page il faut que je cache mes éléments d'upload ayant une autre id que "img0" et que dans mon "onchange" de mon attribut je place un code du genre:

if valeur_de_l'attribut >= 1 && $customizationfield >= 1 { $('#img{$customizationFiled}').show('slow'); }

Ai-je bon ?

Si oui le seul problème c'est de récupérer la valeur de l'attribut à moins que ce ne soit par " findCombination();" qu'il faille la récupérer ?

Pouvez vous me dire s'il vous plais si je suis sur la bonne voie ?

Merci.

Link to comment
Share on other sites

findCombination() met à jour les images , prix etc en fonction du choix et en tenant compte de tous les groupes, mais toi tu ne souhaites agir que sur un seul groupe d'attributs, celui qui indique le nombre de photos à imprimer...

Personnellement je ferais un module qui charge un javascript dans lequel un dom ready commence par masquer tous les champs d'upload (sauf 1 peut être puisque surement que le nb de photo par défaut ne peut être nul ).

Ensuite tu ajoutes un event sur le select d'upload : tu peux faire ça en t'assurant qu'il soit toujours à la même position , ainsi en jquery tu le topes facile en t'appuyant sur son id type group_1 , group_2 etc selon sa position.
Dans la fonction event il te suffit de récupérer la valeur du sélect et agir en conséquence.

De cette manière , tu ne risque en rien de casser le product.js et son assez complexe findCombination() qui je pense , ne te sera pas d'une grande utilité

Si je trouve le temps , j'essayerais de te faire un bout de code demain...

Link to comment
Share on other sites

Merci Broceliande je vais essayer de suivre tes indications et de bien les comprendre pour commencer :)

Si tu as le temps ce serait vraiment gentil de ta part, mais je vais tout de même essayer par moi même et je te tiens au courant.

Encore merci de ton aide :)

Link to comment
Share on other sites

Bon décidément c'est pas simple tout ça. J'ai pas trop pigé comment charger un javascript et le DOM READY, tu pourrais être plus précise sur ces points s'il te plais Broceliande ?

En plus entre temps j'ai eu quelques déconvenues avec ma voiture qui a cru bon d'embrasser un rail de rocade après une petite valse et j'ai donc pas trop eu le temps de creuser plus profond.

Merci :)

Link to comment
Share on other sites

  • 2 weeks later...

J'ai toujours pas réussi mon affaire :( c'est pas que je commence à désespérer mais presque lol

Si quelqu'un à des explications sur les explications de Broceliande je suis preneur s'il vous plais :)

Merci !

Link to comment
Share on other sites

Bon je résume ma situation:

Je souhaiterais que quand un client souhaite plusieurs photos sur son produit, il y ai autant de champs de champs de personnalisation qui s'affichent que le nombre de photos choisi.

- Pour ça, il faut donc que je cache mes champs d'upload de photos qui ont un id supérieur à "img1" au chargement de la page.

- Ensuite il faut que je récupère la valeur du champs de mon attribut "nombre de photos".

- Et il faut donc que j'affiche uniquement les champs de personnalisation ayant un id inférieur à la valeur de "nombre de photos".

- Mon problème c'est que je suis vraiment pas doué en javascript et qu'en plus j'ai vraiment beaucoup de mal avec smarty.


J'ai déjà compris qui fallait que j'intervienne dans la page de mon thème "product.tpl" (thème d'origine de prestashop) et que les modifications à effectuer se trouve quelque part dans le "foreach" de "uploadable_files". Seulement j'ai besoin d'aide s'il vous plais pour réaliser cela. Alors si certains d’entre vous peuvent me donner des pistes à suivre, des exemples de codes ou des choses comme ça, je vous serais infiniment reconnaissant.

Merci d'avance.

Link to comment
Share on other sites

J'ai enfin réussi ce que je voulais faire. Je dois le dire cela m'a pris un temps fou pour trouver la solution, au final c'était plutôt simple à réaliser, il fallait juste savoir comment faire.

Donc je vous explique.

Ma déclinaison a l'id "group_4"

Mes valeurs de déclinaison à partir de "2" sont "22" "23" "24" etc... (je n'utilise au maximum que 4 photos et je laisse le premier champ d'upload toujours visible donc je n'ai pas besoin de plus. À vous d'adapter à votre sauce)

et j'ai ajouté un id à mes "" des champs d'upload "id="img{customisationField}"

Voici ce que donne le code des mes champs d'upload:

>
</pre>
<ul>
   {counter start=0 assign='customizationField'}
   {foreach from=$customizationFields item='field' name='customizationFields'}
       {if $field.type == 0}
{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                 {if isset($pictures.$key)}getUrlWith('deletePicture', $field.id_customization_field)}">{/if}

{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if} //modif perso pour afficher le texte à gauche du champ
                     <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}"  class="customization_block_input {if isset($pictures.$key)}filled{/if}" />{if $field.required}*{/if}


            {counter}
        {/if}
   {/foreach}
</ul>



Et j'ai insérer ce script javascript dans la page "product.js" (theme>votre-theme>js)

$(document).ready(function() {

// Au chargement de la page les champs 2,3,4 sont cachés

   $("#img1").hide();

   $("#img2").hide();

   $("#img3").hide();

   $("#group_4").change(function() {

// si l'utilisateur sélectionne l'option 2 (il veut 2 photos)

       if ( $("#group_4").val() == "22"){ 

           $("#img1").show();

           $("#img2").hide();

           $("#img3").hide();

       }


// si l'utilisateur sélectionne l'option 3 (il veut 3 photos)

       else if ( $("#group_4").val() == "23"){

           $("#img1").show();

           $("#img2").show();

           $("#img3").hide();

       }

//ainsi de suite

       else if ( $("#group_4").val() == "24"){

           $("#img1").show();

           $("#img2").show();

           $("#img3").show();

       }

// sinon on cache tout

       else{ 

           $("#img1").hide();

           $("#img2").hide();

           $("#img3").hide();

       }

   });

//si au chargement de la page l'option 2 est sélectionnée

   if ( $("#group_4").val() == "22"){ 

       $("#img1").show();

       $("#img2").hide();

       $("#img3").hide();

   }

//si au chargement de la page l'option 3 est sélectionnée

   else if ( $("#group_4").val() == "23"){

       $("#img1").show();

       $("#img2").show();

       $("#img3").hide();

   }

//Ainsi de suite

   else if ( $("#group_4").val() == "24"){

           $("#img1").show();

           $("#img2").show();

           $("#img3").show();

   }

});



C'est pas très optimisé je sais mais ça fonctionne parfaitement

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Bonjour,

Bravo pour ton travail formidable, il est vrai que le client sera moins perdu face à des champs de personnalisations qui n'apparaissent qu'en fonction de la déclinaison.
Cependant, je me permets de te demander quelle serait la modification pour le cas où le champs de personnalisation ne concerne pas un upload d'image mais les champs textes.

En te remerciant par avance

Yann

Link to comment
Share on other sites

bonjour,

Merci de tes encouragements.

Dans ce cas il faut que tu repère par exemple en faisant (sur firefox) "afficher le code source de la page" sur ta page produit ou alors avec firebug il te suffit de cliquer sur l'élément pour connaitre son ID.

Un champ texte dans le code se présente comme ça:

>
</pre>
<ul>

   Inscription à graver
   <input id="textField0" class="customization_block_input" type="text" value="" name="textField210">

</ul>



ici l'id du champ est "textField0" il y a fort à parier que le suivant pourra être "textField1" ce qui veux donc dire que dans ton javascript il faudra remplacer les "#img1", "#img2" etc... par "#textField0", "#textField1" etc... Et tu peux comme ça agir avec 15 ou 20 champs si tu le souhaite, bien qu'actuellement ce soit assez chiant à faire il est tout à fait possible de trouver des solutions plus acceptables.

J'espère que tu as bien tout compris.

Cordialement,
Besky

Link to comment
Share on other sites

  • 9 months later...
  • 2 months later...
  • 8 months later...
  • 9 months later...

Bonjour à tous, désolé de n'avoir pas posté la solution plus tôt, mais je vous prévient ce n'est malheureusement pas une solution "propre".

 

En fait j'ai rajouté du JQuery dans mon thème. Je vous mets le code mais je ne garantis pas que cela fonctionne en l'état pour les nouvelles version de PS. Faudra surement mettre un peu les mains dans le cambouis.

$(document).ready(function() {

	$("#img1").hide();

	$("#img2").hide();
	
	$("#img3").hide();
	
	$("#img4").hide();

	$("#img5").hide();
	
	$("#img6").hide();

	$("#img7").hide();
	
	$("#img8").hide();
	
	

	$("#group_4").change(function() {

		if ( $("#group_4").val() == "22"){

			$("#img1").show('slow');
			
			$("#img2").hide('slow');
			
			$("#img3").hide('slow');
			
			$("#img4").hide('slow');
			
			$("#img5").hide('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "23"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").hide('slow');
			
			$("#img4").hide('slow');
			
			$("#img5").hide('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "24"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").hide('slow');
			
			$("#img5").hide('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "25"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").show('slow');
			
			$("#img5").hide('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "26"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").show('slow');
			
			$("#img5").show('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "27"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").show('slow');
			
			$("#img5").show('slow');
			
			$("#img6").show('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}
		
		else if ( $("#group_4").val() == "28"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").show('slow');
			
			$("#img5").show('slow');
			
			$("#img6").show('slow');
			
			$("#img7").show('slow');
			
			$("#img8").hide('slow');

		}
		
				else if ( $("#group_4").val() == "29"){

			$("#img1").show('slow');
			
			$("#img2").show('slow');
			
			$("#img3").show('slow');
			
			$("#img4").show('slow');
			
			$("#img5").show('slow');
			
			$("#img6").show('slow');
			
			$("#img7").show('slow');
			
			$("#img8").show('slow');

		}

		else{

			$("#img1").hide('slow');

			$("#img2").hide('slow');
	
			$("#img3").hide('slow');
			
			$("#img4").hide('slow');
			
			$("#img5").hide('slow');
			
			$("#img6").hide('slow');
			
			$("#img7").hide('slow');
			
			$("#img8").hide('slow');

		}

	});

	if ( $("#group_4").val() == "22"){

		$("#img1").show();

		$("#img2").hide();
		
		$("#img3").hide();

	}
	
	else if ( $("#group_4").val() == "23"){

		$("#img1").show();
			
		$("#img2").show();
			
		$("#img3").hide();

	}
		
	else if ( $("#group_4").val() == "24"){

			$("#img1").show();
			
			$("#img2").show();
			
			$("#img3").show();

	}

});

Après il est certains que le code peut être largement amélioré, depuis j'ai un petit peu progressé dans le Jquery et je suis en train de refondre la boutique totalement donc j'aurais surement à le refaire pour un PS 1.5 donc je reviendrais vers vous pour poster un code un peu plus propre. Après si quelqu'un peut en faire un module et le poster ici gentiment ce serait super.

 

J'ai aussi modifié le thème il me semble pour ajouter l'id à chaque champ de customisation :

 

Au départ dans "product.tpl" vous devriez avoir un truc comme ça :

<ul id="uploadable_files" class="clearfix">
   {counter start=0 assign='customizationField'}
   {foreach from=$customizationFields item='field' name='customizationFields'}
	{if $field.type == 0}
		<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
			{if isset($pictures.$key)}
			<div class="customizationUploadBrowse">
				<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
				<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
					<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
				</a>
			</div>
			{/if}									
			<div class="customizationUploadBrowse">
				<h3><label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}{if $field.required}<sup>*</sup>{/if}</label></h3>								
				<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
			</div>
		</li>
    {counter}
    {/if}
   {/foreach}
</ul>

Il faut modifier la ligne :

<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

Par :

<li id="img{$customizationField}" class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

Voila, bon courage à vous !

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

De rien.

 

J’essaie actuellement de faire un système plus automatique qui détecterais le nombre de champs de customisation, le nombre de déclinaisons et qui pourrait donc éviter d'avoir à modifier dans le code les "21", "22", etc.

 

L'idéal serait un module mais je ne suis pas très calé en création de modules sous PS. Si quelqu'un se sent d'en faire un voici ce qu'il faudrait.

 

Plusieurs lignes avec deux champs "select" sur chaque ligne.

 

Le premier champ "select" sortirait les attributs et le second les champs de customisation.

 

Ainsi sur chaque ligne il serait possible de mettre en relation l’attribut désiré avec le champ de customisation correspondant.

 

Ensuite il suffit d'adapter le code JQuery (en l'améliorant quelques peu) pour inclure les variables dynamiquement.

Link to comment
Share on other sites

  • 1 year later...

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