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）發佈了以下命令來解除所有更改事件，這就解釋了爲什麼mine沒有啓動。

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

希望別人也認爲此信息有幫助！