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

18

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

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

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

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

Обрана операційна система — я вибрав macOS

PHP не менше 5.6.25, я буду використовувати PHP 7

MySQL 5.6.33

Apache або Nginx

WordPress 4.7

WooCommerce 3.9

І ваша IDE

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

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

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

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

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

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

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

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

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

Хуки

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

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

woocommerce_process_product_meta. А цю — для обробки, дезінфекції та збереження значення нашого введення тексту.

Ці хуки потрібно визначити, як будь-які інші 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 )
);
}

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

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

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

Ми перевіряємо, чи кілька значень nonce. Якщо ні, то ми повернемо false. Це стандартна міра обережності. Значення nonce виявляються, дивлячись конкретно на те, що пропонує WooCommerce у вихідному коді.

Сануйте дані в $_POST колекції, що відповідають введеним значенням користувача.

Збережіть інформацію в таблиці метаданих посту.

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

Зверніть увагу, що ми фактично нічого не робимо, щоб відобразити інформацію в інтерфейсі, навіть не потрібно викликати 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 );
}
}

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

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

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

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

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

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

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

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

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

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

Висновок

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

Додали настроюване поле.

Санували і зберегли його.

Створили публічний аспект плагіна.

І отримали і відобразили контент.