在WooCommerce结帐页面增加文件上传字段

WooCommerce 二次开发,实现自定义功能的时候,我们经常会遇到在结帐页面上传文件的功能,为了实现这个功能,我们需要在结帐页面添加一个自定义文件上传字段。虽然看起来是只是一个简单的字段,但实现起来却有不少的工作量,我们来看一下具体代码。

1、在前段增加文件上传字段并使用 Ajax 上传

下面的代码中,我们把上传文件需要的 HTML 表单代码添加到了结账表单中。

  1. add_action( 'woocommerce_after_checkout_billing_form', 'misha_file_upload_field' );
  2. function misha_file_upload_field() {
  3. ?>
  4. <div class="form-row form-row-wide">
  5. <input type="file" id="misha_file" name="misha_file" />
  6. <input type="hidden" name="misha_file_field" />
  7. <label for="misha_file"><a>Select a cool image</a></label>
  8. <div id="misha_filelist"></div>
  9. </div>
  10. <?php
  11. }

使用 jQuery 处理用户文件上传。

然后,我们使用 Ajax 方法上传图像,用户选择图像后,我们立即通过 Ajax 上传文件到后端,以方便在结账时直接使用上传好的图像文件 URL。

  1. jQuery( function( $ ) {
  2. $( '#misha_file' ).change( function() {
  3. if ( ! this.files.length ) {
  4. $( '#misha_filelist' ).empty();
  5. } else {
  6. // we need only the only one for now, right?
  7. const file = this.files[0];
  8. $( '#misha_filelist' ).html( '<img src="' + URL.createObjectURL( file ) + '"><span>' + file.name + '</span>' );
  9. const formData = new FormData();
  10. formData.append( 'misha_file', file );
  11. $.ajax({
  12. url: wc_checkout_params.ajax_url + '?action=mishaupload',
  13. type: 'POST',
  14. data: formData,
  15. contentType: false,
  16. enctype: 'multipart/form-data',
  17. processData: false,
  18. success: function ( response ) {
  19. $( 'input[name="misha_file_field"]' ).val( response );
  20. }
  21. });
  22. }
  23. } );
  24. } );

在服务端接收并保存前端 Ajax 上传的文件。

保存用户上传的图像到服务器上,在前端通过 Ajax 上传后,我们需要在后端保存处理上传的文件,下面是保存文件的示例代码,保存文件后,我们返回文件的 URL 给前端。如果需要进一步处理图像,我们还可以同时返回一个图像文件的 ID 给前端,具体代码可搜索本站中的相关文件,这里就不再重复列出了。

  1. add_action( 'wp_ajax_mishaupload', 'misha_file_upload' );
  2. add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload' );
  3. function misha_file_upload(){
  4. $upload_dir = wp_upload_dir();
  5. if ( isset( $_FILES[ 'misha_file' ] ) ) {
  6. $path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
  7. if( move_uploaded_file( $_FILES[ 'misha_file' ][ 'tmp_name' ], $path ) ) {
  8. echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
  9. }
  10. }
  11. die;
  12. }

到现在我们已经完成了上传文件的表单,文件上传和保存的步骤。下一步,我们需要把上传的文件保存到订单信息中。

在订单中保存上传的文件 URL 并显示在订单详情页面,这一步就比较简单了,我们直接把结账表单发送过来的文件 URL 保存到订单的元数据中就可以了。

  1. add_action( 'woocommerce_checkout_update_order_meta', 'misha_save_what_we_added' );
  2. function misha_save_what_we_added( $order_id ){
  3. if( ! empty( $_POST[ 'misha_file_field' ] ) ) {
  4. update_post_meta( $order_id, 'misha_file_field', sanitize_text_field( $_POST[ 'misha_file_field' ] ) );
  5. }
  6. }

在订单信息中显示上传的图像,为了方便订单管理员处理,我们还需要在订单详情中显示图像文件。

  1. add_action( 'woocommerce_admin_order_data_after_order_details', 'misha_order_meta_general' );
  2. function misha_order_meta_general( $order ){
  3. $file = get_post_meta( $order->get_id(), 'misha_file_field', true );
  4. if( $file ) {
  5. echo '<img src="' . esc_url( $file ) . '" />';
  6. }
  7. }

本文中介绍的功能使用诸如 Checkout Field Editor 之类的插件也能实现,但是文件上传功能往往需要购买付费版本才有,为了这一个功能去购买这样的插件略显不划算,并且使用代码实现更加自由并且性能更好,有需要的朋友可以参考。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

添加ID数据列到WooCommerce付款方式列表

2022-9-20 22:59:12

WordPress教程

WordPress主题定制开发中使用率最高的插件推荐

2022-9-21 4:24:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索