Как добавить произвольное поле на страницу товара в WooCommerce

В этой инструкции я покажу как можно добавить произвольное поле и вывести его на странице товара в WooCommerce. Мы добавим простое текстовое поле, по аналогии с данными примерами вы сможете создавать «сложные» карточки товаров с любым количеством пользовательский полей и на любой вкус, например дать пользователю возможность заполнить дату доставки товара, ввести текст на подарочной упаковке и даже прикрепить свой файл.

Цель статьи — показать как можно вывести произвольные поля с помощью написания кода. Если вы очень занятый или ленивый человек, который ищет более простое и быстрое решение можете купить плагин WooCommerce Product Add-ons, который добавляет возможность вывода полей.

Начнем мы с добавления текстового поля на страницу товара, после — выведем значение из поля на странице корзины, оформления заказа.

Весь код, который представлен в примерах ниже будет работать в файле functions.php активной темы, но по факту мы пишем функциональность, по этому лучше создать отдельный плагин для этого!

Шаг 1: Добавление текстового поля и вывод на странице товара

Здесь мы добавим и выведем текстовое поле. Технически, поле можно добавлять в любом месте на странице товара в фронт-енд, я буду использовать хук woocommerce_after_add_to_cart_button. Он является стандартным, по этому я почти уверен что в вашем шаблоне он тоже есть.

Ничего необычного здесь нет, мы просто выводим html код с текстовым полем. Запомните атрибут name поля. Дальше он будет использоваться часто.

/*
 * Покажет текстовое поле на странице товара
 * @return html
 */
function ctrlv_custom_text(){
    $value = isset( $_POST['_custom_text'] ) ? sanitize_text_field( $_POST['_custom_text'] ) : '';
    printf( '<label>%s</label><input name="_custom_text" value="%s" />', __( 'Введите произвольный текст сюда', 'ctrlv-plugin-textdomain' ), esc_attr( $value ) );
}
add_action( 'woocommerce_before_add_to_cart_button', 'ctrlv_custom_text', 10 );

 

Шаг 2: Проверка данных в текстовом поле

Если поле должно быть обязательным для заполнения, можно выполнить его вариацию при помощи кода из примера ниже.
Если поле не обязательно для заполнения — или может иметь значение по умолчанию (об этом ниже) — можно пропустить данный шаг.

/*
 * Провека данных при клике на "добавить в корзину"
 * @param bool $passed
 * @param int $product_id
 * @param int $quantity
 * @return bool
 */
function ctrlv_add_to_cart_validation($passed, $product_id, $qty){
 
    if( isset( $_POST['_custom_text'] ) && sanitize_text_field( $_POST['_custom_text'] ) == '' ){
        $product = wc_get_product( $product_id );
        wc_add_notice( sprintf( __( '%s не может быт добавлен в корзину, пока не будет заполнено значение произвольного поля.', 'ctrlv-plugin-textdomain' ), $product->get_title() ), 'error' );
        return false;
    }
 
    return $passed;
 
}
add_filter( 'woocommerce_add_to_cart_validation', 'ctrlv_add_to_cart_validation', 10, 3 );

 

Шаг 3: Сохранение значения произвольного поля в корзине

Как эти хреновы данные хранятся в корзине? На этом этапе начинается больше всего магии. WooCommerce хранит данные о корзине в массиве $_SESSION. Там хранятся данные об ID товаров, и несколько других важных штук. Наша задача положить туда свои данные, чтобы в дальнейшем их можно было обработать. В этом нам поможет вот такой фильтр:

/*
 * Добавит произвольные данные с поля к записи товара в корзине
 * @param array $cart_item
 * @param int $product_id
 * @return array
 */
function ctrlv_add_cart_item_data( $cart_item, $product_id ){
 
    if( isset( $_POST['_custom_text'] ) ) {
        $cart_item['custom_text'] = sanitize_text_field( $_POST['_custom_text'] );
    } else {
        $cart_item['custom_text'] = "Значение поля по умолчанию можно задать здесь";
    }
 
    return $cart_item;
 
}
add_filter( 'woocommerce_add_cart_item_data', 'ctrlv_add_cart_item_data', 10, 2 );

 

Шаг 4: Загрузка данных в корзину

Если вы знаете как скатывать «авада-кедавра», этот шаг будет очень простым. Я завис на пол часа, перед тем, как наткнулся на статью зарубежного блогера, которую я сейчас и перевожу. 

Данные, которые мы сохранили на предыдущем шаге сохраняются в $_SESSION и при загрузке страницы их нужно восстановить, т.е. При каждой загрузке страницы Woo восстанавливает данные из корзины основываясь на сессиях. Сделать это можно с помощью фильтра woocommerce_get_cart_item_from_session.

/*
 * Загрузит данные корзины из сессии
 * @param array $cart_item
 * @param array $other_data
 * @return array
 */
function ctrlv_get_cart_item_from_session( $cart_item, $values ) {

    if ( isset( $values['custom_text'] ) ){
        $cart_item['custom_text'] = $values['custom_text'];
    }

    return $cart_item;

}
add_filter( 'woocommerce_get_cart_item_from_session', 'ctrlv_get_cart_item_from_session', 20, 2 );

 

Шаг 5: Сохранение данных из поля в заказе

Для того, чтобы обрабатывать пользовательские данные — нам следует их сохранить в текущем заказе. В этом поможет хук woocommerce_add_order_item_metа

/*
 * Сохранит данные произвольного поля в заказе
 * @param int $item_id
 * @param array $values
 * @return void
 */
function ctrlv_add_order_item_meta( $item_id, $values ) {

    if ( ! empty( $values['custom_text'] ) ) {
        woocommerce_add_order_item_meta( $item_id, 'custom_text', $values['custom_text'] );           
    }
}
add_action( 'woocommerce_add_order_item_meta', 'ctrlv_add_order_item_meta', 10, 2 );

 

Шаг 6: Вывод произвольного поля на сайте

Финальный этап нашей работы. Мы прописали логику, которая сохранит данные везде, куда можно, но не написали логику для вывода этих данных. А ведь их можно использовать…
Этот код добавит вывод на на всех страницах, где выводиться листинг с товарами в корзине.

/*
 * Получим данные о произвольном поле для из последующего показа
 * @param array $other_data
 * @param array $cart_item
 * @return array
 */
function ctrlv_get_item_data( $other_data, $cart_item ) {
 
    if ( isset( $cart_item['custom_text'] ) ){
 
        $other_data[] = array(
            'name' => __( 'Ваш произвольный текст', 'ctrlv-plugin-textdomain' ),
            'value' => sanitize_text_field( $cart_item['custom_text'] )
        );
 
    }
 
    return $other_data;
 
}
add_filter( 'woocommerce_get_item_data', 'ctrlv_get_item_data', 10, 2 );

 

Anatolii Koziura

Антураж-куражмонтаж в мире web разработки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *