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

问题描述

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

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

如果先选择颜色，则存储 - 颜色列表会根据缺货内容进行更新。

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

dispatch

解决方法

您可以检查产品变体的可用性只有在选择了除一个属性之外的所有属性时，而不是之前。

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

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

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

想法是这样的：

1. 检查产品页面上是否有多个属性（下拉菜单）
2. 如果除了一个属性之外的所有属性（下拉列表）都被选中，获取属性slug和所选选项的属性值
3. 将它们与每个变体使用的属性进行比较，如果所选属性相同，则获取要选择的最后一个属性的库存状态
4. 向产品变体没有库存的每个选项添加文本“缺货”。为此，它将使用在通过 Ajax 更新选项后触发的 woocommerce_update_variation_values 事件（否则更改将被覆盖）

以下代码适用于 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。

结果

相关答案

• How to add variation stock status to Woocommerce product variation dropdown
• Show stock status next to each attribute value in WooCommerce variable products
• Display variation stock status on single dropdown variable products in Wocommerce 3

,

add_filter('woocommerce_variation_option_name','display_price_in_variation_option_name');
function display_price_in_variation_option_name($term)
{
    global $wpdb,$product;
    $result = $wpdb->get_col("SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'");
    $term_slug = (!empty($result)) ? $result[0] : $term;
    $query = "SELECT postmeta.post_id AS product_id
                FROM {$wpdb->prefix}postmeta AS postmeta
                    LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
                WHERE postmeta.meta_key LIKE 'attribute_%'
                    AND postmeta.meta_value = '$term_slug'
                    AND products.post_parent = $product->id";
    $variation_id = $wpdb->get_col($query);
    $parent = wp_get_post_parent_id($variation_id[0]);
    if ($parent > 0) {
        $_product = new WC_Product_Variation($variation_id[0]);
        $_currency = get_woocommerce_currency_symbol();
        $stock = $_product->is_in_stock() ? 'instock' : 'out of stock';
        return $term . ' (' . $_product->get_price()  . ' ' . $_currency . ')  -  ' . $stock;
    }
    return $term;
}