如果 woocommerce 数量输入大于库存数量，如何显示短信？

Question

我想显示一条自定义文本消息，以通知客户他们选择的输入数量（在单击“添加到购物车”按钮之前）。如果所选数量大于现有可用库存数量，则会出现此消息，位于单个产品页面中数量选择的正上方。例如：

Existing Stock Quantity: 2
User Selects: >2

在这种情况下，我想告诉客户类似这样的信息：“您选择的订单数量大于我们现有的库存。预计我们的库存最多会延迟 2 周补货。”

我尝试将自定义代码添加到代码片段中，看起来像这样：

function display_order_quantity_exceeds_stock_quantity_text( $message, $product ) {

if( $product->woocommerce_quantity_input() > $product->get_stock_quantity()) {
    $message = "Your selected order quantity is greater than our existing stock. Please expect a delay of up to 2 weeks for our stock to be replenished.";
}
return $message;

}

有谁知道我如何获得 woocommerce_quantity_input 并让它工作？

宁愿通过在代码片段中添加一个函数来获得解决方案，而不是使用 Javascript（如果可能）。

Answer 1

在你的主题的 footer.php 中添加这个 jQuery 代码将在用户输入的值超过 stock 时触发警报

<script type="text/javascript">

function show_error($field, $mesg) {
    if ($field.prev('.error_msg').length) {
        $field.prev('.error_msg').html('<p>' + $mesg + '</p>');
    } else {
        jQuery('<div class="error_msg" style="color:#f00"><p>' + $mesg + '</p></div>').insertBefore($field);
    }

}

function remove_error($field) {
    if ($field.prev('.error_msg').length) {
        $field.prev('.error_msg').remove();
    }
}

jQuery(".quantity input[name=quantity]").on('change', function(e) {

    if (jQuery(this).val() > jQuery(this).attr("max")) {
        show_error(jQuery(this).parent(".quantity"), "Your selected order quantity is greater than our existing stock. Please expect a delay of up to 2 weeks for our stock to be replenished")
    } else {
        remove_error(jQuery(this).parent(".quantity"));
    }
})

</script>

您必须启用管理库存，并为此产品设置库存编号才能使其正常工作。

Answer 2

我会通过 jQuery 执行此操作，因此将其添加到您的 functions.php（$src 变量指向您的主题文件夹中的 JS 文件位置）：

function a3_enqueue_scripts() {
    if(is_singular( 'product' )){       
        $handle = 'a3_wooc_js';

        //path to your Javascript file
        $src = get_theme_file_uri( '/js/a3_wooc.js' );

        wp_enqueue_script( $handle, $src, array( 'jquery' ), false, false);  
    }
}

add_action( 'wp_enqueue_scripts', 'a3_enqueue_scripts' );

在包含的 JS 文件中是这样的：

(function($){
    $(document).ready(function(){
        //the jQuery selector depends on your theme output for the quantity text box identifiers
        $('[name="quantity"]').on('change', function(e){
            var qty_box = $(this);
            var error_message = $('<div class="error_msg">Your selected order quantity is greater than our existing stock. Please expect a delay of up to 2 weeks for our stock to be replenished</div>');

            console.log(parseInt(qty_box.val()), parseInt(qty_box.attr('max')), qty_box.val() > parseInt(qty_box.attr('max')));

            if(parseInt(qty_box.val()) > parseInt(qty_box.attr('max'))) {
                // the action to take if the quantity exceeds max stock     
                if($('.quantity .error_msg').length < 1){
                    $('.quantity').prepend(error_message);                              
                }               
            }
            else {
                $('.quantity .error_msg').remove();
            }
        });
    });
})(jQuery);