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

Posted

技术标签:

【中文标题】使用 Select2 而不是实际选择时不会触发 WooCommerce 事件【英文标题】:WooCommerce event not triggering when using Select2 instead of actual select 【发布时间】:2015-11-25 03:17:08 【问题描述】:

我已经使用 Wordpress 和 WooCommerce 构建了一个自定义网站,并安装了 Select2 以生成运行良好的自定义选择。我遇到的问题是 WooCommerce 页面上的一些选择,特别是那些触发更改事件的选择。

自定义选择成功更改了选择的选项,但问题出现在旨在触发事件的选择上。例如,产品页面上的颜色变化下拉菜单或商店页面上的“排序依据”选择。

我查看了 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 挂钩(如果是这样的话)是如何工作的,我可能只是遗漏了一些明显的东西。

谢谢, 凯瑟琳

【问题讨论】:

这里是我指的JS文件的链接:github.com/woothemes/woocommerce/blob/master/assets/js/frontend/… 您在变体属性上使用 select2?客户如何知道您有哪些颜色/款式可供搜索? @helgatheviking 我不确定你的意思,选项仍然显示,因为它们通常看起来不同? 我想我只是习惯在管理员中使用 Select2 并输入搜索。 select2 docs 表示“只要用户更改原始元素的值,就会在原始元素上触发更改事件”。所以我现在被难住了。 是的,这是个谜,嘿? @helgatheviking 感谢您的回复 【参考方案1】:

这并不是一个确切的解决方案,但我最终用 Selectric 插件替换了 Select2 插件,并且效果很好。那好吧!多谢你们。 http://lcdsantos.github.io/jQuery-Selectric/

【讨论】:

【参考方案2】:

我遇到了同样的问题,并在此线程 Select2 not showing selected value 的最后一条评论中找到了解决方案

Matt 受 Kevin 启发的评论建议将 select2 调用包装在 $(window).bind("load", function() ...);这对我有用。

向这些人致敬。

【讨论】:

以上是关于使用 Select2 而不是实际选择时不会触发 WooCommerce 事件的主要内容,如果未能解决你的问题,请参考以下文章

Select2 自动触发事件变化

如何以编程方式在 select2 多选下拉列表中添加其他选择而不会丢失现有的选定项目

在select2的下拉打开时禁用自动对焦?

如果我使用 select2 小部件,如何发布表中记录的实际主键而不是 php Yii2 中的数组索引?

jQuery Select2 onkeyup 没有触发

Select2 在淘汰赛中选择标签作为对象而不是“id”