Додавання користувальницьких полів в описі товару за допомогою WooCommerce

Від автора: WooCommerce, можливо найпопулярніший спосіб продати товари, використовуючи WordPress. Приблизно 25% інтернету і WooCommerce забезпечують близько 39% всіх інтернет-магазинів, використовуючи WordPress. Якщо ви хочете продавати товари клієнтам, то використовувати їх у поєднанні один з одним, це самий надійний спосіб. Але іноді, як з будь-яким програмним забезпеченням, нам або нашим клієнтам хочеться розширити набір функцій на основі тих, що пропонуються у стандартному наборі.

Наприклад: є простий продукт, який потрібно продати, але спочатку необхідно включити трохи більше інформації про продукт для відображення в інтерфейсі. Ми розглянемо, як розширити в WooCommerce опис товару, використовуючи пару хуков, що надаються цим же сервісом, і користувальницькі функції, які ми напишемо.

Необхідні інструменти

Передбачається, що на комп’ютері вже є наступні налаштування (або щось подібне):

Далі по керівництву передбачається, що все це встановлено, активовано і запущено.

Якщо ви завантажуєте WooCommerce спеціально заради цього керівництва, вам не потрібно турбуватися про такі речі, як сторінки кошика, умови та положення, або все інше в цьому роді. Насправді, ми збираємося зосередитися на метабоксе Simple Product протягом усього цього керівництва.

Додавання користувальницьких полів

Коли справа доходить до роботи з WordPress, поняття користувальницьких полів зазвичай несе в собі інше визначення: WordPress має можливість вирішувати авторам публікацій призначати настроювані поля для публікації. Ця довільна додаткова інформація відома як метадані.

Для тих, хто не є розробником, цей тип інформації може бути досить складним і непотрібним. Але якщо ви звикли працювати з WordPress, важливо відзначити, що коли я посилаюся на користувальницькі поля в цьому уроці, я кажу про щось зовсім інше.

Я кажу про поле, яке ми представимо на вкладці Linked Product (Пов’язаний продукт) типу Simple Product.

Але про це ми поговоримо пізніше, а поки давайте почнемо.

Хуки

Подібно WordPress, WooCommerce надає API, який дозволяє нам підключатися до частини життєвого циклу сторінки. Тому, хоча ви, можливо, раніше працювали з API метаданих WordPress, це робиться окремо з WooCommerce. Існують два прийоми, які важливо знати:

Ці хуки потрібно визначити, як будь-які інші WordPress, а потім визначити для них настроювані функції. І хоча це можна зробити за допомогою процедурного програмування, це керівництво буде реалізовувати функціональність за допомогою об’єктно-орієнтованого програмування.

Функціональність

Спочатку ми визначимо клас, який буде мати змінну, як дані примірника. Ця змінна буде представляти ідентифікатор поля вводу, який з’явиться в інтерфейсі:

Потім ми ініціалізуємо цю змінну примірника в конструкторі класу:

textfield_id = ‘tutsplus_text_field’;
}
}

На цьому етапі ми готові почати використовувати перераховані вище хуки. Для цього ми додамо функцію ініціалізації, яка зареєструє дві користувацькі функції за допомогою одного з хуків. В наступних двох розділах ми розглянемо, як реалізувати власну функціональність.

Додавання поля вводу тексту

По-перше, нам потрібно додати функцію, до якої підключений woocommerce_product_options_grouping. У функції init, яку ми визначили в попередньому розділі, ми зробимо наступне.

textfield_id = ‘tutsplus_text_field’;
}
public function init() {
add_action(
‘woocommerce_product_options_grouping’,
array( $this, ‘product_options_grouping’ )
);
}
public function product_options_grouping() {
}
}

Зверніть увагу, що я назвав цю функцію product_options_grouping. Я вважаю, що це робить код більш легким для читання. Хоча функція сама по собі не може бути дуже описової, вона відноситься до відповідного їй хуку. Потім нам потрібно реалізувати наступну функцію. Для цього нам знадобиться наступна інформація:

Уся вищевказана інформація буде встановлена в асоціативному масиві і потім буде передана woocommerce_wp_text_input. Це функція API WooCommerce, призначена для виводу текстового елемента з зазначеними вище аргументами.

textfield_id = ‘tutsplus_text_field’;
}
public function init() {
add_action(
‘woocommerce_product_options_grouping’,
array( $this, ‘product_options_grouping’ )
);
}
public function product_options_grouping() {
$description = sanitize_text_field( ‘Enter a description that will be displayed for those who are viewing the product.’ );
$placeholder = sanitize_text_field( ‘Tease your product with a short description.’ );
$args = array(
‘id’ => $this->textfield_id,
‘label’ => sanitize_text_field( ‘Product Teaser’ ),
‘placeholder’ => ‘Tease your product with a short description’,
‘desc_tip’ => true,
‘description’ => $description,
);
woocommerce_wp_text_input( $args );
}
}

На цьому етапі у нас є перша частина плагіна, але нам ще належить написати код, який встановлює всі в русі, і код, який зберігає інформацію в базі даних, тому давайте зараз займемося саме цим.

Збереження інформації

Додайте наступні рядки коду в init метод:

Після цього обов’язково додайте функцію add_custom_linked_field_save.

textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST[‘woocommerce_meta_nonce’] ), ‘woocommerce_save_data’ ) ) ) {
return false;
}
$product_teaser = sanitize_text_field(
wp_unslash( $_POST[ $this->textfield_id ] )
);
update_post_meta(
$post_id,
$this->textfield_id,
esc_attr( $product_teaser )
);
}

В наступному розділі я розповім трохи про реалізацію функції.

Очищення даних

Зверніть увагу, що вище функції є три речі:

Зверніть увагу, що ми фактично нічого не робимо, щоб відобразити інформацію в інтерфейсі, навіть не потрібно викликати get_post_meta. Однак саме так ми будемо надавати інформацію в інтерфейсі.

Відображення тизера на front end

Для надання інформації в інтерфейсі нам знадобиться клас, який буде виконувати велику частину тієї роботи, яку ми вже зробили. Зокрема, нам знадобляться:

Налагодження цього процесу насправді не так складна, до того ж ми вже зробили, тому нижче я збираюся передати клас цілком; тим не менш, у мене буде кілька коментарів, щоб пояснити, як налаштувати цей клас після стрибка:

textfield_id = ‘tutsplus_text_field’;
}
public function init() {
add_action(
‘woocommerce_product_thumbnails’,
array( $this, ‘product_thumbnails’ )
);
}
public function product_thumbnails() {
$teaser = get_post_meta( get_the_ID(), $this->textfield_id, true );
if ( empty( $teaser) {
return;
}
echo esc_html( $teaser );
}
}

Кінцевий результат повинен бути приблизно таким:

На даний момент у нас є зайвий код. Зокрема, загальнодоступний і адміністративний класи використовують textfield_ID і налаштовують його у своєму конструкторі. Це код “з душком”, оскільки він порушує весь принцип DRY об’єктно-орієнтованого програмування.

Існує кілька способів полегшити це, наприклад, передати значення у конструктори при створення примірників класів, використовуючи простий шаблон проектування для організації інформації між цими двома класами і т. д.

У файлі, який супроводжує цей урок (його можна завантажити за допомогою посилання на бічній панелі), ви побачите, як я передав значення конструктор, щоб зробити його трохи простіше в управлінні.

Зверніть увагу, що я використовую хук woocommerce_product_thumbnails, щоб допомогти зробити візуалізацію інформації. Існує декілька доступних для WooCommerce хуков, і я просто вибрав цей доступних для візуалізації. Ви можете вільно розбиратися в документації, щоб визначити, який хук найкраще підходить для ваших потреб.

З’єднаємо воєдино

Останнє, що нам потрібно зробити, це налаштувати завантажувальний файл, який запустить плагін. Ми робили це в ряді моїх попередніх уроків, тому зараз я не буду витрачати надто багато часу на те, щоб ввести в суть справи. Тут приклад того, як я розбиваю код:

init();
} else {
$plugin = new TutsPlus_Custom_WooCommerce_Display( ‘tutsplus_text_field’ );
$plugin->init();
}
}

Зверніть увагу, що спочатку я включаю залежності, а потім, як тільки функція спрацьовує, перевіряю, чи відображається панель моніторингу. Якщо відображається, то завантажується відповідна частина плагіна; в іншому випадку завантажується стандартний дисплей, який ви можете побачити на сторінці товару.

Висновок

На цьому етапі ми розглянули все, що ми і планували у введенні даного уроку: