Woocommerce Variation swatches插件交叉出不匹配的属性？

问题描述

这是我选择时显示变体的截图第一个属性（大小），它没有显示匹配的颜色或没有交叉出不匹配的颜色，如下面的截图（这是一个名为改进的变量产品属性插件的高级插件）。

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).

有没有办法在 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插件交叉出不匹配的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！