jquery - 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) 发出以下命令来取消绑定(bind)所有更改事件，这解释了为什么我的文件没有触发。

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

我的解决方案是编写一个基本插件来添加我的功能。幸运的是，woocommerce_variable_add_to_cart 函数是可插入的，因此我能够复制它并对其进行调整以加载我自己版本的 add-to-cart-variation.js 文件，而无需上述取消绑定(bind)行。这样核心插件代码就保持不变。

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()
    ) );
}

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