我已經建立了一個使用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如何掛鉤(如果這是這樣)工作,我可能只是錯過了一些明顯的東西。
感謝, 凱瑟琳
這裏是我指的JS文件的鏈接:https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-to-cart-variation.js –
你在變異屬性上使用select2?客戶如何知道您可以使用哪些顏色/變體進行搜索? – helgatheviking
@helgatheviking我不確定你的意思,這些選項仍然顯示,因爲他們通常會看起來不一樣? –