Створюйте власні вкладки продуктів WooCommerce із розширеними користувацькими полями
Під час перегляду товару в WooCommerce інформація про товар відображається у вкладках. Ці вкладки виправлено та створено WooCommerce поза вашим контролем. Ця публікація покаже вам, як додати код, який дозволить авторам додавати власні вкладки з власним вмістом до продуктів.
Відмова від відповідальності: існує розширення WooCommerce під назвою WooCommerce Tab Manager, яке надає цю функцію. Однак це не безкоштовно. Я не тестував його особисто, але, наскільки я бачу, він підтримує лише редактор WYSIWYG (що бачиш, те й отримуєш) для вмісту вкладок. Ця публікація призначена для вас, хто хоче більше налаштувати вміст вкладки або хоче написати код самостійно, не платячи за інший плагін.
Ми будемо використовувати плагін Advanced Custom Fields (ACF), щоб спростити процес. Але ви зможете досить легко замінити частину ACF на свій власний код, якщо ви не бажаєте використовувати плагін. ACF доступний у безкоштовній версії та версії Pro. У ACF Pro є чудовий тип поля: повторювач, який ідеально підходить для такого використання. Однак якщо у вас немає або ви бажаєте придбати ліцензію Pro, не хвилюйтеся. Наведений нижче посібник із коду покаже вам, як додавати поля як за допомогою безкоштовної версії, так і за допомогою повторювача у версії Pro.
Якщо ви ще не знайомі з ACF, ACF допоможе нам легко налаштувати мета-поля публікації – усіх видів. Ви можете легко додати редактор, засіб вибору файлів, вибір дати чи кольору, селектор дописів чи категорій із підтримкою кількох варіантів і зміни порядку тощо. Ми можемо досягти того ж без ACF, але тоді нам потрібно буде самостійно кодувати відображення та збереження вмісту метабоксів.
Що ми зробимо
Простіше кажучи, ми хочемо дозволити додавати спеціальні вкладки до перегляду продукту. Кожна вкладка підтримує заголовок, який відображається як мітка вкладки, і вміст, який відображається при натисканні вкладки. Спеціальні вкладки справді залежать від типу проекту чи ваших потреб; можливо, вам потрібні вкладки для технічних характеристик, вкладка з файлами (наприклад, посібники користувача тощо), додаткова інформація або спеціальний запит, який відображає пов’язані продукти.
У цьому підручнику ми зробимо це простим, додавши редактор WYSIWYG для вмісту вкладок. Як згадувалося вище, легко реалізувати інші типи полів (наприклад, файли чи запит на публікацію), це лише різниця в коді, який ви пишете для відображення вмісту вкладки – що не стосується цього підручника.
Якщо у вас є ACF Pro і ви хочете використовувати повторювач для легкого додавання кількох вкладок; пропустіть наступний розділ. Якщо у вас лише безкоштовна версія ACF, продовжуйте. Недоліком відсутності поля повторювача є те, що вам потрібно визначити фіксовану кількість вкладок. Таким чином, автор не може створювати необмежену кількість вкладок, як це можливо з повторювачем. Але це безкоштовне рішення чудово працюватиме у веб-магазинах, де вам потрібна лише певна (кількість) спеціальних вкладок.
Підручник для безкоштовної версії ACF
Додавання полів ACF
Додати новий метабокс із полями в ньому дуже легко за допомогою ACF. У вас є два варіанти; використовуйте інтерфейс користувача ACF, щоб налаштувати все, або додайте поля за допомогою коду. Зазвичай потрібно налаштувати поля в адміністраторі. Але якщо вам потрібно переконатися, що поля існують на кількох сайтах WordPress (наприклад, локальна розробка, тестовий сервер і живий сервер), вам може бути корисно додати поля за допомогою коду у вашу тему чи плагін.
Вам потрібно налаштувати наступне:
- Група, яка відображається, коли тип публікації відповідає продуктам WooCommerce
- Введення тексту для заголовка вкладки
- Будь-які поля, які ви хочете для вмісту вкладки. Як приклад ми додамо редактор WYSIWYG.
- (Необов’язково) Додаткові заголовки та вміст вкладок для стількох вкладок, які ми хочемо підтримувати.
Зверніть увагу на те, щоб запам’ятати назви полів, оскільки вам доведеться звертатися до них пізніше. Я визначив назву вкладки як, tab_titleа поле WYSIWYG як tab_contents.
Якщо ви бажаєте додати поля за кодом, ось приклад. Додайте це у файл вашої теми functions.phpабо плагіна:
Якщо вам потрібна більше ніж одна вкладка, просто додайте ще один набір заголовка та вмісту вкладки після line #19. Просто пам’ятайте про nameунікальність.
Коли ми редагуємо продукт, ми маємо побачити це метабокс:
Виведення власних вкладок
WooCommerce дозволяє нам фільтрувати woocommerce_product_tabsдля маніпулювання вкладками. Як аргумент цього фільтра ви отримуєте масив для всіх вкладок. Масив складається з масивів для кожної вкладки з унікальними ключами. Але масив для кожної вкладки не містить фактичного виведення вмісту вкладки. Натомість він очікує зворотного виклику – назви функції, яку WooCommerce запускатиме для виведення вмісту вкладки.
Опинившись у функції, яку можна використовувати global $postдля отримання доступу до поточного об’єкта публікації, або якщо ви хочете, щоб об’єкт продукту згенерував WooCommerce, просто виконайте global $product. Нам потрібен ідентифікатор публікації, щоб отримати значення наших спеціальних полів за допомогою функції ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). У наведеному нижче прикладі коду ми лише отримуємо назву вкладки та перевіряємо, чи вона порожня. Якщо ні, до масиву додається нова вкладка. Має сенс не додавати вкладки, якщо заголовок вкладки порожній.
Зауважте, що ви можете використовувати «priority» для керування положенням вкладки. Наприклад, якщо встановити значення 1, ваша вкладка з’явиться першою, перед усіма вкладками WooCommerce. Визначте назву функції для callbackелемента «». У рядку #17ми визначаємо функцію, яку WooCommerce запускатиме для виведення вмісту вкладки.
Ці функції зворотного виклику вкладки отримають два параметри; ключ і елемент масиву всіх значень для поточної вкладки. У нашій функції зворотного виклику ми знову виводимо заголовок вкладки, посилаючись на наданий $tabмасив. WooCommerce повторює заголовки їхніх вкладок усередині, h2тому ми робимо те саме. Потім ми використовуємо get_field()для отримання значення вмісту вкладки та просто повторюємо значення. Налаштуйте лінію #23відповідно до типів полів, які ви додали (наприклад, селектор об’єктів публікації, зображення чи щось інше).
Зауважте, що я загорнув усе всередину if-check, яка перевіряє, чи активовані WooCommerce і ACF. Це хороша практика, щоб запобігти збою сайту.
І все! Ви успішно створили код для додавання спеціальних вкладок WooCommerce!
Якщо ви хочете зробити це за допомогою поля повторювача ACF Pro для підтримки необмеженої кількості вкладок, читайте далі.
Додавання полів ACF
Додайте свою групу за допомогою інтерфейсу користувача адміністратора ACF або додавши їх за допомогою коду у своїй темі чи файлах плагіна. Нам потрібно налаштувати наступне:
- Група, яка відображається, коли тип публікації дорівнює продукту WooCommerce
- Повторювач із такими підполями:
- Введення тексту для заголовка вкладки
- Будь-які поля, які ви хочете для вмісту вкладки.
Ось як ви налаштуєте це за допомогою адміністратора ACF:
Або ви можете додати групу за таким кодом:
У будь-якому випадку під час редагування продуктів ви маєте отримати це метабокс:
Виведення власних вкладок
Виведення власних вкладок дуже схоже на те, що ми робили вище для безкоштовної версії. Ми фільтруємо woocommerce_product_tabs, але тут ми переглядаємо кожен повторюваний елемент із повторювача. Нам потрібен спосіб ідентифікації кожного елемента повторювача за допомогою ключів, тому ми самі генеруємо ключ, використовуючи позицію циклу та версію заголовка вкладки. У функції зворотного виклику ми витягуємо позицію циклу з ключа та використовуємо це для посилання на масив для нашого повторювача.
Усередині нашої функції фільтра ми отримуємо значення повторювача та перевіряємо, чи воно не порожнє. Потім ми визначаємо змінну лічильника, починаючи з 0 (масиви завжди починаються з позиції 0), яку ми збільшуємо на 1 для кожного елемента всередині циклу (у рядку #18). У циклі для кожного елемента повторювача ми призначаємо їх усім одній функції зворотного виклику. Ми використовуємо функцію WordPress, [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()щоб перетворити заголовок вкладки на його слаг-версію та додати її до ключа.
У нашій функції зворотного виклику в рядку #31 - 32ми робимо кілька простих маніпуляцій із рядком, щоб отримати значення лічильника (яке починається з 0 і збільшується на 1 для кожного елемента). Потім ми просто використовуємо це як індекс для масиву повторювача, щоб отримати правильне поле вмісту вкладки.
І все! Тепер ви реалізували необмежену кількість спеціальних вкладок у WooCommerce!
Пам’ятайте, що WYSIWYG можна замінити на будь-яке поле. Вам просто потрібно змінити спосіб виведення поля в line #23.
Висновок
Написати власний код для додавання власних вкладок WooCommerce дуже легко, якщо ви зрозуміли основну концепцію того, як це робить WooCommerce. Для цього навіть не потрібно багато коду. Це ідеальне рішення для вас, хто не хоче або не може інвестувати в розширення ліцензій або просто потребує простого рішення для свого веб-магазину.