Woocommerce Variation 样本插件划掉不匹配的属性？

Posted 2023-05-09

【中文标题】Woocommerce Variation 样本插件划掉不匹配的属性？

【英文标题】：Woocommerce Variation swatches plugin cross out not matching attributes?

【发布时间】：2017-12-20 10:17:30

【问题描述】：

这是我选择第一个属性（尺寸）时如何显示变化的屏幕截图，它不显示匹配的颜色，也不会像下面的屏幕截图那样划掉不匹配的颜色（这是一个名为改进的可变产品属性插件的高级插件）。

有没有办法通过添加简单的 javascript 来删除 Variation Swatches Plugin For Woocommerce 中不匹配的属性？

经过反复试验，我写了一点代码。 其他人有更好的贡献表示赞赏。

【参考方案1】：

经过反复试验，我写了下面的代码并添加到 wp-content\plugins\variation-swatches-for-woocommerce\assets\js\frondend.js 文件中的点击事件。

在 onclick 事件的末尾添加以下代码

/*
* 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-swatches-for-woocommerce\assets\css\frondend.css中添加这个划掉的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);

添加此代码sn-p后的结果