Discussion :

[Tarnaud]

Salut tout le monde,

J'ai récemment mis en place un système de synchro sur des selects au niveau du panier d'un site e-commerce, pour avoir le bloc de configuration d'un produit en haut de page et en bas de page.
Or j'ai un bug que je n'arrive pas à traiter...

J'ai deux blocs avec deux liste de choix (Bloc du haut avec le champ Couleur 2 et Couleur 3 et bloc du bas avec Couleur 2 et Couleur3 aussi):
http://rct.madeinforu.com/marque/sis...leu-outremer-2

Il y a des règles auxquelles je ne peux pas toucher qui ont été mises en place sur le premier bloc qui fait que lorsque Couleur 2 est modifié, alors Couleur 3 est sélectionnable et les options du select sont préremplies...
J'ai indépendamment créé mon second bloc à l'image du premier et j'ai mis en place ma synchro de la façon suivante (Couleur 2 Haut synchronisée avec Couleur 2 Bas et Couleur 3 Haut synchronisée avec Couleur 3 Bas) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
var optionsAtt = jQuery('#attribute<?php echo $_attribute->getAttributeId() ?> > option').clone();
jQuery('#myselect<?php echo $_attribute->getAttributeId() ?>').append(optionsAtt);
jQuery('#attribute<?php echo $_attribute->getAttributeId() ?>').change(function() {
	var index = jQuery('option:selected', this).index();
	jQuery('#myselect<?php echo $_attribute->getAttributeId() ?>').each(function() { // For each other list
		jQuery(this).val(jQuery('option:eq(' + index + ')', this).val()); // Find the matching item
	});
});
jQuery('#myselect<?php echo $_attribute->getAttributeId() ?>').change(function() {
	var index = jQuery('option:selected', this).index();
	jQuery('#attribute<?php echo $_attribute->getAttributeId() ?>').each(function() { // For each other list
		jQuery(this).val(jQuery('option:eq(' + index + ')', this).val()); // Find the matching item
	});
	jQuery('#attribute<?php echo $_attribute->getAttributeId() ?>').change();
});
jQuery('#attribute<?php echo $_attributePREV ?>').click(function() {
	var optionsAtt = jQuery('#attribute<?php echo $_attribute->getAttributeId() ?> > option').clone();
	jQuery('#myselect<?php echo $_attribute->getAttributeId() ?> > option').remove();
	jQuery('#myselect<?php echo $_attribute->getAttributeId() ?>').append(optionsAtt);
});
</script>

=> Le bloc du haut concerne les attributs avec le prefixe "attribute", celui du bas "myselect".
Voilà mon bug : Après chargement de ma page, la première action est de modifier Couleur2 du bloc du bas, il synchronise bien avec le Couleur 2 du haut, mais le Couleur 3 du haut ne s'active pas car il n'y a pas eu de select manuel et de façon interactive sur le Couleur 2 du bloc du haut....
Je n'arrive pas à générer ce changement de valeur pour que le Couleur 3 devienne sélectionnable et que la liste de choix apparraisse....
J'ai pourtant essayé avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery('#attribute<?php echo $_attribute->getAttributeId() ?>').change();

...mais ça ne fonctionne pas...

Une idée?

Est-ce que j'ai été clair :-)

Thanks in advance !

[danielhagnoul]

Bonsoir

Si j'ai bien compris, il faut donner une valeur à un "select" ?

Exemple, $( "#robinets" ).val( "ref2" ); pour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="robinets" name="robinets" >
	<option value="">-- Références --</option>
	<option value="ref1">-- Ref1 --</option>
	<option value="ref2">-- Ref2 --</option>
	<option value="ref3">-- Ref3 --</option>
</select>

[Tarnaud]

En fait j'effectue aussi ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery(this).val(jQuery('option:eq(' + index + ')', this).val());

Qui est le même, le souci c'est qu'en exécutant ce code, il ne fait pas le traitement comme si c'était interactif...

[danielhagnoul]

Bonsoir

Je ne comprends rien à votre code PHP puisque je ne sais pas à quoi il correspond en JS au niveau ID.

J'ai testé votre page et je vois le problème.

Les mêmes couleurs partout, mais pas les mêmes values !

Je viens de faire un test en copiant collant le contenu des "select" dans ma page de test et je suis arrivé à la solution ci-dessous, reste à voir si elle fonctionne dans votre page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( "#myselect131").change( function(){
	var value = $( this ).val(),
		str = $( "option[value='" + value + "']", this ).text();
 
	$( "#attribute131" ).val( value );
 
	$( "#attribute212 > option" ).each( function( i, item){
		if ( $( item ).text() == str ){
			$( "#attribute212" ).val( $( item ).val() );
 
			return false;
		}
	});
});

[Tarnaud]

Sorry mais j'ai toujours le problème mais qui est repoussé entre la liste de choix Couleur 3 du haut et la liste de choix Couleur 3 du bas...

Je précise qu'il y a des codes en dehors de ceux que j'ai mis sur lesquels je ne peux pas modifier le comportement... La mise à jour de Couleur 3 par COuleur 2 en haut n'est pas géré par moi, et c'est cela que je n'arrive pas à reproduire...

Suis-je clair?
C'est effectivement assez compliqué de voir le soucis... donc n'hésitez pas à me dire si je manque d'infos (screenshots ou autres)

Thanks !

[danielhagnoul]

Désolé, je renonce à comprendre.

[Tarnaud]

Pas de soucis, c'était mon post qui était vraiment pas clair.
D'ailleurs mon code étant bon à ce niveau là, j'ai poussé pour modifier celui qui n'était pas le mien et c'est bon j'ai trouvé la solution...

Merci beaucoup en tout cas pour ta réactivité, et tes propositions !

Désolé, je renonce à comprendre.