2015-08-31 33 views
1

我已經建立了一個使用Wordpress和WooCommerce的自定義網站,並安裝了Select2來生成自定義選擇哪些工作正常。我遇到的問題是WooCommerce頁面上的一些選擇,尤其是那些觸發變更事件的選擇。當使用Select2而不是實際選擇時觸發WooCommerce事件

自定義選擇成功更改所選的選項,但問題出現在用於觸發事件的選擇。例如,產品頁面上的顏色變化下拉列表或商店頁面上的「分類依據」選擇。

我查看了WooCommerce JS文件,發現了使用實際選擇框進行選擇時觸發的一些WooCommerce特定事件,但我不確定如何在使用Select2時實現此操作。

這裏是WooCommerce JS相對於我談論事件副本(在這種情況下,切換到選擇產品的變化):

.on('change', '.variations select', function() { 
     $form.find('input[name="variation_id"], input.variation_id').val('').change(); 
     $form.find('.wc-no-matching-variations').remove(); 

     if ($use_ajax) { 
      if ($xhr) { 
       $xhr.abort(); 
      } 

      var all_attributes_chosen = true; 
      var some_attributes_chosen = false; 
      var data     = {}; 

      $form.find('.variations select').each(function() { 
       var attribute_name = $(this).data('attribute_name') || $(this).attr('name'); 

       if ($(this).val().length === 0) { 
        all_attributes_chosen = false; 
       } else { 
        some_attributes_chosen = true; 
       } 

       data[ attribute_name ] = $(this).val(); 
      }); 

      if (all_attributes_chosen) { 
       // Get a matchihng variation via ajax 
       data.product_id = $product_id; 

       $xhr = $.ajax({ 
        url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_variation'), 
        type: 'POST', 
        data: data, 
        success: function(variation) { 
         if (variation) { 
          $form.find('input[name="variation_id"], input.variation_id') 
           .val(variation.variation_id) 
           .change(); 
          $form.trigger('found_variation', [ variation ]); 
         } else { 
          $form.trigger('reset_data'); 
          $form.find('.single_variation_wrap').after('<p class="wc-no-matching-variations woocommerce-info">' + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + '</p>'); 
          $form.find('.wc-no-matching-variations').slideDown(200); 
         } 
        } 
       }); 
      } else { 
       $form.trigger('reset_data'); 
      } 
      if (some_attributes_chosen) { 
       if ($reset_variations.css('visibility') === 'hidden') { 
        $reset_variations.css('visibility', 'visible').hide().fadeIn(); 
       } 
      } else { 
       $reset_variations.css('visibility', 'hidden'); 
      } 
     } else { 
      $form.trigger('woocommerce_variation_select_change'); 
      $form.trigger('check_variations', [ '', false ]); 
      $(this).blur(); 
     } 

     // Custom event for when variation selection has been changed 
     $form.trigger('woocommerce_variation_has_changed'); 
    }) 

然後我自己嘗試利用本次活動:

$('#pa_colour').select2(); 
$('#pa_colour').on('change', function(){ 
    var $form = $(this).parents('form'); 
    $form.trigger('woocommerce_variation_select_change'); 
    $form.trigger('woocommerce_variation_has_changed'); 
}); 

不幸的是,網站是不是還活着,所以我不能提供一個鏈接,但希望你的想法。

如果有人能在這裏幫助我,我會非常感激,我不完全確定Wordpress如何掛鉤(如果這是這樣)工作,我可能只是錯過了一些明顯的東西。

感謝, 凱瑟琳

+0

這裏是我指的JS文件的鏈接:https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-to-cart-variation.js –

+0

你在變異屬性上使用select2?客戶如何知道您可以使用哪些顏色/變體進行搜索? – helgatheviking

+0

@helgatheviking我不確定你的意思,這些選項仍然顯示,因爲他們通常會看起來不一樣? –

回答

-1

我遇到了同樣的問題,發現在這個線程中最後一個註釋的解決方案Select2 not showing selected value

通過Matt由凱文啓發的評論所說包裹選擇2調用$(窗口).bind(「負載」 ,function(){...});哪些爲我工作。

這些傢伙的榮譽。

相關問題