Discussion :

[imajin23]

Bonjour,

J'ai une boutique en ligne; je souhaite permettre au visiteur de choisir la couleur de son article et de visualiser l'image correspondante. Ainsi lorsqu'il choisira par exemple la couleur rouge d'un article "pantalon" dans une liste déroulante, la photo du pantalon rouge s'affichera; s'il choisit la couleur bleu, la photo du pantalon rouge est automatiquement remplacée par une photo du pantalon bleu.

J'utilise jquery et ça fontionne trés bien dés lors que le nom dans la liste est le même que le nom de la photo. Par exemple: le label "bleu" appelle "bleu.jpg"...

Cependant, dés lors que j'insère un espace (label "bleu clair" avec image intitulée "bleu clair.jpg" ça ne fonctionne plus. Et je ne veux pas utiliser l'underscore (bleu_clair) car c'est pas joli comme label. Pourriez-vous m'aider svp ??

Voilà le code js

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
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript" src="http://localhost/magento/js/jquery/jquery-1.3.js"></script>
 
<script type="text/javascript">
jQuery(document).ready(function() {
 
    // On document ready hide all images first
    jQuery("#Entree img").hide();
    jQuery("#productImgEntree").hide();
 
    jQuery("#select_10").change(function() {
        // Hide all images on slect element change action
        jQuery("#Entree img").hide();
 
        // Get the value of selected option
        var optionValue = jQuery(this).attr('value');
        // Just a test to see if you're getting option value
        // alert(optionValue);
 
 
        // Get the content (aka inner HTML) of selected option
           var optionValueText = jQuery("#select_10 :selected").text();
        // Just a test to see if you're getting right selected option inner text
        alert(optionValueText);
        //alert('Selected option has value: ' + optionValue + ' and inner text: ' + optionValueText);
 
 
        // Show the image based on selected value
        // Whatch out, case sensitive...
        jQuery("#productImgEntree" + optionValueText).show();
    });
 
});
</script>

et voici le code dans ma page html

Code :

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

1
2
3
4
5
6
 <div id="Entree">
    <?php foreach ($this->getGalleryImages() as $_image): ?>
     <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=300,height=300,resizable=yes');return false;">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="no image" id="productImgEntree<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
       <?php endforeach; ?>   
       </div>

Merci de votre aide !!

[vermine]

Bonjour,

Je ne connais pas le jquery donc excusez ma question: Est-ce que le nom du label doit correspondre au nom de l'image ?
Sinon, appelez l'image bleu_clair.jpg et laissez le label bleu clair.

[Bovino]

Pourquoi récupérer les noms d'images par rapport au texte plutôt qu'au value ?

Code :

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

<select value="bleu_clair">Bleu clair</select>

Sinon, au pire, tu peux passer par une regexp et remplacer les espaces par des underscores.

[SpaceFrog]

+1000 Beef c'est fait pour ça le value de l'option