web-dev-qa-db-ja.com

WooCommerce:パターンの変更後にイベントをトリガー

カラーボックスの販売にはWoocommerceを使用しています。ほとんどの場合、可変製品オプションが選択されます。

顧客が色を選択できるカラーパレット付きのモーダルダイアログを追加しました。これは、ウーコマースの一般的なドロップダウンの隣にあります。

問題は、(パレットから選択された後)正しいSlugValueをドロップダウンに渡すと、ドロップダウンの値は正しいですが、価格を公開するために発生する必要があるイベントが機能しないことです。

ドロップダウンのonchangeイベントを起動しようとしましたが、何も起こりませんでした。

誰がどのイベントをトリガーする必要があるのか​​、そしてどのようにして私に教えてもらえますか?

なんでも助けて!

18
MJay

将来誰かがこれに遭遇した場合:WooCommerceはadd-to-cart-variation.js全体にトリガーを提供します。これにより、Webサイトの変更イベントにフックできます。あなたはそれらのすべてがそのファイルで利用可能であるのを見つけることができますが、この場合に最も役立つと思われるものをそのように使用できます

_$( ".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
} );
_

フックしたいトリガーは.on()内の最初の引数です。以下は、開始するためのいくつかの例です。

_woocommerce_variation_select_change_選択が変更されたときに発生します。

_show_variation_は、バリエーションを見つけると発生し、実際に見つかったバリエーションオブジェクトを渡すため、手動で選択をフィルター処理する必要なく、価格に直接アクセスできます。

ふるいにかけて残りの部分を見つけることができます here

85
Logan

このコードは、最初の質問で要求された正確な機能を実行します。

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

'#WC_variation_drop_down_ID'をjQueryで変更したフィールドの実際のIDに変更します。

以下は、フィールドの設定とWooCommerceバリエーション選択のトリガー(ラジオボタンフィールドクラスの配列に基づく)を含む、より完全なソリューションです。

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');
    });
}

setting WooCommerce Variation Fields に関するこの投稿に触発されたソリューション。

3
Adal

私のように誰かがここに来て答えを見つけた場合は、これについて説明します。

選択されたバリエーションの価格を知る必要があるため、変更機能の実装に問題がありますが、「woocommerce_variation_select_change」には以前のバリエーションの価格が表示されています。

したがって、変更終了後にバリエーションの価格を取得する場合は、「woocommerce_variation_has_changed」jQuery関数を使用する必要があります。

例:

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