0
我正在使用Blanco主題（Wordpress）。這是來自主題森林的WooCommerce主題，它在單個產品頁面中嵌入了Cloud Zoom JQuery。我也在使用「WooCommerce Variation Swatches and Photos」插件。這將創建可視化樣本來替換WooCommerce下拉選擇器菜單以瞭解產品變體。需要幫助使WooCommerce swatch插件與雲端縮放js一起工作，而不是典型的NoConflict問題
頁面上的樣本使用js突出顯示已被點擊的樣本，以便可以高亮顯示以及何時將項目添加到購物車。
圖庫圖像使用js更改雲放大主圖像位置的附件src。
我的客戶希望主圖像在單擊樣本時也發生變化，以便它顯示與剛剛選擇的顏色相匹配的圖像。
我編輯了swatch插件，在編輯色板設置時提供了一個選項，用於在產品中爲每個屬性保存圖像url。設置此項時，色板將相同的代碼添加到圖庫圖片使用的標籤中。這成功地將所選擇的圖像加載到主圖像位置，如希望的那樣。但是色板不再被選中。
此外，加載樣本時主圖像上的「加載」不會消失。但是當它加載圖庫圖像時它會消失。
這很難用文字解釋。如果你訪問這個產品頁面：
http://tummytrimmerz.com/shop/cami-with-jog-bra/
你會看到大小色板XS，S，M，L ...正在他們應該。你可以看到三個顏色樣本不像大小的樣本，但他們正在加載主圖像。
這裏是我增加了一個標籤應由樣的jQuery中進行潛水的內部代碼：
<a href="https://tummytrimmerz.com/wp-content/uploads/2013/02/Tummy-Trimmerz-Black-Cami-Pink-Bra-Front-View1-266x400.jpg" class="cloud-zoom-gallery" cloud-zoom-data="useZoom: 'zoom1', smallImage: 'https://tummytrimmerz.com/wp-content/uploads/2013/02/Tummy-Trimmerz-Black-Cami-Pink-Bra-Front-View1-266x400.jpg'" style="width:90px;height:90px;" title="Jet Black/Magenta"><img src="https://tummytrimmerz.com/wp-content/uploads/2013/03/Black-Pink.jpg" alt="Thumbnail" class="wp-post-image swatch-photopa_color_" width="90" height="90"></a>
這裏是Swatch選擇器JQuery的：
jQuery(document).ready(function($) {
var calculator = new variation_calculator(product_attributes, product_variations_flat, my_all_set_callback, my_not_all_set_callback);
calculator.reset_selected();
calculator.reset_current();
function my_not_all_set_callback() {
// Reset image
var img = $('div.images img:eq(0)');
var link = $('div.images a.zoom:eq(0)');
var o_src = $(img).attr('data-o_src');
var o_href = $(link).attr('data-o_href');
if (o_src && o_href) {
$(img).attr('src', o_src);
$(link).attr('href', o_href);
}
$('form input[name=variation_id]').val('').change();
$('.single_variation_wrap').hide();
$('.single_variation').text('');
if($().uniform && $.isFunction($.uniform.update)) {
$.uniform.update();
}
}
function my_all_set_callback(selected) {
var found = null;
for (sa in selected) {
$('#' + sa).val(selected[sa]);
}
for(var p = 0; p < product_variations.length; p++) {
var result = true;
for (attribute in product_variations[p].attributes) {
for(selected_attribute in selected) {
if (selected_attribute == attribute) {
var v = product_variations[p].attributes[attribute];
if (v != selected[selected_attribute]) {
result = false;
}
}
}
}
if (result){
found = product_variations[p];
}
}
if (!found) {
for(var p = 0; p < product_variations.length; p++) {
var result = true;
for (attribute in product_variations[p].attributes) {
for(selected_attribute in selected) {
if (selected_attribute == attribute) {
var v = product_variations[p].attributes[attribute];
var vs = selected[selected_attribute];
if (v != '' && v != vs) {
result = false;
}
}
}
}
if (result){
found = product_variations[p];
}
}
}
if (found) {
show_variation(found);
}
}
function show_variation(variation) {
swap_image(variation);
$('.variations_button').show();
$('.single_variation').html(variation.price_html + variation.availability_html);
if (variation.sku) {
$('.product_meta').find('.sku').text(variation.sku);
} else {
$('.product_meta').find('.sku').text('');
}
$('.single_variation_wrap').find('.quantity').show();
if (variation.min_qty) {
$('.single_variation_wrap').find('input[name=quantity]').attr('data-min', variation.min_qty).val(variation.min_qty);
} else {
$('.single_variation_wrap').find('input[name=quantity]').removeAttr('data-min');
}
if (variation.max_qty) {
$('.single_variation_wrap').find('input[name=quantity]').attr('data-max', variation.max_qty);
} else {
$('.single_variation_wrap').find('input[name=quantity]').removeAttr('data-max');
}
if (variation.is_sold_individually == 'yes') {
$('.single_variation_wrap').find('input[name=quantity]').val('1');
$('.single_variation_wrap').find('.quantity').hide();
}
$('form input[name=variation_id]').val(variation.variation_id).change();
$('.single_variation_wrap').slideDown('200').trigger('show_variation', [ variation ]);
$('form.cart').trigger('found_variation', [ variation ]);
}
function swap_image(variation) {
var img = $('div.images img:eq(0)');
var link = $('div.images a.zoom:eq(0)');
var o_src = $(img).attr('data-o_src');
var o_title = $(img).attr('data-o_title');
var o_href = $(link).attr('data-o_href');
var variation_image = variation.image_src;
var variation_link = variation.image_link;
var variation_title = variation.image_title;
if (!o_src) {
$(img).attr('data-o_src', $(img).attr('src'));
}
if (!o_title) {
$(img).attr('data-o_title', $(img).attr('title'));
}
if (!o_href) {
$(link).attr('data-o_href', $(link).attr('href'));
}
if (variation_image && variation_image.length > 1) {
$(img).attr('src', variation_image);
$(img).attr('title', variation_title);
$(img).attr('alt', variation_title);
$(link).attr('href', variation_link);
$(link).attr('title', variation_title);
} else {
$(img).attr('src', o_src);
$(img).attr('title', o_title);
$(img).attr('alt', o_title);
$(link).attr('href', o_href);
$(link).attr('title', o_title);
}
}
var $variation_form = $('form.cart');
$('.variations select', $variation_form).unbind();
$('div.select-option').delegate('a', 'click', function(event) {
event.preventDefault();
var $the_option = $(this).closest('div.select-option');
if ($the_option.hasClass('disabled')) {
return false;
} else if ($the_option.hasClass('selected')) {
$the_option.removeClass('selected');
var select = $the_option.closest('div.select');
select.data('value', '');
$(this).parents('div.select').trigger('change', []);
} else {
var select = $(this).closest('div.select');
$(select).find('div.select-option').removeClass('selected');
$the_option.addClass('selected');
select.data('value', $the_option.data('value'));
$(this).parents('div.select').trigger('change', []);
}
return false;
});
$('div.select', $variation_form).bind('change', function() {
$variation_form.trigger('woocommerce_variation_select_change');
var $parent = $(this).closest('.variation_form_section');
$('select', $parent).each(function(index, element) {
var optval = $(element).val();
optval = optval.replace("'", "'");
optval = optval.replace('"', """);
calculator.set_selected($(element).data('attribute-name'), optval);
});
$('div.select', $parent).each(function(index, element) {
calculator.set_selected($(element).data('attribute-name'), $(element).data('value'));
});
var current_options = calculator.get_current();
$('select', $parent).each(function(index, element) {
var attribute_name = $(element).data('attribute-name');
var avaiable_options = current_options[attribute_name];
$(element).find('option:gt(0)').each(function(index, option) {
var optval = $(option).val();
optval = optval.replace("'", "'");
optval = optval.replace('"', """);
if (!avaiable_options[ optval ]) {
$(option).attr('disabled','disabled');
} else {
$(option).removeAttr('disabled');
}
});
});
$('div.select', $parent).each(function(index, element) {
var attribute_name = $(element).data('attribute-name');
var avaiable_options = current_options[attribute_name];
$(element).find('div.select-option').each(function(index, option) {
if (!avaiable_options[ $(option).data('value') ]) {
$(option).addClass('disabled','disabled');
} else {
$(option).removeClass('disabled');
}
});
});
calculator.trigger_callbacks();
});
$('select', $variation_form).change(function() {
var $parent = $(this).closest('.variation_form_section');
$('select', $parent).each(function(index, element) {
var optval = $(element).val();
optval = optval.replace("'", "'");
optval = optval.replace('"', """);
calculator.set_selected($(element).data('attribute-name'), optval);
});
var current_options = calculator.get_current();
$('select', $parent).each(function(index, element) {
var attribute_name = $(element).data('attribute-name');
var avaiable_options = current_options[attribute_name];
$(element).find('option:gt(0)').each(function(index, option) {
var optval = $(option).val();
optval = optval.replace("'", "'");
optval = optval.replace('"', """);
if (!avaiable_options[ optval ]) {
$(option).attr('disabled','disabled');
} else {
$(option).removeAttr('disabled');
}
});
});
$('div.select', $parent).each(function(index, element) {
var attribute_name = $(element).data('attribute-name');
var avaiable_options = current_options[attribute_name];
$(element).find('div.select-option').each(function(index, option) {
if (!avaiable_options[ $(option).data('value') ]) {
$(option).addClass('disabled','disabled');
} else {
$(option).removeClass('disabled');
}
});
});
calculator.trigger_callbacks();
});
//Fire defaults
$('div.select-option[data-default=true]').find('a').click();
$('select', 'form.cart').trigger('change', []);
});
function variation_manager(variations) {
this.variations = variations;
this.find_matching_variation = function(selected) {
for (var v = 0;v<this.variations.length;v++) {
var variation = this.variations[v];
var matched = true;
//Find any with an exact match.
for(var attribute in variation.attributes) {
matched = matched & selected[attribute] != undefined && selected[attribute] == variation.attributes[attribute];
}
if (matched) {
return variation;
}
}
//An exact match was not found. Find any with a wildcard match
for (var v = 0;v<this.variations.length;v++) {
var variation = this.variations[v];
var matched = true;
//Find any with an exact match.
for(var attribute in variation.attributes) {
matched = matched & selected[attribute] != undefined && (selected[attribute] == variation.attributes[attribute] || variation.attributes[attribute] == '');
}
if (matched) {
return variation;
}
}
return false;
}
}
function variation_calculator(keys, possibile, all_set_callback, not_all_set_callback) {
this.recalc_needed = true;
this.all_set_callback = all_set_callback;
this.not_all_set_callback = not_all_set_callback;
//The varioius variation key values available as configured in woocommerce.
this.variation_keys = keys;
//The actual variations that are configured in woocommerce.
this.variations_available = possibile;
//Stores the attribute + values that are currently available
this.variations_current = {};
//Stores the selected attributes + values
this.variations_selected = {};
this.reset_current = function() {
for(var key in this.variation_keys) {
this.variations_current[ key ] = {};
for(var av = 0; av < this.variation_keys[key].length; av++) {
this.variations_current[ key ][ this.variation_keys[key][av] ] = 0;
}
}
};
this.update_current = function() {
this.reset_current();
for(var i = 0; i < this.variations_available.length; i++) {
for(var attribute in this.variations_available[ i ]) {
var available_value = this.variations_available[ i ][attribute];
var selected_value = this.variations_selected[attribute];
if (selected_value && selected_value == available_value) {
this.variations_current[ attribute ][ available_value ] = 1;//this is a currently selected attribute value
} else {
var result = true;
//Loop though any other item that is selected, checking to see if any DO NOT match.
for(var other_selected_attribute in this.variations_selected) {
if (other_selected_attribute == attribute) {
//We are looking to see if any attribute that is selected will cause this to fail.
continue;
}
var other_selected_attribute_value = this.variations_selected[other_selected_attribute];
var other_available_attribute_value = this.variations_available[i][other_selected_attribute];
if (other_selected_attribute_value) {
if (other_available_attribute_value) {
if (other_selected_attribute_value != other_available_attribute_value) {
result = false;
}
}
}
}
if (result) {
if (available_value) {
this.variations_current[ attribute ][ available_value ] = 1;
} else {
for (var av in this.variations_current[ attribute ]) {
this.variations_current[ attribute ][ av ] = 1;
}
}
}
}
}
}
this.recalc_needed = false;
};
this.get_current = function() {
if (this.recalc_needed) {
this.update_current();
}
return this.variations_current;
};
this.get_value_is_current = function(key, value) {
if (this.recalc_needed) {
this.update_current();
}
return this.variations_current[ key ][ value ] === true;
};
this.reset_selected = function() {
this.recalc_needed = true;
this.variations_selected = [];
}
this.set_selected = function(key, value) {
this.recalc_needed = true;
this.variations_selected[ key ] = value;
};
this.get_selected = function() {
return this.variations_selected;
}
this.trigger_callbacks = function(){
var all_set = true;
for (var key in this.variation_keys) {
all_set = all_set & this.variations_selected[key] != undefined && this.variations_selected[key] != '';
}
if (all_set) {
this.all_set_callback(this.variations_selected);
} else {
this.not_all_set_callback();
}
}
};
我花了6天試圖讓這個工作正確，我是新來的JS，所以任何幫助將不勝感激。
UPDATE：對不起，您無法查看與坐在登錄，在這裏：
URL https://tummytrimmerz.com/wp-login.php 用戶：堆棧 PW：堆棧
萊昂