FlexSlider/WooCommerce单一产品图库:尝试从颜色选择器触发特色图像更改 [英] FlexSlider/WooCommerce Single Product Image Gallery: Trying to trigger featured image change from the color picker

问题描述

我正在建立一个即将推出的WooCommerce网站.我正在使用 https://wordpress.org/plugins/woo-variation-swatches/管理产品的差异属性:所有产品都具有颜色属性，有些产品还具有尺寸属性和/或带线/无线属性.

I'm setting up a soon-to-be-launched WooCommerce site. I am using https://wordpress.org/plugins/woo-variation-swatches/ to manage the variation attributes for the products: all products have color attributes, some also have size attribute and/or lined/unlined attribute.

当用户单击颜色属性时，我希望主产品图像切换为以该颜色显示产品图像. (我不想为每个图像输入单独的变体-每个产品可以有数十种变体，并且将成为维护的噩梦.)我写了一些jquery来做到这一点，并且jquery很好用-UNTIL选择所有其他属性.因此，如果产品具有颜色和尺寸，则只要单击颜色，只要没有选择尺寸，jQuery就会起作用.一旦选择大小，我的jquery就什么都不做.例如，请参阅: https://liziheadwear.com/snoods/solid-chenille/ .如果产品仅具有颜色属性，则jQuery根本不起作用.例如，请参阅: https://liziheadwear.com/snoods/multicolor-pearl/我花了很多时间排除故障，无法破解此错误.我真的很希望其他人能帮助我！

When a user clicks on a color attribute, I want the main product image to switch to display the image for the product in that color. (I don't want to have to enter in separate variations for every single image - can be dozens of variations per product and will be a nightmare to maintain.) I wrote some jquery to do this, and the jquery works well -- UNTIL all other attributes are selected. So if a product has color and size, the jquery works when you click a color - as long as size is not selected. Once you select a size, my jquery does nothing. For example, see: https://liziheadwear.com/snoods/solid-chenille/. If a product only has color attribute, then the jquery does not work at all. For example, see: https://liziheadwear.com/snoods/multicolor-pearl/ I spent a good while trouble shooting and can't crack this bug. I'm really hoping that someone else can help me out!

这是代码:

jQuery(window).load(function(){
  if( jQuery('body').hasClass('single-product') ){
    jQuery('ul.image-variable-wrapper li').click(function(e) {
      var ttl = jQuery(this).attr("title");
      var i =jQuery(".woocommerce-product-gallery__image[data-thumb-alt='"+ttl+"']").index();
      jQuery('.woocommerce-product-gallery').flexslider(i);
      //alert("ttl:  "+ttl+"  i  "+i);  
    });
  }
});

现在，为了使其正常工作，颜色属性的标题必须与主产品图片的alt匹配.例如:对于颜色属性树莓"，协调图像的替代文本为树莓".

Now, in order for it to work, the title of the color attribute has to match with the alt of the main product image. ex: For the color attribute "raspberry", the coordinating image has an alt text of "raspberry".

我验证了在所有情况下均正确捕获了ttl和i值.而flexslider正在完整地接收这些值.我只是想不明白为什么添加到购物车表单后滑块不旋转.

I verified that the ttl and i values are being captured correctly in all scenarios. And that the flexslider is receiving those values intact. I just can't figure out why the slider won't rotate when the add to cart form is complete.

当然我的客户要在昨天之前...

And of course my client wants this by yesterday...

推荐答案

仅供参考，我想出了解决方案-我将此代码添加到了主题的functions.php文件中，问题得以解决:

FYI, I figured out the solution -- I added this code to my theme's functions.php file, and the problem was solved:

function my_product_carousel_options($options) {
  $options['controlNav'] = false;
  return $options;
}
add_filter("woocommerce_single_product_carousel_options", "my_product_carousel_options", 10);

这篇关于FlexSlider/WooCommerce单一产品图库:尝试从颜色选择器触发特色图像更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！