我是Shopify的新手。
我想更改产品的主要图片name="properties[Color]"事件的颜色下拉选项。我的颜色下拉名称为jQuery('select[name="properties[Color]"]').change(function()
{
var option = jQuery(this).find('option:selected').val();
var color = option.replace(" ", "_");
alert(color);
jQuery('#elevatezoom_gallery img').each(function () {
var src = jQuery(this).attr('src');
if (src.indexOf(color) >= 0){
alert(src);
jQuery("#elevatezoom_big").attr('src', src.replace('_compact', '_grande'));
jQuery("#elevatezoom_big").attr('data-zoom-image', src.replace('_compact', '_grande'));
jQuery(".zoomWindowContainer div").css('background-image','url('+src.replace('_compact', '_grande')+')');
}
});
});
。
我已编写此代码，通过从颜色下拉菜单中选择颜色来更改图像
<script>
var selectCallback = function(variant, selector) {
// ---- by dkrao2008@gmail.com - start - (for color image on change color from dropdown) ------//
jQuery('select[name="properties[Color]"]').change(function()
{
var option = jQuery(this).find('option:selected').val();
var color = option.replace(" ", "_");
//alert(color);
jQuery('#elevatezoom_gallery img').each(function () {
var src = jQuery(this).attr('src');
if (src.indexOf(color) >= 0){
//alert(src);
jQuery("#elevatezoom_big").attr('src', src.replace('_compact', '_grande'));
jQuery("#elevatezoom_big").attr('data-zoom-image', src.replace('_compact', '_grande'));
jQuery(".zoomWindowContainer div").css('background-image','url('+src.replace('_compact', '_grande')+')');
}
});
});
// ---- by dkrao2008@gmail.com - end - (for color image on change color from dropdown) ------//
if ( variant && variant.available ) {
jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
if( variant.price < variant.compare_at_price ){
jQuery('#product_price .price').html('<span class="money">' + Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span><span class="money compare-at-price">' + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + '</span>');
}
else {
jQuery('#product_price .price').html('<span class="money">' + Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>');
};
}
else {
jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
jQuery('#product_price .price').text(message);
};
if (variant && variant.featured_image) {
var originalImage = $("#elevatezoom_big");
var newImage = variant.featured_image;
var element = originalImage[0];
Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
jQuery('#elevatezoom_big').attr('src', newImageSizedSrc).attr('data-zoom-image', newImageSizedSrc);
jQuery("#elevatezoom_gallery a").each(function(){
if ( jQuery(this).attr('data-zoom-image').replace(/\?v=.*/ , '') == newImageSizedSrc.replace(/\?v=.*/ , '') ) {
jQuery(this).trigger('click');
};
});
});
};
};
jQuery(document).ready(function($){
new Shopify.OptionSelectors( "product-select",
{
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});
});
但jQuery不在我的shopify商店上运行。我打印警告消息，检查是否jQuery工作，但没有警报来。
请帮助我如何在颜色下拉变化时调用jquery。
我的完整代码就是这个
{{1}}