在 WooCommerce 中单击时自动更新购物车

Question

我想在数量改变时自动更新购物车。 我在functions.php得到了这个工作代码，但它只适用于第一次点击。 如何调整它以使其适用于每次点击？

add_action( 'wp_footer', 'cart_update_qty_script' ); 
function cart_update_qty_script() { 
    if (is_cart()) : 
    ?> 
    <script> 
        jQuery('div.woocommerce').on('click', '.quantity .button', function(){ 
            jQuery("[name='update_cart']").trigger("click"); }); 
    </script> 
    <?php 
    endif; 
}

Answer 1

像这样试试..

add_action( 'wp_footer', 'cart_update_qty_script' ); 
function cart_update_qty_script() { 
    if (is_cart()) : 
    ?> 
    <script>
    jQuery( 'div.woocommerce' ).on( 'change', '.qty', function () {
    jQuery( "[name='update_cart']" ).trigger( "click" );
    } );
    </script>
    <?php 
    endif; 
}

我是因为 html 被替换了，div.woocommerce click 事件不再存在......如果你将它附加到 body，它可能会工作......

Answer 2

发生这种情况的原因是您的 dom 已使用 Ajax 刷新并且事件已刷新。

您需要做的是侦听事件“updated_cart_totals”，它会告诉您 dom 已更新，然后重新激活您的侦听器。

function quantity_upd() {
  $(".woocommerce-cart-form").on("change", ".qty", function() {
    $("[name='update_cart']").removeAttr('disabled');
    $("[name='update_cart']").trigger("click");
  });
}

$( document ).on( 'updated_cart_totals', function() {
  quantity_upd();
}

请根据您的主题和 HTML 进行调整，它可能会有所不同

Answer 3

您可以使用如下插件。

https://wordpress.org/plugins/woo-update-cart-on-quantity-change/

这个插件也适合你。

https://wordpress.org/plugins/woocommerce-ajax-cart/

请使用插件以确保安全，因为插件适用于每个 wordpress 版本和 woocommerce 版本。

或

您可以尝试像下面这样稍作修改的自定义代码。

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
        ?>
        <script type="text/javascript">
            jQuery(document).on("click", "div.woocommerce .quantity .button", function(e) {
               jQuery("[name='update_cart']").trigger("click"); 
            });

OR  
            jQuery("body").on("click", "div.woocommerce .quantity .button", function(e) {
                jQuery("[name='update_cart']").trigger("click"); 
            });
        </script>
        <?php
    endif;
}

Answer 4

因为我不知道你的 HTML 结构，所以我构建了一个示例 jQuery，它正在处理店面主题。

这是一个示例代码。

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
    if (is_cart()) :
    ?>
    <script>
        jQuery('div.woocommerce').on('keyup', '.quantity .qty', function(){
            //console.log('clicked');
            jQuery("[name='update_cart']").trigger("click"); });
    </script>
    <?php
    endif;
}

Answer 5

与其尝试触发点击，不如从“更新购物车”按钮中删除“禁用”属性，以便用户可以点击它。 购物车页面已经以这种方式工作，当商品的数量发生变化时，“更新购物车”按钮变得可点击。

add_action( 'wp_footer', 'cart_update_qty_script' ); 
function cart_update_qty_script() { 
    if (is_cart()) : 
    ?> 
    <script> 
        jQuery('body').on('click', 'div.woocommerce .quantity .button', function(){ 
            jQuery("[name='update_cart']").prop("disabled", false);
        }); 
    </script> 
    <?php 
    endif; 
}

Answer 6

页面加载时更新按钮实际上是禁用的，因此您基本上需要在触发点击事件之前启用它。

使用此代码：

add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
  if (is_cart()) :
   ?>
    <script>
        jQuery('div.woocommerce').on('change', '.qty', function(){
           jQuery("[name='update_cart']").removeAttr('disabled');
           jQuery("[name='update_cart']").trigger("click"); 
        });
   </script>
<?php
endif;
}

Answer 7

将此代码复制到函数：

function bbloomer_cart_refresh_update_qty() { 
   if (is_cart()) { 
      ?>      
      <script>
        jQuery('div.woocommerce').on('change', '.qty', function(){
            jQuery("[name='update_cart']").prop("disabled", false);
            jQuery("[name='update_cart']").trigger("click");
        });
        </script>
      <?php 
   } 
}

结束这个风格：

button[name='update_cart'] {
display: none !important;
}

Answer 8

它只适用于第一次点击的原因是因为每次更新表单时，它都会自行刷新。 所以，而不是做：

jQuery('div.woocommerce').on('click', '.quantity .button', function() {

您需要将div.woocommerce切换到document ：

jQuery('document').on('click', '.quantity .button', function() {