Как добавить поле загрузки файла на странице оформления заказа?

При работе с платформой WooCommerce возникает необходимость предоставить клиентам возможность загружать файлы на странице оформления заказа. Однако простое добавление элемента input type="file" не сработает из-за мер безопасности, применяемых в WooCommerce. В этой статье мы рассмотрим способ обхода данного ограничения и научимся как добавить поле загрузки файла на странице оформления заказа.

Единственное возможное решение заключается в загрузке файла ПЕРЕД отправкой заказа, чтобы при нажатии кнопки «Оформить заказ» файл уже был доступен в разделе «Медиа» и мог быть прикреплен к заказу в виде простой ссылки (URL).

Для реализации этой функциональности используется технология Ajax, что позволяет клиентам загружать файлы на ваш веб-сайт, не замечая этого. Конечно, необходимо применить соответствующие меры безопасности.

Вот как это делается:

1. Добавление HTML-элемента для загрузки файла на страницу оформления заказа. В нашем примере мы разрешаем загрузку файлов в формате PDF.
2. Использование функции wp_upload_bits() в WordPress для загрузки файла в текущую директорию загрузок.
3. После загрузки файла и его прикрепления к заказу, мы отображаем ссылку на файл администратору на странице редактирования заказа и в электронных письмах.
4. Добавление валидации, чтобы клиенты были предупреждены о необходимости загрузки файла перед оформлением заказа.

С помощью приведенного ниже кода вы сможете добавить функциональность загрузки файлов на страницу оформления заказа в WooCommerce (просто скопируйте код в файл functions.php вашей темы):

add_action( 'woocommerce_after_order_notes', 'genius_checkout_file_upload' );
 
function genius_checkout_file_upload() {
   echo '<p class="form-row"><label for="appform">Application Form (PDF)<abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><input type="file" id="appform" name="appform" accept=".pdf" required><input type="hidden" name="appform_field" /></span></p>';
   wc_enqueue_js( "
      $( '#appform' ).change( function() {
         if ( this.files.length ) {
            const file = this.files[0];
            const formData = new FormData();
            formData.append( 'appform', file );
            $.ajax({
               url: wc_checkout_params.ajax_url + '?action=appformupload',
               type: 'POST',
               data: formData,
               contentType: false,
               enctype: 'multipart/form-data',
               processData: false,
               success: function ( response ) {
                  $( 'input[name=\"appform_field\"]' ).val( response );
               }
            });
         }
      });
   " );
}
 
add_action( 'wp_ajax_appformupload', 'genius_appformupload' );
add_action( 'wp_ajax_nopriv_appformupload', 'genius_appformupload' );
 
function genius_appformupload() {
   global $wpdb;
   $uploads_dir = wp_upload_dir();
   if ( isset( $_FILES['appform'] ) ) {
      if ( $upload = wp_upload_bits( $_FILES['appform']['name'], null, file_get_contents( $_FILES['appform']['tmp_name'] ) ) ) {
         echo $upload['url'];
      }
   }
   die;
}
 
add_action( 'woocommerce_checkout_process', 'genius_validate_new_checkout_field' );
   
function genius_validate_new_checkout_field() {
   if ( empty( $_POST['appform_field'] ) ) {
      wc_add_notice( 'Please upload your Application Form', 'error' );
   }
}
 
add_action( 'woocommerce_checkout_update_order_meta', 'genius_save_new_checkout_field' );
   
function genius_save_new_checkout_field( $order_id ) { 
   if ( ! empty( $_POST['appform_field'] ) ) {
      update_post_meta( $order_id, '_application', $_POST['appform_field'] );
   }
}
   
add_action( 'woocommerce_admin_order_data_after_billing_address', 'genius_show_new_checkout_field_order', 10, 1 );
    
function genius_show_new_checkout_field_order( $order ) {    
   $order_id = $order->get_id();
   if ( get_post_meta( $order_id, '_application', true ) ) echo '<p><strong>Application PDF:</strong> <a href="' . get_post_meta( $order_id, '_application', true ) . '" target="_blank">' . get_post_meta( $order_id, '_application', true ) . '</a></p>';
}
  
add_action( 'woocommerce_email_after_order_table', 'genius_show_new_checkout_field_emails', 20, 4 );
   
function genius_show_new_checkout_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $sent_to_admin && get_post_meta( $order->get_id(), '_application', true ) ) echo '<p><strong>Application Form:</strong> ' . get_post_meta( $order->get_id(), '_application', true ) . '</p>';
}

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.