Woocommerce:产品变体的自定义图像

Question

我正在编写一个插件,它将过滤"woocommerce_single_product_image_html"以显示产品的自定义图像.

我无法通过jquery获取下拉框的值.到目前为止我已经尝试过:

jQuery(document).ready(function($) {
    // Code here will be executed on document ready. Use $ as normal.

    $('#color').change(function() {
            var selected = $(this).children("option").filter(":selected").text();
            alert(selected);
    });
});

我已经能够通过附加".change()"来验证上述代码的工作原理,以便在加载时触发更改事件,但在更改下拉框中的选择时不会触发它.我的猜测是,这与woocommerece的核心变化事件相矛盾.关于如何通过插件实现此目的的任何建议？

Answer 1

所以,我终于找到了这个.其中一个woocommerce javascript文件(assets/js/frontend/add-to-cart-variation.js)正在发出以下命令来取消绑定所有更改事件,这解释了为什么我没有解雇.

this.find( '.variations select' ).unbind( 'change focusin' );

我的解决方案是编写一个基本插件来添加我的功能.幸运的是,woocommerce_variable_add_to_cart函数是可插入的,所以我能够复制它并调整它以加载我自己的add-to-cart-variation.js文件版本,而不需要上面的解绑线.这样核心插件代码保持不变.

function woocommerce_variable_add_to_cart() {
    global $product;

    // Enqueue variation scripts
    wp_deregister_script( 'wc-add-to-cart-variation' );
    wp_register_script( 'wc-add-to-cart-variation', plugins_url( '/js/add-to-cart-variation.js', __FILE__ ), array( 'jquery' ), WC_VERSION, true );
    wp_enqueue_script( 'wc-add-to-cart-variation' );

    // Load the template
    wc_get_template( 'single-product/add-to-cart/variable.php', array(
        'available_variations'  => $product->get_available_variations(),
        'attributes'            => $product->get_variation_attributes(),
        'selected_attributes'   => $product->get_variation_default_attributes()
    ) );
}

希望其他人也发现此信息有用!