{"id":233640,"date":"2023-02-18T15:47:00","date_gmt":"2023-02-18T12:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233640"},"modified":"2022-11-11T00:47:24","modified_gmt":"2022-11-10T21:47:24","slug":"jak-dodac-niestandardowe-punkty-koncowe-do-strony-moje-konto-w-woocommerce","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-dodac-niestandardowe-punkty-koncowe-do-strony-moje-konto-w-woocommerce\/","title":{"rendered":"Jak doda\u0107 niestandardowe punkty ko\u0144cowe do strony Moje konto w WooCommerce?"},"content":{"rendered":"\n

W tym po\u015bcie dowiesz si\u0119, jak doda\u0107 niestandardowe punkty ko\u0144cowe do strony \u201eMoje konto" WooCommerce<\/a>. Mo\u017cemy j\u0105 udost\u0119pni\u0107 na dwa sposoby: jako w\u0142asn\u0105 niestandardow\u0105 kart\u0119 lub jako przycisk do ka\u017cdego zam\u00f3wienia w zak\u0142adce \u201eZam\u00f3wienia”.<\/p>\n

Strona \u201eMoje konto” WooCommerce wykorzystuje wbudowan\u0105 funkcj\u0119 WordPress dla punkt\u00f3w ko\u0144cowych, co u\u0142atwia dostosowywanie lub dodawanie w\u0142asnych punkt\u00f3w ko\u0144cowych. Je\u015bli nie znasz punkt\u00f3w ko\u0144cowych, polecam przeczytanie mojego postu, kt\u00f3ry szczeg\u00f3\u0142owo opisuje , jak dodawa\u0107 niestandardowe punkty ko\u0144cowe w WordPress<\/a>.<\/p>\n

Spos\u00f3b, w jaki udost\u0119pniasz sw\u00f3j niestandardowy punkt ko\u0144cowy dla u\u017cytkownika z poziomu \u201eMoje konto”, zale\u017cy ca\u0142kowicie od potrzeb Twojego sklepu internetowego. Je\u015bli chcesz po prostu og\u00f3ln\u0105 stron\u0119 zawieraj\u0105c\u0105 dodatkowe informacje, mo\u017cesz doda\u0107 t\u0119 stron\u0119 jako osobn\u0105 kart\u0119. Je\u015bli jednak chcesz, aby Tw\u00f3j punkt ko\u0144cowy by\u0142 powi\u0105zany z ka\u017cdym zam\u00f3wieniem, musisz doda\u0107 sw\u00f3j punkt ko\u0144cowy do ka\u017cdego wiersza zam\u00f3wienia w zak\u0142adce \u201eZam\u00f3wienia”. W tym po\u015bcie przyjrzymy si\u0119 obu metodom.<\/p>\n

Dodawanie niestandardowej karty i punktu ko\u0144cowego do \u201eMojego konta”<\/h2>\n

Dla przyk\u0142adu za\u0142\u00f3\u017cmy, \u017ce nasz sklep internetowy sprzedaje oprogramowanie i potrzebujemy miejsca na pokazanie kluczy licencyjnych naszych klient\u00f3w na ich stronie \u201eMoje konto”. Dodamy niestandardow\u0105 zak\u0142adk\u0119 \u201eKlucze licencyjne”, kt\u00f3ra powinna wy\u015bwietla\u0107 wszystkie wa\u017cne klucze licencyjne zarejestrowane dla tego u\u017cytkownika.<\/p>\n

Dodawanie niestandardowego punktu ko\u0144cowego<\/h3>\n

W kodzie naszego motywu functions.php<\/code>lub wtyczki najpierw dodajemy nasz niestandardowy punkt ko\u0144cowy za pomoc\u0105 add_rewrite_endpoint()<\/code>. Jako pierwszy argument do tego podajemy unikalny klucz. W poni\u017cszym przyk\u0142adzie nazwa\u0142em punkt ko\u0144cowy \u201e license-keys<\/code>„.<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Pami\u0119taj, \u017ce WordPress automatycznie dodaje nasz klucz do zmiennych zapyta\u0144 podczas u\u017cywania add_rewrite_endpoint()<\/code>, wi\u0119c nie ma potrzeby filtrowania query_vars<\/code>.<\/p>\n
Je\u015bli napotkasz b\u0142\u0119dy \u201e404 nie znaleziono”, musisz od\u015bwie\u017cy\u0107 swoje permalinki. Robisz to, przechodz\u0105c do Ustawienia> Permalinki i po prostu kliknij Zapisz. Zawsze, gdy wprowadzamy jakiekolwiek zmiany w permalinkach lub punktach ko\u0144cowych, musimy to zrobi\u0107.<\/p>\n
Dodawanie niestandardowej karty<\/h3>\n
Kolejnym krokiem jest dodanie zak\u0142adki do zak\u0142adek strony \u201eMoje konto”. Robimy to z filtrem woocommerce_account_menu_items<\/code>. Tablica dostarczona przez filtr zawiera wszystkie klawisze tabulacji i odpowiadaj\u0105c\u0105 im etykiet\u0119.<\/p>\n
Mo\u017cesz po prostu do\u0142\u0105czy\u0107 swoj\u0105 kart\u0119 na ko\u0144cu tablicy, ale je\u015bli chcesz mie\u0107 wi\u0119ksz\u0105 kontrol\u0119 nad tym, gdzie powinna si\u0119 pojawi\u0107 twoja karta, musisz manipulowa\u0107 tablic\u0105 za pomoc\u0105 funkcji PHP. W powy\u017cszym przyk\u0142adzie chc\u0119 to na ko\u0144cu, ale przed zak\u0142adk\u0105 \u201eWyloguj”. Wyjmuj\u0119 wi\u0119c zak\u0142adk\u0119 "Wyloguj", wstawiam zak\u0142adk\u0119, a nast\u0119pnie odk\u0142adam zak\u0142adk\u0119 "Wyloguj".<\/p>\n
add_filter('woocommerce_account_menu_items', function($items) {\n    $logout = $items['customer-logout'];\n    unset($items['customer-logout']);\n    $items['license-keys'] = __('License keys', 'txtdomain');\n    $items['customer-logout'] = $logout;\n    return $items;\n});<\/code><\/pre>\n
Je\u015bli teraz od\u015bwie\u017cysz stron\u0119 Moje konto, powiniene\u015b zobaczy\u0107 swoj\u0105 kart\u0119 przed \u201eWyloguj”. Klikni\u0119cie na ni\u0105 przeniesie Ci\u0119 do adresu URL \u201e <example.com>\/my-account\/license-keys\/<\/code>„. Jednak po klikni\u0119ciu zak\u0142adki nic si\u0119 nie zmieni. Dzieje si\u0119 tak, poniewa\u017c nie zdefiniowali\u015bmy, co ma by\u0107 wyprowadzane. To nasz nast\u0119pny krok.<\/p>\n
Renderowanie zawarto\u015bci niestandardowej karty<\/h3>\n
WooCommerce oferuje hak woocommerce_account_<endpoint key>_endpoint<\/code>do wyprowadzania tre\u015bci w \u201eMoim koncie”, w kt\u00f3rym zast\u0119pujesz niestandardowym kluczem punktu ko\u0144cowego. W naszym przyk\u0142adzie prawid\u0142owym hakiem b\u0119dzie woocommerce_account_license-keys_endpoint<\/code>.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    _e('Your license keys', 'txtdomain');\n});<\/code><\/pre>\n
Je\u015bli chodzi o rzeczywist\u0105 wydajno\u015b\u0107 karty, zale\u017cy to wy\u0142\u0105cznie od Ciebie. Mo\u017cesz wykona\u0107 zapytanie, pobra\u0107 pewne informacje, a nast\u0119pnie je wyprowadzi\u0107. Jednak zaleca si\u0119 u\u017cywanie szablon\u00f3w do wyprowadzania kodu HTML zamiast wyprowadzania ca\u0142ego kodu HTML bezpo\u015brednio w naszej funkcji. WooCommerce oferuje \u015bwietn\u0105 funkcjonalno\u015b\u0107 szablon\u00f3w, wi\u0119c skorzystamy z niej.<\/p>\n
Za pomoc\u0105 wc_get_template()<\/code>mo\u017cemy dostarczy\u0107 niestandardowy szablon (nie musi to by\u0107 jeden z szablon\u00f3w WooCommerce). Jako drugi argument mo\u017cemy zdefiniowa\u0107 zmienne, kt\u00f3re zostan\u0105 przekazane do pliku szablonu. Zgodnie z ustalon\u0105 struktur\u0105 WooCommerce tworzymy niestandardowy szablon WooCommerce, kt\u00f3ry umieszczamy call license-keys.php<\/code>w <theme>\/woocommerce\/myaccount\/<\/code>folderze.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    $licenses = [];  \/\/ Replace with function to return licenses for current logged in user\n    wc_get_template('myaccount\/license-keys.php', [\n        'licenses' => $licenses\n    ]);\n});<\/code><\/pre>\n
\u015amia\u0142o i utw\u00f3rz pusty plik <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. W tym miejscu definiujesz dane wyj\u015bciowe swojej niestandardowej karty. Mamy r\u00f3wnie\u017c dost\u0119p do wszystkich zmiennych, kt\u00f3re przekazali\u015bmy w tablicy do wc_get_template()<\/code>. Tak wi\u0119c w naszym przypadku $licenses<\/code>zmienna b\u0119dzie dost\u0119pna i wype\u0142niona informacjami, kt\u00f3re przekazali\u015bmy z naszej funkcji punktu ko\u0144cowego. Mo\u017cesz przekaza\u0107 tyle zmiennych, ile potrzebujesz.<\/p>\n
Dodanie punktu ko\u0144cowego i niestandardowego przycisku do ka\u017cdego zam\u00f3wienia na stronie \u201eMoje konto”<\/h2>\n
Kontynuujmy ten sam przyk\u0142ad powy\u017cej; zak\u0142adaj\u0105c, \u017ce Tw\u00f3j sklep internetowy sprzedaje oprogramowanie i musisz gdzie\u015b pokaza\u0107 klucze licencyjne klienta. Ale zamiast dodawa\u0107 niestandardow\u0105 zak\u0142adk\u0119, aby pokaza\u0107 je wszystkie, mo\u017ce wolisz pokaza\u0107 klucze licencyjne powi\u0105zane z jednym konkretnym zam\u00f3wieniem? Mo\u017cemy doda\u0107 niestandardowy przycisk obok \u201eWy\u015bwietl” w przegl\u0105dzie zam\u00f3wie\u0144 na Moim koncie:<\/p>\n
\"Jak<\/a><\/p>\n
Zacznijmy od zrobienia tego samego, co powy\u017cej: zarejestrowanie niestandardowego punktu ko\u0144cowego:<\/p>\n
Zarejestruj niestandardowy punkt ko\u0144cowy<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Nie zapomnij opr\u00f3\u017cni\u0107 permalink\u00f3w (przejd\u017a do Ustawienia > Permalinki i naci\u015bnij przycisk Zapisz)!<\/p>\n
Dodaj akcj\u0119 niestandardow\u0105 (i przycisk)<\/h3>\n
Kolejnym krokiem jest dodanie przycisku za pomoc\u0105 filtra woocommerce_my_account_my_orders_actions<\/code>. Jako drugi argument tego filtra otrzymujesz obiekt order. To bardzo przydatne; chcemy sprawdzi\u0107, czy zam\u00f3wienie jest zrealizowane i op\u0142acone, aby nie pokazywa\u0107 kluczy licencyjnych dla nieop\u0142aconych lub anulowanych zam\u00f3wie\u0144. Wraz z obiektem zam\u00f3wienia otrzymujemy r\u00f3wnie\u017c identyfikator zam\u00f3wienia, kt\u00f3ry jest najprawdopodobniej niezb\u0119dny do przeszukiwania kluczy licencyjnych dla produkt\u00f3w w tym zam\u00f3wieniu. W poni\u017cszym kodzie po prostu sprawdzam, czy status zam\u00f3wienia jest zako\u0144czony. Prawdopodobnie b\u0119dziesz musia\u0142 doda\u0107 w\u0142asny kod, aby sprawdzi\u0107, czy s\u0105 jakie\u015b klucze licencyjne do wy\u015bwietlenia w zam\u00f3wieniu.<\/p>\n
Aby doda\u0107 niestandardow\u0105 akcj\u0119, musimy poda\u0107 unikalny klucz i tablic\u0119 z warto\u015bciami nie wymagaj\u0105cymi obja\u015bnie\u0144 dla \u201e url<\/code>” i \u201e name<\/code>„. Je\u015bli chodzi o adres URL, u\u017cywamy funkcji WordPressa do zwracania adresu URL punktu ko\u0144cowego: wc_get_endpoint_url()<\/code>. Poniewa\u017c musimy r\u00f3wnie\u017c przekaza\u0107 identyfikator zam\u00f3wienia, jako drugi argument tej funkcji ustawiamy identyfikator zam\u00f3wienia, co skutkuje nast\u0119puj\u0105cym adresem URL: <example.com>\/my-account\/license-keys\/<order ID>\/<\/code>.<\/p>\n
add_filter('woocommerce_my_account_my_orders_actions', function($actions, $order) {\n    if ($order->get_status() == 'completed') {\n        $actions['view-license-keys'] = [\n            'url' => wc_get_endpoint_url('license-keys', $order->get_id()),\n            'name' => __('View license keys', 'txtdomain')\n        ];\n    }\n    return $actions;\n}, 10, 2);<\/code><\/pre>\n
Powinno to doda\u0107 nowy przycisk dla ka\u017cdego zrealizowanego zam\u00f3wienia:<\/p>\n
\"Jak<\/a><\/p>\n
Teraz potrzebujemy tylko szablonu do wy\u015bwietlenia dla punktu ko\u0144cowego license-keys<\/code>.<\/p>\n
Renderowanie punktu ko\u0144cowego<\/h3>\n
Spos\u00f3b dzia\u0142ania punkt\u00f3w ko\u0144cowych w WordPress polega na tym, \u017ce wszystko, co nast\u0119puje po punkcie ko\u0144cowym, jest warto\u015bci\u0105 tej zmiennej zapytania; lub innymi s\u0142owy; kiedy odwiedzamy na przyk\u0142ad adres URL <example.com>\/my-account\/license-keys\/204\/<\/code>, kt\u00f3rego mo\u017cemy u\u017cy\u0107 get_query_var('license-keys')<\/code>w celu uzyskania identyfikatora zam\u00f3wienia; 204.<\/p>\n
Aby wyprowadzi\u0107 zawarto\u015b\u0107 dla naszego niestandardowego punktu ko\u0144cowego, podpinamy si\u0119 do tego, woocommerce_account_<endpoint key>_endpoint<\/code>kt\u00f3ry w naszym przypadku by\u0142by woocommerce_account_license-keys_endpoint<\/code>. Wewn\u0105trz tej funkcji mo\u017cemy u\u017cy\u0107 get_query_var()<\/code>do uzyskania identyfikatora zam\u00f3wienia i zapytania o zam\u00f3wienie na dowolne klucze licencyjne.<\/p>\n
add_action('woocommerce_account_license-keys_endpoint', function() {\n    $order_id = get_query_var('license-keys');\n    $licenses = [];  \/\/ Function to return licenses for order ID\n\u00a0\n    wc_get_template('myaccount\/license-keys.php', [\n        'licenses' => $licenses,\n        'order_id' => $order_id\n    ]);\n});<\/code><\/pre>\n
Rzeczywisty wynik HTML Twojego szablonu niestandardowego \u201e myaccount\/license-keys.php<\/code>” zale\u017cy wy\u0142\u0105cznie od Twoich potrzeb. Przypuszczalnie u\u017cy\u0142by\u015b identyfikatora zam\u00f3wienia, aby zebra\u0107 klucze licencyjne w jakiej\u015b tablicy i przekaza\u0107 je dalej do szablonu w celu uzyskania \u0142adnego wyniku. W powy\u017cszym kodzie przekazuj\u0119 r\u00f3wnie\u017c identyfikator zam\u00f3wienia, wi\u0119c jest on dost\u0119pny jak $order_id<\/code>w szablonie (np. w celu wypisania \u0142adnego tytu\u0142u \u201eKlucze licencyjne dla zam\u00f3wienia nr 204″).<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
W tym po\u015bcie wyja\u015bnimy, jak doda\u0107 niestandardowe punkty ko\u0144cowe do \u201eMojego konta\u201d WooCommerce; albo jako w\u0142asna zak\u0142adka, albo jako przycisk do ka\u017cdego zam\u00f3wienia w zak\u0142adce „Zam\u00f3wienia”.<\/p>\n","protected":false},"author":1,"featured_media":223696,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[1110,815,845,845,856,856,866,866,815],"tags":[1169],"class_list":{"0":"post-233640","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-n-a","8":"category-wtyczki","9":"category-samouczki","11":"category-woocommerce-7","13":"category-wordpress-7","16":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233640"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}