Question

我已经使用Wordpress和WooCommerce构建了一个自定义网站，并安装了Select2来生成自定义选项，该工作正常。我遇到的问题是WooCommerce页面上的一些选项，特别是那些触发更改事件的选项。

自定义选择成功更改所选的选项，但问题出现在用于触发事件的选择上。例如，产品页面上的颜色变化下拉菜单或排序依据＆＃39;在商店页面上选择。

我查看了WooCommerce JS文件，发现了一些使用实际选择框进行选择时触发的WooCommerce特定事件，但我不确定如何在使用Select2时实现此功能。

以下是WooCommerce JS与我正在谈论的事件（在这种情况下是产品变体选择的更改）的副本：

.on( 'change', '.variations select', function() {
        $form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).change();
        $form.find( '.wc-no-matching-variations' ).remove();

        if ( $use_ajax ) {
            if ( $xhr ) {
                $xhr.abort();
            }

            var all_attributes_chosen  = true;
            var some_attributes_chosen = false;
            var data                   = {};

            $form.find( '.variations select' ).each( function() {
                var attribute_name = $( this ).data( 'attribute_name' ) || $( this ).attr( 'name' );

                if ( $( this ).val().length === 0 ) {
                    all_attributes_chosen = false;
                } else {
                    some_attributes_chosen = true;
                }

                data[ attribute_name ] = $( this ).val();
            });

            if ( all_attributes_chosen ) {
                // Get a matchihng variation via ajax
                data.product_id = $product_id;

                $xhr = $.ajax( {
                    url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_variation' ),
                    type: 'POST',
                    data: data,
                    success: function( variation ) {
                        if ( variation ) {
                            $form.find( 'input[name="variation_id"], input.variation_id' )
                                .val( variation.variation_id )
                                .change();
                            $form.trigger( 'found_variation', [ variation ] );
                        } else {
                            $form.trigger( 'reset_data' );
                            $form.find( '.single_variation_wrap' ).after( '<p class="wc-no-matching-variations woocommerce-info">' + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + '</p>' );
                            $form.find( '.wc-no-matching-variations' ).slideDown( 200 );
                        }
                    }
                } );
            } else {
                $form.trigger( 'reset_data' );
            }
            if ( some_attributes_chosen ) {
                if ( $reset_variations.css( 'visibility' ) === 'hidden' ) {
                    $reset_variations.css( 'visibility', 'visible' ).hide().fadeIn();
                }
            } else {
                $reset_variations.css( 'visibility', 'hidden' );
            }
        } else {
            $form.trigger( 'woocommerce_variation_select_change' );
            $form.trigger( 'check_variations', [ '', false ] );
            $( this ).blur();
        }

        // Custom event for when variation selection has been changed
        $form.trigger( 'woocommerce_variation_has_changed' );
    } )

然后我自己尝试利用这个事件：

$('#pa_colour').select2();
$('#pa_colour').on('change', function(){
    var $form = $(this).parents('form');
    $form.trigger( 'woocommerce_variation_select_change' );
    $form.trigger( 'woocommerce_variation_has_changed' );
});

遗憾的是，该网站还没有存在，所以我无法提供链接，但希望您能明白这一点。

如果有人可以在这里帮助我，我会非常感激，我不确定Wordpress如何挂钩（如果这就是这个），我可能只是错过了一些明显的东西。

谢谢，凯瑟琳

Answer 1

这不完全是一个解决方案，但我最终用Selectric插件替换了Select2插件，并且完美无缺。那好吧！多谢你们。 http://lcdsantos.github.io/jQuery-Selectric/

Answer 2

我遇到了同样的问题，并在此帖子Select2 not showing selected value

的最后一条评论中找到了解决方案

由Kevin启发的Matt评论建议将select2调用包装在$（window）.bind中（＆＃34; load＆＃34;，function（）{...}）;这对我有用。

对那些家伙感激不尽。

使用Select2而不是实际选择时，WooCommerce事件不会触发

2 个答案: