在woocommerce中，启用 Select2 代替原生select

发布于：2020-08-03 最后编辑：2020-08-03 所属分类：后端 阅读次数：859

Select2之前已经介绍过了，它的主要作用是让我们可以对select标签进行美化。在woocommerce开发中，尤其是可变产品的样式中，select是没法儿避免的。多数情况下，我们只需对select进行简单的样式美化即可。不过当客户要求较高的时候，我们可以启用 woocommerce自带的 Select2 来实现深度美化的目的。

示例代码

add_action('wp_enqueue_scripts', function() {
    if ( ! is_plugin_active('woocommerce/woocommerce.php') && ! is_plugin_active_for_network('woocommerce/woocommerce.php') ) {

        $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';

        if ( ! wp_script_is('select2', 'enqueued') ) {
            wp_enqueue_script('select2', WC()->plugin_url() . '/assets/js/select2/select2.full' . $suffix . '.js', ['jquery']);
        }

        if ( ! wp_style_is('select2', 'enqueued') ) {
            wp_enqueue_style('select2', WC()->plugin_url() . '/assets/css/select2.css', []);
        }

    }
});

以上代码是加载 woocommerce自带的 Select2脚本和样式。然后在你的 js文件中，加入下面的初始化代码即可。

jQuery(document).ready(function(e) {
    e.each(e(".single-product select[data-attribute_name], .single-product .wc-pao-addon-select"), function(t, n) {
        e(n).select2({
            minimumResultsForSearch: -1,
            dropdownParent: e(n).closest(".summary.entry-summary")
        })
    })
});

参考资料

标签：