在 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 点击事件不再存在...如果你将它附加到正文，它可能会工作...

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

它仅在第一次单击时起作用的原因是因为每次更新表单时，它都会自行刷新。所以不要这样做：

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

您需要将

div.woocommerce

切换为

document

:

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

Answer 4

您可以使用如下插件。

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 5

因为我不知道你的 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 6

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

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 7

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

使用此代码：

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 8

将此代码复制到函数中：

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 9

jQuery( function( $ ) {
 let timeout;
 $('.woocommerce').on( 'change', 'input.qty', function(){
  if ( timeout !== undefined ) {
   clearTimeout( timeout );
  }
  timeout = setTimeout(function() {
   $("[name='update_cart']").trigger("click"); 
  }, 500 ); 
 });
} );

使用 javascript，我们可以将其放入代码片段中。每当添加产品或增加产品价值时，它都会在购物车页面中自动更新

Answer 10

我找到了解决这个问题的完美且有效的解决方案。请访问CodexCoach获取它。