在具有多个变体的 Woocommerce 产品变体旁边显示“缺货”文本

Question

我一直在到处寻找，但似乎找不到一个非常简单问题的解决方案。我有一家 Woocommerce 商店，如果缺货，我想向用户显示变体旁边的“缺货”消息。我不希望它变灰，我希望用户能够选择它，以便他们可以根据需要查看价格。我在网上找到的大多数片段仅在产品有一种变体时才有效，但我需要它至少适用于两种变体。我的网站销售移动设备，例如：

如果用户选择存储为 64GB，则颜色列表会更新，显示 64GB 中哪些颜色缺货。如果所有颜色都缺货，那么 64GB 旁边也会显示“缺货”。

如果先选择颜色，然后存储 - 颜色列表会更新为缺货的颜色。

有人可以帮我吗？试图让这个工作变得疯狂。下面的代码可以按照我上面提到的确切方式将缺货产品变灰（它适用于多种产品），但我不知道如何针对上面提到的用例修改它。

add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );
function grey_out_variations_when_out_of_stock( $grey_out, $variation ){
if ( ! $variation->is_in_stock() ){
  return false;
 }else{
print_r($option_class);
  return $term_name . ' - Out of Stock';;
 }
}

Answer 1

仅当选择了除其中一个属性之外的所有属性时（而不是之前），您才能检查产品变体的可用性。

所有必要的数据都显示在产品页面上，因此您可以使用 jQuery 脚本来处理它。

在变体表单中，有

data-product_variations

 属性，其中包含一个数组，其中包含产品变体的所有详细信息（变体 ID、库存状态、它使用的属性等）。

然后您可以在所选属性和可能的产品变体之间进行比较。

想法是这样的：

获取属性 slug 和所选选项的属性值
获取最后选择的属性的库存状态

“缺货”。为此，它将使用 woocommerce_update_variation_values

 事件，该事件在通过 Ajax 更新选项后触发（否则更改将被覆盖）

以下代码适用于 2 个或更多属性（下拉列表）可变产品页面。

// add the text "Out of stock" to each option of the last unselected attribute dropdown
add_action( 'wp_footer', 'add_out_of_stock_text_to_the_last_unselected_attribute_dropdown' );
function add_out_of_stock_text_to_the_last_unselected_attribute_dropdown() {

    ?>
    <script type="text/javascript">

    // initializes a global variable that will contain the attribute values to be updated ("Out of stock")
    let globalAttributesToUpdate;

    jQuery(function($){

        // check if only one attribute is missing to be selected
        function isLastAttribute(){
            // if there is only one dropdown it returns false
            if ( $('form.variations_form select').length == 1 ) {
                return false;
            }
            // counts all selected attributes (excluding "Choose an option")
            let count = 0;
            $('form.variations_form select').each(function(){
                if ( $(this).find(':selected').val() ) {
                    count++;
                }
            });
            // if an attribute has not yet been selected, it returns true
            if ( $('form.variations_form select').length - count == 1 ) {
                return true;
            } else {
                return false;
            }
        }

        $('form.variations_form select').change(function() {
            if ( isLastAttribute() ) {
                // clear the global variable every time
                globalAttributesToUpdate = [];
                let attrToFind = {}; // contains an object with slug and value of the selected attributes
                let attrToSet; // contains the slug of the attribute not yet selected
                $('form.variations_form select').each(function(index,object){
                    if ( $(this).find(":selected").val() ) {
                        attrToFind[$(this).data('attribute_name')] = $(this).find(":selected").val();
                    } else {
                        attrToSet = $(this).data('attribute_name');
                    }
                });
                // gets the value of the "data-product_variations" attribute of the variations form
                let variationData = $('form.variations_form').data("product_variations");
                $(variationData).each(function(index,object) {
                    let attrVariation = object.attributes;
                    let attrVariationLenght = Object.keys(attrVariation).length;
                    let found = 0;
                    let toSet;
                    let valueToSet;
                    // check all possible combinations of attributes (for single variation)
                    // based on the selected attributes
                    $.each( attrVariation, function( attr, value ) {
                        if ( attr in attrToFind && attrToFind[attr] == value ) {
                            found++;
                        } else {
                            // if the variation is out of stock it gets slug and value to add the text "Out of stock"
                            if ( object.is_in_stock == false ) {
                                toSet = attr;
                                valueToSet = value;
                            }
                        }
                    });
                    // if only one attribute is missing
                    if ( attrVariationLenght - found == 1 ) {
                        if ( toSet == attrToSet ) {
                            let obj = {};
                            obj[toSet] = valueToSet;
                            globalAttributesToUpdate.push(obj);
                        }
                    }
                });
            }
        });

        // inserts the text "Out of stock" after updating the variations
        // based on the "globalAttributesToUpdate" global variable
        $('body').on('woocommerce_update_variation_values', function(){
            if ( globalAttributesToUpdate !== undefined && globalAttributesToUpdate.length ) {
                $.each( globalAttributesToUpdate, function( key, attribute ) {
                    $.each( attribute, function( attrName, attrValue ) {
                        $('select[name='+attrName+'] > option[value="'+attrValue+'"]').append( " (Out of stock)" );
                    });
                });
            }
        });
    });
    </script>
    <?php

}

代码已经过测试并且可以工作。将其添加到您活动主题的functions.php中。

结果

在具有多个变体的 Woocommerce 产品变体旁边显示“缺货”文本

问题描述投票：0回答：3

3个回答

最新问题

在具有多个变体的 Woocommerce 产品变体旁边显示“缺货”文本

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3