web-dev-qa-db-fra.com

WooCommerce: événement déclencheur après changement de variation

Nous utilisons Woocommerce pour vendre des colorboxes. La plupart du temps, l'option produit variable est choisie.

Nous avons ajouté une boîte de dialogue modale avec une palette de couleurs, où le client peut choisir une couleur. C'est à côté de la liste déroulante commune de woocommerce.

Le problème est que lorsque je passe la bonne SlugValue à la liste déroulante (après l'avoir choisie dans la palette), la valeur dans la liste déroulante est correcte, mais l'événement qui doit être déclenché pour publier le prix ne fonctionne pas.

J'ai déjà essayé de déclencher l'événement onchange de la liste déroulante, mais rien ne s'est produit.

Quelqu'un peut-il me dire quel événement doit être déclenché et comment?

aprec toute aide!

javascriptwoocommercevariations
18
MJay

Dans le cas où quelqu'un tomberait sur cela à l'avenir: WooCommerce fournit des déclencheurs tout au long de add-to-cart-variation.js qui vous permet de vous connecter à des événements de modification pour le site Web. Vous pouvez tous les trouver dans ce fichier, mais celui qui vous aidera le plus dans ce cas peut être utilisé comme tel

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
    // Fires whenever variation selects are changed
} );

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    // Fired when the user selects all the required dropdowns / attributes
    // and a final variation is selected / shown
} );

Où le déclencheur auquel vous souhaitez vous connecter est le premier argument à l'intérieur de .on(). Voici quelques exemples ci-dessous pour vous aider à démarrer:

woocommerce_variation_select_change Se déclenche lorsque la sélection est modifiée.

show_variation Est renvoyé lorsqu'il trouve une variation et vous transmettra en fait l'objet de variation trouvé afin que vous puissiez accéder directement au prix sans avoir à filtrer manuellement les sélections.

Vous pouvez passer au crible et trouver le reste ici .

85
Logan

Ce code exécute la fonctionnalité exacte demandée dans la question initiale:

$('#WC_variation_drop_down_ID').trigger('change');

Remplacez "#WC_variation_drop_down_ID" par l'ID réel du champ que vous avez modifié avec jQuery.

Voici une solution plus complète qui comprend la définition du champ ainsi que le déclenchement de la sélection de variantes WooCommerce (basé sur un tableau de classes de champs de bouton radio):

var fields = ['.gchoice_4_11_0', '.gchoice_4_11_1', '.gchoice_4_4_0', '.gchoice_4_4_1'];
for ( var i = fields.length; i--; ) {
    $('#gravity_form_wrapper_ID').on('click', fields[i], function() {
        $('#WC_variation_drop_down_ID').val( $(this).children('input').val() ).trigger('change');
    });
}

Solution inspirée de cet article sur définition des champs de variation WooCommerce .

3
Adal

si quelqu'un vient ici comme moi pour trouver la réponse, je fournirai une clarification à ce sujet.

Nous avons un problème lors de la mise en œuvre de la fonction de changement, car nous devons connaître le prix de la variation sélectionnée, mais "woocommerce_variation_select_change", nous avons obtenu le prix de la variation précédente.

Donc, si vous voulez obtenir le prix de la variation après la fin du changement, vous devez utiliser la fonction jQuery 'woocommerce_variation_has_changed'.

Exemple:

jQuery('#select_attribute_of_variation').on('woocommerce_variation_has_changed', function(){ // do your magic here... })

1
D. Chatzimichailidis