Woocommerce:产品变体的自定义图像 [英] Woocommerce: custom image for product variations

问题描述

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

I'm working on writing a plugin that will filter on "woocommerce_single_product_image_html" to display a custom image for the product.

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

I'm having trouble grabbing the values of the dropdown boxes via jquery. So far i've tried:

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 的核心更改事件相冲突.关于如何通过插件完成此操作的任何建议?

I have been able to verify that the above code works by appending ".change()" to trigger the change event on load, but its not triggered when changing selections in the dropdown box. My guess is that this is conflicting with the core change event from woocommerece. Any suggestions on how I can accomplish this via a plugin?

推荐答案

所以，我终于找到了这个问题.woocommerce javascript 文件之一 (assets/js/frontend/add-to-cart-variation.js) 发出以下命令来解除所有更改事件的绑定，这解释了为什么我的未触发.

So, I finally tracked this down. One of the woocommerce javascript files (assets/js/frontend/add-to-cart-variation.js) was issuing the following command to unbind all change events, which explains why mine wasn't firing.

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

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

My solution was to write a basic plugin to add in my functionality. Luckily, the woocommerce_variable_add_to_cart function is pluggable, so I was able to make a copy of it and tweak it to load my own version of the add-to-cart-variation.js file without the above unbind line. This way the core plugin code remains unmodified.

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

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

Hopefully someone else also finds this info helpful!

这篇关于Woocommerce:产品变体的自定义图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！