Як додати спеціальні поля та вкладки в метабокс даних про продукт WooCommerce за кодом
У цій публікації ми дізнаємося, як додати власні метаполя в метабокс даних продукту WooCommerce; як додати поля, а також як додати власну вкладку. Ми детально розглянемо, як додавати поля, куди їх додавати, як їх зберігати та, нарешті, як відображати їх у інтерфейсі.
Додавання спеціальних полів до існуючих панелей
Спочатку ми розглянемо, як додати поле до існуючих панелей. Нам потрібно зачепити два гачки; один для виведення поля, а інший для збереження його значення. Перший хук залежить від того, на якій вкладці ви хочете відобразити своє поле.
Метабокс даних продукту
Майте на увазі, що видимість вкладки залежить від типу продукту. Наприклад, вкладка «Загальні» видаляється, коли ви перемикаєтеся на згрупований тип продукту. Тож вам слід не лише розглянути, де логічно вписуються ваші настроювані поля, але вам потрібно розглянути панель, видиму для всіх бажаних типів продуктів. це список найзагальніших доступних хуків:
woocommerce_product_options_general_product_data(«Загальні»)woocommerce_product_options_inventory_product_data(«Інвентар»)woocommerce_product_options_shipping("Доставка")woocommerce_product_options_related(«Пов’язані продукти»)woocommerce_product_options_attributes(«Атрибути»)woocommerce_product_options_advanced(«Додатково»)
Додавання введення форми
Що стосується виведення введеної форми, ви можете вручну вивести HTML-код введеної форми (наприклад <input type="text"...>,), але WooCommerce пропонує прості функції для легкого додавання полів будь-яких типів. Я рекомендую використовувати їх. Ознайомтеся з оглядом WooCommerce усіх можливих типів вводу тут, а також з аргументами, які ви можете передати, щоб контролювати вихід.
Що стосується цього підручника, я збираюся додати просте введення тексту на вкладці інвентарю для запису кількості елементів у кожному пакеті. Що стосується ключа, під яким зберігається ваше спеціальне значення, завжди додавайте перед ним символ підкреслення «_», у моєму випадку це буде «_number_in_package»:
Збережіть і відредагуйте товар. У нижній частині вкладки «Інвентар» має з’явитися настроюване поле:
Внизу додано спеціальне поле «Кількість в упаковці».
Примітка щодо видимості поля залежно від типу продукту
Метабокс даних продукту WooCommerce містить велику кількість Javascript, який приховує та показує як поля, так і вкладки/панелі. Ви можете легко використати це, якщо хочете, щоб ваше поле було видимим лише для певних типів продуктів, указавши певні назви класів для свого поля.
Припустімо, ви хочете, щоб ваше поле відображалося, лише якщо продукт має тип простого продукту, або ви хочете, щоб воно було приховане, якщо продукт є змінним продуктом. WooCommerce прослуховує конкретні назви класів, наприклад show_if_<producttype>і, hide_if_<producttype>і ви можете комбінувати кілька класів, щоб точно налаштувати, коли ваше поле має бути прихованим або видимим.
Наприклад, якщо я хочу, щоб моє поле було видимим лише для простих продуктів; Я додам це в " wrapper_class" до свого поля введення:
Ви також можете встановити wrapper_class, наприклад, «show_if_simple show_if_grouped», щоб поле було видимим лише для простих або згрупованих продуктів. Спробуйте самі!
Збереження настроюваного поля
Наразі все, що ви вводите у своє поле, не зберігається. Давайте зробимо це далі. Ми підключаємо woocommerce_process_product_metaта зберігаємо значення глобального PHP $_POST(надсилання форми).
Дозвольте мені швидко пояснити наведений вище код. Ви можете просто зберегти поле за допомогою update_post_meta(), але в останніх версіях WooCommerce обробку мета продукту було значно покращено. Поки у вас є об’єкт продукту (який ми отримуємо шляхом виклику wc_get_product()з ідентифікатором публікації), ви можете легко маніпулювати будь-якою інформацією про продукт в об’єкті та, нарешті, викликати save()один раз для оновлення будь-яких змін. Це дуже корисно, особливо якщо ви хочете зберегти кілька полів – у цьому випадку вам не потрібно виконувати операції з базою даних для кожного поля, лише останній раз під час виклику save().
Використовуйте update_meta_data()на об’єкті для кожного метаданого, який ви хочете зберегти.
З наведеною вище функцією ваше поле має бути збережено, коли ви оновлюєте його в редагуванні продукту! Також зауважте, що використовуючи функції WooCommerce для виведення поля, вам не потрібно вручну отримувати значення свого поля перед виведенням поля – це повністю автоматично.
Виведення вашого спеціального поля у зовнішній інтерфейс
Першим кроком є визначення того, який хук ви хочете використовувати для виведення свого спеціального поля. WooCommerce пропонує безліч доступних хуків для керування конкретним місцем виведення. Якщо ви не впевнені, подивіться, plugins/woocommerce/templates/і в цих файлах ви легко знайдете відповідний гачок. Ви також можете перевизначити шаблон і додати вихідні дані в шаблоні, але я завжди рекомендую замість цього використовувати хуки.
Що стосується мене, я хочу, щоб моє користувальницьке поле виводилося в одному продукті, всередині metadiv – там, де WooCommerce виводить SKU та категорію. Для цього я буду використовувати гачок woocommerce_product_meta_start. Всередині хуків (як і майже в усіх хуках шаблонів) ви можете отримати доступ до глобального об’єкта публікації. Я дотримуватимусь того самого емпіричного правила, що й для збереження свого поля; використовуйте get_meta()в об’єкті продукту для отримання мого спеціального поля:
Додавання спеціальної вкладки та панелі до метабокса даних продукту
Якщо ви хочете додати колекцію настроюваних полів, які логічно пов’язані разом, було б гарною ідеєю згрупувати їх на настроюваній вкладці. Щоб додати спеціальну вкладку в метабокс із даними про продукт, нам потрібно підключитися до фільтра для додавання самої вкладки та підключення для виведення вмісту панелі. Нарешті нам ще потрібно додати той самий хук, що й вище, для збереження наших полів.
Наприклад, я збираюся додати спеціальну панель під назвою «Додаткова інформація», куди я хочу додати введення тексту, прапорець і введення числа.
Спочатку ми фільтруємо woocommerce_product_data_tabsта додаємо нашу вкладку до його масиву.
Є кілька корисних аргументів, які ми можемо навести тут. Ви можете, наприклад, використовувати «class» для керування видимістю вкладки залежно від типу продукту. Якщо ви пропустили це, перегляньте згаданий вище розділ про видимість поля. Але майте на увазі, що у вкладках вам потрібно надати класи як масив, а не рядок. Ви також можете вказати «priority», щоб визначити, де має відображатися ваша вкладка. Використання, наприклад, 25 розташує вкладку відразу після «Інвентаризації».
За замовчуванням ваша вкладка відображатиметься зі значком гайкового ключа. На жаль, (на даний момент) немає способу контролювати це через фільтр. Якщо це важливо для вас, ви можете додати адміністративний CSS і надати інший клас для своєї вкладки. Ось огляд доступних значків у WooCommerce.
Вихід на панель
Наступним кроком є підключення woocommerce_product_data_panelsта виведення вмісту вашої панелі. Важлива примітка тут полягає в тому, щоб починати виведення з divатрибута idз тим самим іменем, яке ви вказали як ключ у вкладках (у моєму випадку «additional_info»). Що стосується вмісту, то ви вирішуєте – ви можете додати будь-який HTML, який забажаєте, але я рекомендую використовувати функції WooCommerce для виведення полів форми. Ті самі переваги для приховування або показу полів працюватимуть і тут.
Після збереження ви маєте побачити вкладку та її вміст у метавікні «Дані продукту» (звичайно, якщо продукт не є зовнішнім).
Все, що залишилося, це зберегти дані, введені в настроювані поля, і для цього ми використовуємо той самий процес, що й вище:
Примітка. У WooCommerce існує загальне правило, згідно з яким усі прапорці зберігаються як «yes», якщо вони позначені, або як порожній рядок, якщо вони не позначені. Дотримуючись правила WooCommerce і зберігаючи мій прапорець як «yes», це гарантує, що мій прапорець woocommerce_wp_checkbox()працює належним чином, коли отримує поточне значення мого поля.
Висновок
У цій публікації я покажу, як додати власні поля до метабокса даних продукту WooCommerce, як їх зберегти, як контролювати їх видимість, а також простий приклад виведення вашого поля у зовнішній інтерфейс. Я також показав, як додати спеціальну вкладку до метабокса та додати туди свої поля. Сподіваюся, це допомогло вам самостійно налаштувати WooCommerce!