Как добавить пользовательские конечные точки на страницу моей учетной записи в 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 not found», вам необходимо обновить постоянные ссылки. Для этого перейдите в «Настройки» > «Постоянные ссылки» и просто нажмите «Сохранить». Всякий раз, когда мы вносим какие-либо изменения в постоянные ссылки или конечные точки, нам нужно делать это.

Добавление пользовательской вкладки

Следующим шагом будет добавление вкладки на вкладки страницы «Моя учетная запись». Делаем это с помощью фильтра 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»).