Woocommerce Variation swatches插件交叉出不匹配的属性? [英] Woocommerce Variation swatches plugin cross out not matching attributes?
问题描述
这是我选择时显示变体的截图第一个属性(大小),它没有显示匹配的颜色或没有交叉出不匹配的颜色,如下面的截图(这是一个名为改进的变量产品属性插件的高级插件)。
Here is a screenshot of how the variations displayed when I selected first attribute (Size), it doesn't show the matching colors or doesn't cross out unmatching colors like the screenshot below (This is a premium plugin called Improved Variable Product Attributes Plugin).
有没有办法在<中删除不匹配的属性strong> Woocommerce的Variation Swatches插件通过添加简单的Javascript?
Is there any way to cross out unmatching attributes in Variation Swatches Plugin For Woocommerce by adding simple Javascript?
经过一些试验和错误尝试,我写了一些代码。
其他任何人都有更好的贡献赞赏。
After some trial and error tries, I wrote a little bit of code. Anyone else has better contributions appreciated.
推荐答案
经过一些试验和错误后,我写了下面这段代码并添加到
中的点击事件wp-content \plugins \ variation-swatches-for-woocommerce \ assets \ js \ frondend.js
file。
After some trial and error, I wrote this below code and added to
the click event in wp-content\plugins\variation-swatches-for-woocommerce\assets\js\frondend.js
file.
在onclick事件结束时添加以下代码
Add the below code at the end of onclick event
/*
* Not Available display Hack
*/
var which = $el.closest( '.value' ).parent('tr').siblings(); which.removeClass('curr-select');
which.toggleClass('curr-select');
var available_value_select = $('.curr-select .value').find( 'select' ),
other_swatches = which.find('.swatch');
other_swatches.removeClass('tawvs-no-stock');
if($el.hasClass('selected')) {
setTimeout(function() {
other_swatches.each(function(index, el) {
console.log($( this ).data('value') +' - '+ available_value_select.find('option[value="' + $( this ).data('value') + '"]').val() +' - '+ available_value_select.find('option[value="' + $( this ).data('value') + '"]').length);
if( !available_value_select.find('option[value="' + $( this ).data('value') + '"]').length && !$(this).hasClass('selected'))
$( this ).addClass('tawvs-no-stock');
});
},200);
// console.log(available_value_select);
}
/*
* Not Available display Hack
*/
例如:
$form
.addClass( 'swatches-support' )
.on( 'click', '.swatch', function ( e ) {
// code here
})
还要在 wp-content \plugins \ variation-中添加这个交叉的css代码swatches-for-woocommerce\assets\css\frondend.css
.tawvs-no-stock:before, .tawvs-no-stock:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
width: 0px;
height: 26px;
display: block;
border: solid #F44336;
border-width: 0 2px 2px 0;
position: absolute;
top: 6px;
left: 18px;
}
.tawvs-no-stock:after {
transform: rotate(-45deg);
}
添加此代码段后的结果
这篇关于Woocommerce Variation swatches插件交叉出不匹配的属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!