Situation: j'ai un tas de produits variables dans une boutique Wordpress WooCommerce. Sur le frontend, il existe un formulaire avec plusieurs entrées de sélection, qui permettent à l'utilisateur de configurer le produit avant de l'ajouter au panier. Le prix et les autres informations changeront selon les variations possibles, je dois donc en garder une trace.
Objectif: une fois le formulaire modifié par l'utilisateur, Woocommerce mettra à jour un champ masqué input.variation_id avec l'ID de la variante nouvellement sélectionnée. Chaque fois que cela change, je veux le savoir.
Apparemment, il y a quelque chose qui garde une trace des changements, qui fonctionne bien:
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
var id = $('input.variation_id').val();
console.log( id ); // fires, but returns empty
} );
Je suis également capable de lire la valeur de ce champ caché, avant qu'il ne soit modifié:
var id = $('input.variation_id').val();
console.log( id ); // returns correct value
Problème: mais lorsque j'essaye d'appeler la valeur à l'intérieur de cette fonction, je ne travaillerai pas.
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
console.log('form has changed'); // fires correctly
} );
J'ai essayé tout ce qui m'est venu à l'esprit. Si je le tape directement dans la console du navigateur, cela fonctionne, mais lorsque j'essaye de le récupérer avec la fonction ci-dessus, il est vide. Que puis-je faire?
J'ai déjà travaillé avec $('form.variations_form select').change(...); mais cela gâchera les variations et je veux m'assurer que Woocommerce a mis à jour toutes les informations avant d'effectuer mon action.
3 Réponses :
J'ai peut-être trouvé la réponse: woocommerce_variation_select_change ressemble à un notificateur alors que l'action souhaitée peut être effectuée avec:
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
console.log( variation ); // fires correctly and returns a Woocommerce product object
} );
Trouvé ici: https://sarathlal.com/get-variation-product-data-on-selecting-variation-options-woocommerce/
Pour obtenir l'ID de variante sélectionné (et certaines données de variante également) à l'aide de jQuery sur les pages de produit à variable unique, utilisez la cible suivante:
add_action( 'woocommerce_before_single_variation',
'action_wc_before_single_variation' );
function action_wc_before_single_variation() {
?>
<script type="text/javascript">
(function($){
$('form.variations_form').on('show_variation', function(event, data){
console.log( data.variation_id ); // The variation Id <=== <===
console.log( data.attributes ); // The variation attributes
console.log( data.availability_html ); // The formatted stock status
console.log( data.dimensions ); // The dimensions data
console.log( data.dimensions_html ); // The formatted dimensions
console.log( data.display_price ); // The raw price (float)
console.log( data.display_regular_price ); // The raw regular price (float)
console.log( data.image ); // The image data
console.log( data.image_id ); // The image ID (int)
console.log( data.is_downloadable ); // Is downloadable (boolean)
console.log( data.is_in_stock ); // Is in stock (boolean)
console.log( data.is_purchasable ); // Is purchasable (boolean)
console.log( data.is_sold_individually ); // Is sold individually (yes or no)
console.log( data.is_virtual ); // Is vistual (boolean)
console.log( data.max_qty ); // Max quantity (int)
console.log( data.min_qty ); // Min quantity (int)
console.log( data.price_html ); // Formatted displayed price
console.log( data.sku ); // The variation SKU
console.log( data.variation_description ); // The variation description
console.log( data.variation_is_active ); // Is variation active (boolean)
console.log( data.variation_is_visible ); // Is variation visible (boolean)
console.log( data.weight ); // The weight (float)
console.log( data.weight_html ); // The formatted weight
});
})(jQuery);
</script>
<?php
}
Le code va dans le fichier function.php de votre thème enfant actif (ou thème actif). Testé et fonctionne.
Merci. Les événements de blur et de change ne fonctionnent pas pour moi car ils se déclencheront avant la mise à jour de l'identifiant de la variante. Donc, au moins dans mon cas, ce que j'obtiens est l'identifiant précédent. La réponse ci-dessous ( on( "show_variation", function ( event, variation ) ) fonctionne pour moi, cependant.
@MoriWaan Vous avez ce comportement car vous avez certainement effectué d'autres personnalisations qui modifient le comportement par défaut de Woocommerce. Sur la dernière version de woocommerce avec le thème de la vitrine, mon code fonctionne parfaitement et je l'utilise depuis un moment pour les développements de mes clients. Bien sûr, vous pouvez utiliser les autres événements délégués du formulaire pour que cela fonctionne… L'événement "flou" fonctionne depuis la version 2+ de woocommerce sur les champs de sélection d'attribut de produit pour les produits variables.
C'est peut-être à cause d'un trop grand nombre de variations possibles. Cela fonctionne pour ceux qui n'ont que quelques possibilités, mais pour d'autres, lorsque Woocommerce charge les détails avec ajax, ce n'est pas le cas.
@MoriWaan Désolé, ce n'est pas vrai, je viens de tester avec un produit qui a un tas de variations, et il fonctionne parfaitement avec les événements de blur .
J'ai réussi à obtenir ce workign comme je le voulais exactement. Et c'était
J'appelle le script sous:
global $product;
if ( $product->is_type('variable') ) {
global $post;
?>
<script>
jQuery(function($){
setTimeout( function(){
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
//alert( variation.variation_id );
console.log( variation.variation_id );
var url = '<?php echo get_permalink($post->ID);?>';
//$('input.variation_id').change( function(){
console.log('You just selected variation #' + variation.variation_id);
var attributes = [];
var allAttributesSet = true;
$('table.variations select').each(function() {
var value = $(this).val();
if (value) {
attributes.push({
id: $(this).attr('name'),
value: value
});
} else {
allAttributesSet = false;
}
});
if (allAttributesSet) {
$.each(attributes,function(key, val) {
var attributeSlug = val.id.replace('attribute_pa_','');
url = url +'?variation_id='+ variation.variation_id +'&'+attributeSlug+'=' + val.value;
});
console.log('Relocating #' + variation.variation_id);
//window.location.replace(url);
window.location.href = url;
}
} );
}, 400 );
});
</script>
<?php
}
function xenon_variation_modification () {
add_action( 'woocommerce_before_add_to_cart_quantity', 'xenon_variation_modification' );
}
J'ai fait des recherches pour cela dans les sources suivantes:
https://sarathlal.com/get-variation-product-data-on-selecting-variation-options-woocommerce/