如何在 woocommerce cart.php 中启用更新购物车按钮？

Question

您好，我一直在尝试让我的“更新购物车”按钮在 woocommerce 制作的购物车页面上工作。这是我自己的主题，我已经添加了 cart.php 模板。在 woocommerce 模板中，它有数量，但没有易于使用的添加更多或更少按钮。所以我编辑了 global/quantity-input.php 来拥有这个特性。我已经测试了单一产品页面以使用我的新数量并添加到购物车。这很好用。但是在购物车页面上，除非进行更改，否则更新购物车按钮被禁用，并且它无法识别我的更改。

我尝试过的有效方法：

• 当我手动进入检查器并从按钮中删除“禁用”属性时
• 当我在按“-”或“+”按钮后按键盘上的“输入”输入数量时。
• 加号和减号确实会改变输入字段中的数量
• 输入数量可启用更新购物车按钮

我尝试过但不起作用的方法：

• 使用 javascript 定位按钮并执行 'update_cart.disable = false;'
• 尝试调用提交更改以自动调整购物车
• 只是希望表单通过我的按钮识别数量变化

我的 Javascript 代码

   function minus_quantity(e) {
        var this_input = this.parentNode.querySelector('input[type=number]');
        var current_val = this_input.value;
        var new_val = parseInt(current_val) - 1;
        this_input.value = new_val;
        document.getElementsByName('update_cart').disable = false;
        e.preventDefault();
    }
    function add_quantity(e) {
        var current_val = this.parentNode.querySelector('input[type=number]').value;
        var new_val = parseInt(current_val) + 1;
        this.parentNode.querySelector('input[type=number]').value = new_val;
        document.getElementsByName('update_cart').disable = false;
        e.preventDefault();
    }

我在 cart.php 中的代码

                            <button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>
                            <?php do_action( 'woocommerce_cart_actions' ); ?>
                            <?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>

我在浏览器中的 HTML 代码

<button type="submit" class="button" name="update_cart" value="Update cart" disabled="">Update cart</button>
<input type="hidden" id="woocommerce-cart-nonce" name="woocommerce-cart-nonce" value="6090857223">
<input type="hidden" name="_wp_http_referer" value="/cart/?purge_success=1&amp;cache_type=all"><!--                        </div>-->

我应该提到按钮上的选择器不起作用，我不知道为什么。

另外，我对 woocommerce 非常陌生，找不到关于此主题的任何内容。感谢您阅读本文。

更新 1：

我找到了这张票并试了一下 Woocommerce 2.6.2 adds disabled attribute to update cart button

• 我将此添加到我的 javascript 函数的底部（我确实确保它在 Jquery 包装器中） $('button[name="update_cart"]' ).removeProp( 'disabled'); 然而，这也不起作用。我使用了检查器，它似乎没有用选择器返回任何东西，但是当我控制台记录它时，我得到了一些东西。

Answer 1

您的 javascript 无法正常工作的原因有两个：

1. 你需要改变的属性不是“禁用”，应该是“禁用”。

2. 您正在使用 getElementsByName 从 DOM 中选择您的按钮，它实际上会返回页面中所有具有该名称的元素的数组。您访问它并更改 disabled 属性的方式（假设您只有一个具有该名称的元素）将是这样的：

   document.getElementsByName('update_cart')[0].disabled = false;

但是，这是一种不好的做法，因为您可以拥有多个具有该名称的元素，因此我建议为您的按钮提供一个 id，然后改用 getElementById。在这种情况下，您不需要添加 [0]。