Question

我正在尝试在WooCommerce 3.1.0的产品管理中使用Select2 4.0。

我为称为颜色组的变体添加了一个自定义字段，如下所示：

add_action( 'woocommerce_variation_options', 'add_to_variations_metabox', 10, 3 );
function add_to_variations_metabox( $loop, $variation_data, $variation ) {

    <div>
        <p class="form-row">
            <label for="dipi_color_groups<?php echo $loop; ?>"><?php echo __( 'Color Groups', 'dipi' ); ?></label>
                <select multiple="true" id="dipi_color_groups<?php echo $loop; ?>" class="color_groups" name="dipi_color_groups[<?php echo $loop; ?>]">
                    <option>Red</option>
                    <option>Green</option>
                    <option>Blue</option>
                    <option>Beige</option>
                </select>
        </p>
    </div> <?php 
}

这是我的JS，使select成为Select2。

    $( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation', function( e ) {

        $( "select.color_groups", $( this ) ).select2({
            tags: true,
            placeholder: "Add color groups...",
            width: "100%",
            createTag: function ( params ) {
                return {
                    id: params.term,
                    text: params.term,
                    newOption: true
                }
            }
        });

    });

该字段显示正常。

但当我点击它时，Select2会自动解除/关闭。我认为这与WooCommerce对Select2的处理有冲突，但我无法弄清楚如何在WC编辑产品中复制其功能。

这笔交易是什么？任何帮助非常感谢！

Answer 1

我明白了。问题在于我的点击事件附加到任何单个变体包装容器。当点击Select2时，.woocommerce_variation点击事件将触发并重置Select2-自动失去焦点。

因此，我将点击事件限定为变体标题标题<h3>，并且仅在关闭时。另外，我检查是否已应用Select2以避免浪费资源或重置元素。

$( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation.closed h3', function( e ) {

    // get current ddl
    $ddl = $( "select.color_groups", $( this ).parent() );

    // already a select2?
    if ( $ddl.hasClass("select2-hidden-accessible" ) ) return; // get out...

    // select2-ify dropdown
    $ddl.select2({
        tags: true,
        placeholder: "Add color groups...",
        width: "100%",
        createTag: function ( params ) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            }
        }
    });

});

在WooCommerce中单击选择2自动关闭作为变体自定义字段

1 个答案: