如何解决仅选择一个变体时 Woocommerce 更改变体图像
我在 SO 和另一个站点上遇到了此代码。它允许仅选择一个主要属性(例如颜色)时更改产品变体图像,而不必选择所有变体属性(例如颜色和尺寸)才能更改图像。
此代码是为使用插件而编写的,但是编写它的人提到更改第 6 行以便在没有插件的情况下使用。我尝试将 data-attribute_name
更改为等于 attribute_color
,正如它的名字一样。我已经使用 functions.php
中的脚本标记调用了此代码,但不确定我还应该做什么。
我怎样才能做到这一点?
var image_to_show = '';
var variations = JSON.parse($(".variations_form").attr("data-product_variations"));
if(variations) {
var first_attr = Object.keys(variations[0].attributes)[0];
// when swatch button is clicked
$("ul[data-attribute_name='"+first_attr+"'] li").click(function() {
var choice = $(this).attr("data-value");
var found = false;
// loop variations JSON
for(const i in variations) {
if(found) continue;
if(variations.hasOwnProperty(i)) {
// if first attribute has the same value as has been selected
if (choice === variations[i].attributes[Object.keys(variations[0].attributes)[0]]) {
// change featured image
image_to_show = variations[i].image_src;
found = true;
}
}
}
});
// after woo additional images has changed the image,change it again
jQuery(".variations_form").on("wc_additional_variation_images_frontend_image_swap_done_callback",function() {
if(image_to_show.length) {
$(".attachment-shop_single").attr("src",image_to_show).removeAttr("srcset");
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。