Discussion :

[whoaloic]

Bonjour,
J'utilise woocommerce pour l'affichage d'un catalogue.
J'ai crée un champ personnalisé pour les variations de produit (il s'agit d'une éco participation que je souhaiterais ajouter au-dessous de chaque variation de prix).
Voir tuto : http://www.remicorson.com/woocommerce-c … ariations/

P.S : ce tuto n'est pas compatible avec WooCommerce 2.3 car les valeurs des champs personnalisés ne s'affichent pas dans le backend.
Voir le commentaire pour régler le bug : http://www.remicorson.com/woocommerce-c … ment-14146

Je bloque sur l'affichage dynamique des valeurs des champs personnalisés.
Lorsque le visiteur sélectionne une variation de produit (avec la liste déroulante), le prix et la référence changent selon la variation choisie.
Je souhaiterais la même chose pour mon champ personnalisé.
J'ai bien trouvé ce tuto sur github: https://gist.github.com/kloon/4228021#comment-1177265 mais ça ne fonctionne pas.

Voici le script utilisé :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
<?php
$custom_data = array();
foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $custom_field = get_post_meta( $variation_object->ID, 'variable_eco_participation', true);
 
    $custom_data[$variation_id] = array(
        "variable_eco_participation" => $custom_field
    );
    //echo $custom_field;
endforeach;
?>

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
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above
 
    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";
 
        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });
 
        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    });
});

Quand j'analyse le code avec firebug, je vois bien que mon script récupère les valeurs des champs mais ne les affichent pas dans la div class="selected-variation-custom-field".

Toute aide serait la bienvenue.

Cordialement.

[mathieu]

comme une impression de "déjà-vu"

affiche le contenu de "variation_custom_fields[ this.variation_id ]" et tu verras qu'il n'y a pas de champ "custom_field_value" dans cet objet

[whoaloic]

Hello,
je ne vois pas ce que tu veux dire...
Tu peux m'éclaircir ?

[mathieu]

pour afficher une variable en JavaScript, tu peux l'afficher dans la console avec "console.log(variable)" par exemple

[whoaloic]

Voici le bon code :

Code php :

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
<?php
$custom_data = array();
foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $variable_eco_participation = get_post_meta( $variation_object->ID, 'variable_eco_participation', true);
 
    $custom_data[$variation_id] = array(
        "custom_field_value" => $variable_eco_participation
    );
endforeach;
?>
<?php if (!empty($variable_eco_participation)) { ?>
           <span class='eco'>dont <strong>Eco-participation : </strong> <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span> €</span>
 <?php } ?>

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
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above
 
    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";
 
        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });
 
        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    });
});