26 Июн
При работе с платформой WooCommerce возникает необходимость предоставить клиентам возможность загружать файлы на странице оформления заказа. Однако простое добавление элемента input type="file" не сработает из-за мер безопасности, применяемых в WooCommerce. В этой статье мы рассмотрим способ обхода данного ограничения и научимся как добавить поле загрузки файла на странице оформления заказа.
Единственное возможное решение заключается в загрузке файла ПЕРЕД отправкой заказа, чтобы при нажатии кнопки “Оформить заказ” файл уже был доступен в разделе “Медиа” и мог быть прикреплен к заказу в виде простой ссылки (URL).
Для реализации этой функциональности используется технология Ajax, что позволяет клиентам загружать файлы на ваш веб-сайт, не замечая этого. Конечно, необходимо применить соответствующие меры безопасности.
Вот как это делается:
- Добавление HTML-элемента для загрузки файла на страницу оформления заказа. В нашем примере мы разрешаем загрузку файлов в формате PDF.
- Использование функции
wp_upload_bits()в WordPress для загрузки файла в текущую директорию загрузок. - После загрузки файла и его прикрепления к заказу, мы отображаем ссылку на файл администратору на странице редактирования заказа и в электронных письмах.
- Добавление валидации, чтобы клиенты были предупреждены о необходимости загрузки файла перед оформлением заказа.
С помощью приведенного ниже кода вы сможете добавить функциональность загрузки файлов на страницу оформления заказа в 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>';
}
Александр Сокирка
