首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >您的位置:凡人谷知道>商业/商务>结账页面产品数量下拉更新与ajax jQuery?

您的位置:凡人谷知道>商业/商务>结账页面产品数量下拉更新与ajax jQuery?
EN

Stack Overflow用户
提问于 2020-09-24 20:09:54
回答 1查看 239关注 0票数 0

我在子主题function.php中添加了代码,以便在结帐页面中添加下拉数量,以便客户可以更改产品数量和价格自动更新,每次他们选择一个数字。

问题是,当我在结帐页面中更改quantity值时,价格不会更新。https://ibb.co/6JNDWgj

将下拉菜单添加到结帐页面的代码为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) {
  
   if ( is_null( $product ) ) {
      $product = $GLOBALS['product'];
   }
 
   $defaults = array(
      'input_id' => uniqid( 'quantity_' ),
      'input_name' => 'quantity',
      'input_value' => '1',
      'classes' => apply_filters( 'woocommerce_quantity_input_classes', array( 'input-text', 'qty', 'text' ), $product ),
      'max_value' => apply_filters( 'woocommerce_quantity_input_max', -1, $product ),
      'min_value' => apply_filters( 'woocommerce_quantity_input_min', 0, $product ),
      'step' => apply_filters( 'woocommerce_quantity_input_step', 1, $product ),
      'pattern' => apply_filters( 'woocommerce_quantity_input_pattern', has_filter( 'woocommerce_stock_amount', 'intval' ) ? '[0-9]*' : '' ),
      'inputmode' => apply_filters( 'woocommerce_quantity_input_inputmode', has_filter( 'woocommerce_stock_amount', 'intval' ) ? 'numeric' : '' ),
      'product_name' => $product ? $product->get_title() : '',
   );
 
   $args = apply_filters( 'woocommerce_quantity_input_args', wp_parse_args( $args, $defaults ), $product );
  
   // Apply sanity to min/max args - min cannot be lower than 0.
   $args['min_value'] = max( $args['min_value'], 0 );
   // Note: change 20 to whatever you like
   $args['max_value'] = 0 < $args['max_value'] ? $args['max_value'] : 15;
 
   // Max cannot be lower than min if defined.
   if ( '' !== $args['max_value'] && $args['max_value'] < $args['min_value'] ) {
      $args['max_value'] = $args['min_value'];
   }
  
   $options = '';
    
   for ( $count = $args['min_value']; $count <= $args['max_value']; $count = $count + $args['step'] ) {
 
      // Cart item quantity defined?
      if ( '' !== $args['input_value'] && $args['input_value'] >= 1 && $count == $args['input_value'] ) {
        $selected = 'selected';      
      } else $selected = '';
 
      $options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
 
   }
     
   $string = '<div class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';
 
   if ( $echo ) {
      echo $string;
   } else {
      return $string;
   }
  
}

在结帐页面中添加字段的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* It will remove the selected quantity count from checkout page table.
*/
function webroom_remove_quantity_count( $cart_item, $cart_item_key ) {
   $product_quantity= '';
   return $product_quantity;
}

add_filter ('woocommerce_checkout_cart_item_quantity', 'webroom_remove_quantity_count', 10, 2 );

/*
 * It will add Delete button, Quanitity field on the checkout page Your Order Table.
 */
function webroom_add_delete_and_quantity_on_checkout( $product_title, $cart_item, $cart_item_key ) {

/* Checkout page check */
if (  is_checkout() ) {
    /* Get Cart of the user */
    $cart     = WC()->cart->get_cart();
        foreach ( $cart as $cart_key => $cart_value ){
           if ( $cart_key == $cart_item_key ){
                $product_id = $cart_item['product_id'];
                $_product   = $cart_item['data'] ;
                
                /* Step 1 : Add delete icon */
                $return_value = sprintf(
                  '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                  esc_url( wc_get_cart_remove_url( $cart_key ) ),
                  __( 'Delete', 'woocommerce' ),
                  esc_attr( $product_id ),
                  esc_attr( $_product->get_sku() )
                );
                
                /* Step 2 : Add product name */
                $return_value .= '&nbsp; <span class = "product_name" >' . $product_title . '</span>' ;
                
                /* Step 3 : Add quantity selector */
                if ( $_product->is_sold_individually() ) {
                  $return_value .= sprintf( ' <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_key );
                } else {
                  $return_value .= woocommerce_quantity_input( array(
                      'input_name'  => "cart[{$cart_key}][qty]",
                      'input_value' => $cart_item['quantity'],
                      'max_value'   => $_product->backorders_allowed() ? '' : $_product->get_stock_quantity(),
                      'min_value'   => '1'
                      ), $_product, false );
                }
                return $return_value;
            }
        }
}else{
    /*
     * It will return the product name on the cart page.
     * As the filter used on checkout and cart are same.
     */
    $_product   = $cart_item['data'] ;
    $product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
    if ( ! $product_permalink ) {
        $return_value = $_product->get_title() . '&nbsp;';
    } else {
        $return_value = sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
    }
    return $return_value;
  }
}

add_filter ('woocommerce_cart_item_name', 'webroom_add_delete_and_quantity_on_checkout' , 10, 3 );


/* Add js at the footer */
function webroom_add_quanity_js(){
  if ( is_checkout() ) {
    wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/js/add_quantity.js', '', '', false );
    $localize_script = array(
      'ajax_url' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script( 'checkout_script', 'add_quantity', $localize_script );
  }
}
add_action( 'wp_footer', 'webroom_add_quanity_js', 10 );
function webroom_load_ajax() {
  if ( !is_user_logged_in() ){
      add_action( 'wp_ajax_nopriv_update_order_review', 'webroom_update_order_review' );
  } else{
      add_action( 'wp_ajax_update_order_review', 'webroom_update_order_review' );
  }
}
add_action( 'init', 'webroom_load_ajax' );
function webroom_update_order_review() {
  $values = array();
  parse_str($_POST['post_data'], $values);
  $cart = $values['cart'];
  foreach ( $cart as $cart_key => $cart_value ){
      WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );
      WC()->cart->calculate_totals();
      woocommerce_cart_totals();
  }
  wp_die();
}

“/js/add_antity.js”中的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
jQuery(function( $ ) {
    $( "form.checkout" ).on( "click", "input.qty", function( e ) {
      var data = {
      action: 'update_order_review',
      security: wc_checkout_params.update_order_review_nonce,
      post_data: $( 'form.checkout' ).serialize()
    };

    jQuery.post( add_quantity.ajax_url, data, function( response )
    {
      $( 'body' ).trigger( 'update_checkout' );
    });
  });
});

我用.change将行改为上面的行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$( "form.checkout" ).change( function( e ) {

我结束了一个无限循环。订单保持每2秒自动刷新一次。当数量发生变化时,价格只更新一次,我该如何解决这个问题?

EN

回答 1

Stack Overflow用户

发布于 2020-09-25 20:39:53

我可以通过在第一段代码中给div一个ID,并在JS文件中做一个小的修改来实现它。

代码是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$string = '<div class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';

我在代码中添加了ID #sb-qty:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$string = '<div id="sb-qty" class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';

JS代码的第一行是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$( "form.checkout" ).on( "click", "input.qty", function( e ) {

我更改为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$( "form.checkout" ).on('change', '#sb-qty', function( e ) {

到目前为止,dropdown运行得很好,并且只在数量发生变化时更新。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64053723

复制
相关文章
Mac OS 上设置 JAVA_HOME
由于需要,前几天在 OS X 上安装了 Oracle 的 Java 7。安装之后,发现由于我原来设置的 JAVA_HOME 为 /Library/Java/Home ,导致我使用的还是原来苹果提供的 Java 6 而不是刚安装的 Java 7。
码客说
2019/10/22
2.1K0
在 Debian Stretch 上设置自动升级
不少博主,出于安全、稳定的考虑,在自己的服务器上使用了 Debian 操作系统。我们知道,对于多数应用环境,特别是 LNMP 环境,绝大多数安全更新可以自行安装,本文我们将详细介绍,如何在 Debian 环境下自行下载安装最新的系统安全补丁。
Debian中国
2018/12/21
8960
org.apache.catalina.startup.Catalina stopServer SEVERE
在测试nginx反向代理 时在同一个liunx上配置了三个tomcat7,startup.sh时正常启动。shutdown.sh时报错如下:
拓荒者
2019/03/16
3.3K0
【JAVA】JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解
源地址:http://www.21jn.net/html/72/n-272.html
蛮三刀酱
2019/09/10
1.8K0
关于MacOs Catalina “无法打开***,因为无法验证开发者...”的解决方案
今天在升级Flutter后直接flutter doctor命令,报了一个【无法打开Dart,因为无法验证开发者】的警告。可以使用下面的命令进行授权:
xiangzhihong
2022/11/30
1.9K0
在 Debian Linux 上设置和配置网桥
如何你想为你的虚拟机分配 IP 地址并使其可从你的局域网访问,则需要设置网络桥接器。默认情况下,虚拟机使用 KVM 创建的专用网桥。但你需要手动设置接口,避免与网络管理员发生冲突。
用户8989785
2021/09/10
5.3K0
catalina.home catalina.base 区别
这两个属性仅在你需要安装多个Tomcat实例而不想安装多个软件备份的时候使用,这样能节省磁盘空间。 以Tomcat6.0为例,其Tomcat目 录结构如下: bin (运行脚本) conf (配置文件) lib (核心库文件) logs (日志目录) temp (临时目录) webapps (自动装载的应用程序的目录) work (JVM临时文件目录[Java.io.tmpdir]) 其中只有 bin 和 lib 目录被多个tomcat示例公用,其它目录conf、logs、temp、webapps和work
Java学习123
2018/05/16
1.1K0
已上架的App在AppStore上无法搜索到的问题
iOS Magician
2023/10/11
2410
已上架的App在AppStore上无法搜索到的问题
已上架的App在AppStore上无法搜索到的问题
我们都知道上架如果APP证书过期也会导致失败,这边我们就推荐一个好用的工具-appuploder。
爱学iOS的小麦子
2023/07/06
5740
在 Linux 上使用 systemd 设置定时器
定时器增加了另一种启动服务的方式,基于……时间。尽管与定时任务很相似,但 systemd 定时器稍微地灵活一些。让我们看看它是怎么工作的。
用户8989785
2021/09/10
1.7K0
在MacOSX机器上设置JenkinsCI服务器
Jenkins Wiki提供了用于Jenkins安装的选项列表,但没有提及Mac OSX。尽管它提到了Docker,但我只听说过有关Docker的好消息。在本文中,我将坚持使用自制软件。在继续操作之前您需要在Mac上安装和配置JDK。
DevOps云学堂
2020/07/24
2.4K0
crontab JAVA_HOME not found
虽然环境变量中配置的JAVA_HOME,但是crontab在执行shell脚本时依然报JAVA_HOME not found。需要在shell脚本上方手动配置环境变量,脚本中添加如下内容:
我是李超人
2020/08/21
1.3K0
如何在Mac上的软件更新中隐藏MacOS Catalina更新提示
有好多小伙伴不愿意升级到MacOS Catalina,但是电脑上有系统更新的红点,那么怎么去除呢,下面教大家如何在Mac上的软件更新中隐藏MacOS Catalina,Mac取消系统更新的红点。
MAC先森
2019/10/21
5.4K0
解决VMware 7在Windows 7上无法上网的问题
Windows 7上的VPC不能安装64位的操作系统和Linux等,就安装了个VMware 7来解决我的这个问题,另一个问题出来了虚拟机里头的系统无法上网,通过Google找到一些方法,写的都不详细,这里记录下最完整的配置过程: 首先打开Windows 7的网络和共享中心,然后点左边的更改适配器设置,你会看到两个由VMware创建的虚拟连接,找到VMware Network Adapter VMnet1,记住它的连接名称。 然后右击你当前使用中的连接(比如我使用的是ADSL连接)选择属性,把全部的钩都打上,
张善友
2018/01/19
2.7K0
解决VMware 7在Windows 7上无法上网的问题
在navicat上设置定时计划执行存储过程
有一个存储过程,需要每天定时执行一次。所以在navicat上使用事件处理,当然还有其他的方法,这只是一种。作为参考
Java架构师历程
2019/03/08
2.2K0
在navicat上设置定时计划执行存储过程
Apache Kafka 在 Windows 系统上设置与运行教程
手把手教你在 Windows 系统安装运行 Apache Zookeeper 和 Apache Kafka 服务。
柳公子
2018/09/17
2.7K0
Apache Kafka 在 Windows 系统上设置与运行教程
在Android和iOS上设置手机ip详细教程
大家好!今天我们将分享一个关于如何在Android和iOS设备上设置手机ip(Layer 2 Tunneling Protocol)的简易教程。如果你想要通过安全且可靠的方式连接到远程网络,那么跟着本文一起学习吧!无需复杂操作,让我们开始愉快地探索吧!
华科云商小徐
2023/09/07
5970
Tomcat配置环境变量
Tomcat是目前比较流行的开源且免费的Web应用服务器,在我的电脑上第一次安装Tomcat,再经过网上教程和自己的摸索后,将这个过程 重新记录下来,以便以后如果忘记了可以随时查看。
全栈程序员站长
2022/08/19
1.7K0
Tomcat配置环境变量
基于nGrinder下的web网站性能测试
nGrinder 看名字估计很多人就猜到跟Grinder有关系。nGrinder是韩国一家公司居于Grinder二次开发的一个性能平台。nGrinder具有 开源、易用、高可用、高扩展等特性,在Grinder基础上实现了多测试并行,通过web管理,实现了集群,同时支持Groovy和Jython脚本语言,(官方上说,Groovy的性能会更好),也实现了对目标服务的监控以及插件的扩展,简单实现更多用户虚拟用户并发(官方上说,8G内存的4核cpu机器可以支持高到8000个虚拟用户)
用户6367961
2019/09/29
1.3K0
点击加载更多

相似问题

如何在我的项目中使用2d-extras压缩文件?(或任何其他外部unity下载)

137

如何在unity中从url下载zip文件?

392

如何在Unity WebGL中使用javascript下载图像

10

组件,如ubuntu unity的overlay scrollbar

10

如何在github中下载开源项目(如Spring)

23
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文