php 在WooCommerce中点击自动更新购物车

jw5wzhpr  于 2023-05-21  发布在  PHP
关注(0)|答案(9)|浏览(175)

我想在数量改变时自动更新购物车。我在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; 
}
0yg35tkg

0yg35tkg1#

试试这样。

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点击事件不再存在...如果你把它附在身体上,也许会有用

mpbci0fu

mpbci0fu2#

发生这种情况的原因是因为使用 AJAX 刷新了dom,并且刷新了事件。
你需要做的是监听事件'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,它可以有所不同

zbq4xfa0

zbq4xfa03#

它只在第一次单击时起作用的原因是,每次更新表单时,它都会刷新自己。所以,不要做:

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

您需要将div.woocommerce切换到document

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

xoefb8l84#

你可以使用下面的插件。
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;
}
rks48beu

rks48beu5#

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

daupos2t6#

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

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; 
}
mrwjdhj3

mrwjdhj37#

当页面加载时,更新按钮实际上是禁用的,因此您基本上需要在触发click事件之前启用它。
使用此代码:

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;
}
o2rvlv0m

o2rvlv0m8#

将此代码复制到函数:

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;
}
0s7z1bwu

0s7z1bwu9#

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,我们可以将其放在代码片段中。每当添加产品或增加产品价值,它的更新自动在购物车页面

相关问题