W tym poście dowiesz się, jak dodać niestandardowe punkty końcowe do strony „Moje konto" WooCommerce. Możemy ją udostępnić na dwa sposoby: jako własną niestandardową kartę lub jako przycisk do każdego zamówienia w zakładce „Zamówienia”.
Strona „Moje konto” WooCommerce wykorzystuje wbudowaną funkcję WordPress dla punktów końcowych, co ułatwia dostosowywanie lub dodawanie własnych punktów końcowych. Jeśli nie znasz punktów końcowych, polecam przeczytanie mojego postu, który szczegółowo opisuje , jak dodawać niestandardowe punkty końcowe w WordPress.
Sposób, w jaki udostępniasz swój niestandardowy punkt końcowy dla użytkownika z poziomu „Moje konto”, zależy całkowicie od potrzeb Twojego sklepu internetowego. Jeśli chcesz po prostu ogólną stronę zawierającą dodatkowe informacje, możesz dodać tę stronę jako osobną kartę. Jeśli jednak chcesz, aby Twój punkt końcowy był powiązany z każdym zamówieniem, musisz dodać swój punkt końcowy do każdego wiersza zamówienia w zakładce „Zamówienia”. W tym poście przyjrzymy się obu metodom.
Dodawanie niestandardowej karty i punktu końcowego do „Mojego konta”
Dla przykładu załóżmy, że nasz sklep internetowy sprzedaje oprogramowanie i potrzebujemy miejsca na pokazanie kluczy licencyjnych naszych klientów na ich stronie „Moje konto”. Dodamy niestandardową zakładkę „Klucze licencyjne”, która powinna wyświetlać wszystkie ważne klucze licencyjne zarejestrowane dla tego użytkownika.
Dodawanie niestandardowego punktu końcowego
W kodzie naszego motywu functions.phplub wtyczki najpierw dodajemy nasz niestandardowy punkt końcowy za pomocą add_rewrite_endpoint(). Jako pierwszy argument do tego podajemy unikalny klucz. W poniższym przykładzie nazwałem punkt końcowy „ license-keys“.
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Pamiętaj, że WordPress automatycznie dodaje nasz klucz do zmiennych zapytań podczas używania add_rewrite_endpoint(), więc nie ma potrzeby filtrowania query_vars.
Jeśli napotkasz błędy „404 nie znaleziono”, musisz odświeżyć swoje permalinki. Robisz to, przechodząc do Ustawienia> Permalinki i po prostu kliknij Zapisz. Zawsze, gdy wprowadzamy jakiekolwiek zmiany w permalinkach lub punktach końcowych, musimy to zrobić.
Dodawanie niestandardowej karty
Kolejnym krokiem jest dodanie zakładki do zakładek strony „Moje konto”. Robimy to z filtrem woocommerce_account_menu_items. Tablica dostarczona przez filtr zawiera wszystkie klawisze tabulacji i odpowiadającą im etykietę.
Możesz po prostu dołączyć swoją kartę na końcu tablicy, ale jeśli chcesz mieć większą kontrolę nad tym, gdzie powinna się pojawić twoja karta, musisz manipulować tablicą za pomocą funkcji PHP. W powyższym przykładzie chcę to na końcu, ale przed zakładką „Wyloguj”. Wyjmuję więc zakładkę "Wyloguj", wstawiam zakładkę, a następnie odkładam zakładkę "Wyloguj".
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;
});Jeśli teraz odświeżysz stronę Moje konto, powinieneś zobaczyć swoją kartę przed „Wyloguj”. Kliknięcie na nią przeniesie Cię do adresu URL „ <example.com>/my-account/license-keys/“. Jednak po kliknięciu zakładki nic się nie zmieni. Dzieje się tak, ponieważ nie zdefiniowaliśmy, co ma być wyprowadzane. To nasz następny krok.
Renderowanie zawartości niestandardowej karty
WooCommerce oferuje hak woocommerce_account_<endpoint key>_endpointdo wyprowadzania treści w „Moim koncie”, w którym zastępujesz niestandardowym kluczem punktu końcowego. W naszym przykładzie prawidłowym hakiem będzie woocommerce_account_license-keys_endpoint.
add_action('woocommerce_account_license-keys_endpoint', function() {
_e('Your license keys', 'txtdomain');
});Jeśli chodzi o rzeczywistą wydajność karty, zależy to wyłącznie od Ciebie. Możesz wykonać zapytanie, pobrać pewne informacje, a następnie je wyprowadzić. Jednak zaleca się używanie szablonów do wyprowadzania kodu HTML zamiast wyprowadzania całego kodu HTML bezpośrednio w naszej funkcji. WooCommerce oferuje świetną funkcjonalność szablonów, więc skorzystamy z niej.
Za pomocą wc_get_template()możemy dostarczyć niestandardowy szablon (nie musi to być jeden z szablonów WooCommerce). Jako drugi argument możemy zdefiniować zmienne, które zostaną przekazane do pliku szablonu. Zgodnie z ustaloną strukturą WooCommerce tworzymy niestandardowy szablon WooCommerce, który umieszczamy call license-keys.phpw <theme>/woocommerce/myaccount/folderze.
Śmiało i utwórz pusty plik <theme>/woocommerce/myaccount/license-keys.php. W tym miejscu definiujesz dane wyjściowe swojej niestandardowej karty. Mamy również dostęp do wszystkich zmiennych, które przekazaliśmy w tablicy do wc_get_template(). Tak więc w naszym przypadku $licenseszmienna będzie dostępna i wypełniona informacjami, które przekazaliśmy z naszej funkcji punktu końcowego. Możesz przekazać tyle zmiennych, ile potrzebujesz.
Dodanie punktu końcowego i niestandardowego przycisku do każdego zamówienia na stronie „Moje konto”
Kontynuujmy ten sam przykład powyżej; zakładając, że Twój sklep internetowy sprzedaje oprogramowanie i musisz gdzieś pokazać klucze licencyjne klienta. Ale zamiast dodawać niestandardową zakładkę, aby pokazać je wszystkie, może wolisz pokazać klucze licencyjne powiązane z jednym konkretnym zamówieniem? Możemy dodać niestandardowy przycisk obok „Wyświetl” w przeglądzie zamówień na Moim koncie:
Zacznijmy od zrobienia tego samego, co powyżej: zarejestrowanie niestandardowego punktu końcowego:
Zarejestruj niestandardowy punkt końcowy
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Nie zapomnij opróżnić permalinków (przejdź do Ustawienia > Permalinki i naciśnij przycisk Zapisz)!
Dodaj akcję niestandardową (i przycisk)
Kolejnym krokiem jest dodanie przycisku za pomocą filtra woocommerce_my_account_my_orders_actions. Jako drugi argument tego filtra otrzymujesz obiekt order. To bardzo przydatne; chcemy sprawdzić, czy zamówienie jest zrealizowane i opłacone, aby nie pokazywać kluczy licencyjnych dla nieopłaconych lub anulowanych zamówień. Wraz z obiektem zamówienia otrzymujemy również identyfikator zamówienia, który jest najprawdopodobniej niezbędny do przeszukiwania kluczy licencyjnych dla produktów w tym zamówieniu. W poniższym kodzie po prostu sprawdzam, czy status zamówienia jest zakończony. Prawdopodobnie będziesz musiał dodać własny kod, aby sprawdzić, czy są jakieś klucze licencyjne do wyświetlenia w zamówieniu.
Aby dodać niestandardową akcję, musimy podać unikalny klucz i tablicę z wartościami nie wymagającymi objaśnień dla „ url” i „ name“. Jeśli chodzi o adres URL, używamy funkcji WordPressa do zwracania adresu URL punktu końcowego: wc_get_endpoint_url(). Ponieważ musimy również przekazać identyfikator zamówienia, jako drugi argument tej funkcji ustawiamy identyfikator zamówienia, co skutkuje następującym adresem URL: <example.com>/my-account/license-keys/<order ID>/.
Powinno to dodać nowy przycisk dla każdego zrealizowanego zamówienia:
Teraz potrzebujemy tylko szablonu do wyświetlenia dla punktu końcowego license-keys.
Renderowanie punktu końcowego
Sposób działania punktów końcowych w WordPress polega na tym, że wszystko, co następuje po punkcie końcowym, jest wartością tej zmiennej zapytania; lub innymi słowy; kiedy odwiedzamy na przykład adres URL <example.com>/my-account/license-keys/204/, którego możemy użyć get_query_var('license-keys')w celu uzyskania identyfikatora zamówienia; 204.
Aby wyprowadzić zawartość dla naszego niestandardowego punktu końcowego, podpinamy się do tego, woocommerce_account_<endpoint key>_endpointktóry w naszym przypadku byłby woocommerce_account_license-keys_endpoint. Wewnątrz tej funkcji możemy użyć get_query_var()do uzyskania identyfikatora zamówienia i zapytania o zamówienie na dowolne klucze licencyjne.
Rzeczywisty wynik HTML Twojego szablonu niestandardowego „ myaccount/license-keys.php” zależy wyłącznie od Twoich potrzeb. Przypuszczalnie użyłbyś identyfikatora zamówienia, aby zebrać klucze licencyjne w jakiejś tablicy i przekazać je dalej do szablonu w celu uzyskania ładnego wyniku. W powyższym kodzie przekazuję również identyfikator zamówienia, więc jest on dostępny jak $order_idw szablonie (np. w celu wypisania ładnego tytułu „Klucze licencyjne dla zamówienia nr 204″).