Як додати спеціальні кінцеві точки на сторінку «Мій обліковий запис» у WooCommerce

У цій публікації описано, як додати користувацькі кінцеві точки на сторінку «Мій обліковий запис» WooCommerce. Ми можемо зробити її доступною двома способами: або як власну спеціальну вкладку, або як кнопку для кожного замовлення на вкладці «Замовлення».

Сторінка «Мій обліковий запис» WooCommerce використовує вбудовані функції WordPress для кінцевих точок, що дозволяє легко налаштовувати або додавати власні кінцеві точки. Якщо ви не знайомі з кінцевими точками, я рекомендую прочитати мою публікацію, в якій докладно описано , як додати власні кінцеві точки в WordPress.

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

Додавання спеціальної вкладки та кінцевої точки до «Мого облікового запису»

Для прикладу припустімо, що наш веб-магазин продає програмне забезпечення, і нам потрібно місце, щоб показати ліцензійні ключі наших клієнтів на їхній сторінці «Мій обліковий запис». Ми додамо спеціальну вкладку «Ліцензійні ключі», яка має виводити всі дійсні ліцензійні ключі, зареєстровані для цього користувача.

Додавання спеціальної кінцевої точки

У нашій темі functions.phpабо коді плагіна ми спочатку додаємо власну кінцеву точку за допомогою add_rewrite_endpoint(). Як перший аргумент для цього ми надаємо унікальний ключ. У прикладі нижче я назвав кінцеву точку " license-keys".

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

Майте на увазі, що WordPress автоматично додає наш ключ до змінних запиту під час використання add_rewrite_endpoint(), тому фільтрувати не потрібно query_vars.

Якщо ви зіткнулися з помилкою «404 не знайдено», вам потрібно оновити свої постійні посилання. Ви можете зробити це, перейшовши в Налаштування > Постійні посилання та просто натиснувши Зберегти. Щоразу, коли ми вносимо будь-які зміни до постійних посилань або кінцевих точок, нам потрібно це робити.

Додавання спеціальної вкладки

Наступним кроком буде додавання вкладки до вкладок сторінки «Мій обліковий запис». Робимо це за допомогою фільтра woocommerce_account_menu_items. Масив, наданий фільтром, містить усі клавіші табуляції та їхні відповідні мітки.

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

add_filter('woocommerce_account_menu_items', function($items) {
    $logout = $items['customer-logout'];
    unset($items['customer-logout']);
    $items['license-keys'] = __('License keys', 'txtdomain');
    $items['customer-logout'] = $logout;
    return $items;
});

Якщо ви зараз оновите сторінку «Мій обліковий запис», ви побачите вкладку перед «Вийти». Натиснувши на нього, ви перейдете за URL-адресу «<example.com>/my-account/license-keys/». Однак ви не побачите жодних змін, натиснувши вкладку. Це тому, що ми не визначили, що виводити. Це наш наступний крок.

Відтворення вмісту спеціальної вкладки

WooCommerce пропонує підключення woocommerce_account_<endpoint key>_endpointдля виведення вмісту в «Мій обліковий запис», де ви замінюєте свій власний ключ кінцевої точки. У нашому прикладі правильний хук буде woocommerce_account_license-keys_endpoint.

add_action('woocommerce_account_license-keys_endpoint', function() {
    _e('Your license keys', 'txtdomain');
});

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

За допомогою wc_get_template()цього ми можемо надати спеціальний шаблон (це не обов’язково один із шаблонів WooCommerce). Як другий аргумент ми можемо визначити змінні, які будуть передані у файл шаблону. Дотримуючись усталеної структури WooCommerce, ми створюємо спеціальний шаблон WooCommerce, який розміщуємо call license-keys.phpв <theme>/woocommerce/myaccount/папці.

Створіть порожній файл <theme>/woocommerce/myaccount/license-keys.php. Усередині цього місця ви визначаєте вихідні дані вашої спеціальної вкладки. Ми також маємо доступ до всіх змінних, які ми передали в масиві wc_get_template(). Отже, у нашому випадку $licensesзмінна буде доступною та заповненою інформацією, яку ми передали з нашої функції кінцевої точки. Ви можете передати скільки завгодно змінних.

Додавання кінцевої точки та спеціальної кнопки до кожного замовлення на сторінці «Мій обліковий запис».

Давайте продовжимо той же приклад вище; припускаючи, що ваш веб-магазин продає програмне забезпечення, і вам потрібно десь показати ліцензійні ключі клієнта. Але замість того, щоб додати спеціальну вкладку, щоб показати їх усі, можливо, ви хочете показати ліцензійні ключі, пов’язані з одним конкретним замовленням? Ми могли б додати спеціальну кнопку поруч із «Переглянути» в огляді замовлень у розділі «Мій обліковий запис»:

Давайте почнемо з того, що ми робили вище: реєструємо власну кінцеву точку:

Зареєструйте спеціальну кінцеву точку

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

Не забудьте очистити постійні посилання (перейдіть у «Налаштування» > «Постійні посилання» та натисніть кнопку «Зберегти»)!

Додайте спеціальну дію (і кнопку)

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

Щоб додати спеціальну дію, нам потрібно надати унікальний ключ і масив із зрозумілими значеннями для «url» і «name». Що стосується URL-адреси, ми використовуємо функцію WordPress для повернення URL-адреси кінцевої точки: wc_get_endpoint_url(). Оскільки нам також потрібно передати ідентифікатор замовлення, ми встановлюємо ідентифікатор замовлення як другий аргумент цієї функції, що призводить до такої URL-адреси: <example.com>/my-account/license-keys/<order ID>/.

Це має додати нову кнопку для кожного виконаного замовлення:

Тепер все, що нам потрібно, це шаблон для відображення кінцевої точки license-keys.

Візуалізація кінцевої точки

Принцип роботи кінцевих точок у WordPress полягає в тому, що все, що йде після кінцевої точки, є значенням цієї змінної запиту; або іншими словами; коли ми відвідуємо, наприклад, URL-адресу <example.com>/my-account/license-keys/204/, яку ми можемо використовувати get_query_var('license-keys')для отримання ідентифікатора замовлення; 204.

Для виведення вмісту для нашої спеціальної кінцевої точки ми підключаємося до неї, woocommerce_account_<endpoint key>_endpointяка в нашому випадку буде woocommerce_account_license-keys_endpoint. Усередині цієї функції ми можемо використовувати get_query_var()для отримання ідентифікатора замовлення, а за допомогою цього запиту порядок для будь-яких ліцензійних ключів.

Фактичний HTML-вихід вашого спеціального шаблону «myaccount/license-keys.php» повністю залежить від ваших потреб. Імовірно, ви б використали ідентифікатор замовлення, щоб зібрати ліцензійні ключі в певний масив і передати його в шаблон для гарного результату. У наведеному вище коді я також передаю ідентифікатор замовлення, щоб він був доступний $order_idусередині шаблону (наприклад, для виведення гарної назви «Ліцензійні ключі для замовлення №204»).