WordPress教程

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

也想出现在这里?联系我们
创客云

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

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

也想出现在这里?联系我们
创客主机

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

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

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

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

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

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

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

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

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

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

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

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

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

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

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!