{"id":233599,"date":"2023-02-18T15:49:00","date_gmt":"2023-02-18T12:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233599"},"modified":"2022-11-11T00:34:06","modified_gmt":"2022-11-10T21:34:06","slug":"kuinka-lisaetae-mukautettuja-paeaetepisteitae-tilini-sivulle-woocommercessa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-lisaetae-mukautettuja-paeaetepisteitae-tilini-sivulle-woocommercessa\/","title":{"rendered":"Kuinka lis\u00e4t\u00e4 mukautettuja p\u00e4\u00e4tepisteit\u00e4 tilini -sivulle WooCommercessa"},"content":{"rendered":"\n

T\u00e4ss\u00e4 viestiss\u00e4 k\u00e4yd\u00e4\u00e4n l\u00e4pi, kuinka voit lis\u00e4t\u00e4 mukautettuja p\u00e4\u00e4tepisteit\u00e4 WooCommercen<\/a> "Oma tili" -sivulle. Voimme tehd\u00e4 sen saataville kahdella tavalla; joko omana mukautettuna v\u00e4lilehten\u00e4 tai painikkeena jokaiselle tilaukselle "Tilaukset" -v\u00e4lilehdell\u00e4.<\/p>\n

WooCommercen "Oma tili" -sivulla k\u00e4ytet\u00e4\u00e4n WordPressin sis\u00e4\u00e4nrakennettua p\u00e4\u00e4tepisteiden toimintoa, jonka avulla on helppo s\u00e4\u00e4t\u00e4\u00e4 tai lis\u00e4t\u00e4 omia p\u00e4\u00e4tepisteit\u00e4. Jos et ole perehtynyt p\u00e4\u00e4tepisteisiin, suosittelen lukemaan viestini, jossa k\u00e4sitell\u00e4\u00e4n yksityiskohtaisesti mukautettujen p\u00e4\u00e4tepisteiden lis\u00e4\u00e4mist\u00e4 WordPressiin<\/a>.<\/p>\n

Se, miten saat mukautetun p\u00e4\u00e4tepisteesi k\u00e4ytt\u00e4j\u00e4n saataville "Oma tili" -sivulta, riippuu t\u00e4ysin verkkokauppasi tarpeista. Jos haluat vain yleisen sivun lis\u00e4tiedoille, voit lis\u00e4t\u00e4 t\u00e4m\u00e4n sivun omaksi v\u00e4lilehdeksi. Jos kuitenkin haluat, ett\u00e4 p\u00e4\u00e4tepisteesi liittyy jokaiseen tilaukseen, sinun on lis\u00e4tt\u00e4v\u00e4 p\u00e4\u00e4tepiste jokaiselle tilausriville "Tilaukset" -v\u00e4lilehdell\u00e4. T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan molempia tapoja.<\/p>\n

Mukautetun v\u00e4lilehden ja p\u00e4\u00e4tepisteen lis\u00e4\u00e4minen "Omaan tiliin"<\/h2>\n

Oletetaan esimerkiksi, ett\u00e4 verkkokauppamme myy ohjelmistoja ja tarvitsemme paikan, jossa voimme n\u00e4ytt\u00e4\u00e4 asiakkaidemme lisenssiavaimet "Oma tili" -sivulla. Lis\u00e4\u00e4mme mukautetun v\u00e4lilehden "Lisenssiavaimet", jonka pit\u00e4isi tulostaa kaikki kyseiselle k\u00e4ytt\u00e4j\u00e4lle rekister\u00f6idyt kelvolliset lisenssiavaimet.<\/p>\n

Mukautetun p\u00e4\u00e4tepisteen lis\u00e4\u00e4minen<\/h3>\n

Teemaamme functions.php<\/code>tai laajennuskoodiin lis\u00e4\u00e4mme ensin mukautetun p\u00e4\u00e4tepisteemme k\u00e4ytt\u00e4m\u00e4ll\u00e4 add_rewrite_endpoint()<\/code>. Ensimm\u00e4isen\u00e4 perusteena t\u00e4lle tarjoamme ainutlaatuisen avaimen. Alla olevassa esimerkiss\u00e4 olen kutsunut p\u00e4\u00e4tepistett\u00e4 " license-keys<\/code>".<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Muista, ett\u00e4 WordPress lis\u00e4\u00e4 automaattisesti avaimemme kyselyvarseihin k\u00e4ytt\u00e4ess\u00e4\u00e4n add_rewrite_endpoint()<\/code>, joten sinun ei tarvitse suodattaa query_vars<\/code>.<\/p>\n
Jos kohtaat "404 ei l\u00f6ydy" -virheit\u00e4, sinun on p\u00e4ivitett\u00e4v\u00e4 pysyv\u00e4t linkit. Voit tehd\u00e4 t\u00e4m\u00e4n siirtym\u00e4ll\u00e4 kohtaan Asetukset > Pysyv\u00e4t linkit ja napsauttamalla Tallenna. Aina kun teemme muutoksia pysyviin linkkeihin tai p\u00e4\u00e4tepisteisiin, meid\u00e4n on teht\u00e4v\u00e4 t\u00e4m\u00e4.<\/p>\n
Mukautetun v\u00e4lilehden lis\u00e4\u00e4minen<\/h3>\n
Seuraava vaihe on v\u00e4lilehden lis\u00e4\u00e4minen "Oma tili" -sivun v\u00e4lilehdille. Teemme t\u00e4m\u00e4n suodattimen kanssa woocommerce_account_menu_items<\/code>. Suodattimen tuottama taulukko sis\u00e4lt\u00e4\u00e4 kaikki sarkainn\u00e4pp\u00e4imet ja niit\u00e4 vastaavat tunnisteet.<\/p>\n
Voit yksinkertaisesti lis\u00e4t\u00e4 v\u00e4lilehden taulukon loppuun, mutta jos haluat enemm\u00e4n hallita sit\u00e4, miss\u00e4 v\u00e4lilehden pit\u00e4isi n\u00e4ky\u00e4, sinun on manipuloitava taulukkoa PHP-funktioilla. Yll\u00e4 olevassa esimerkiss\u00e4 haluan sen loppuun, mutta ennen "Kirjaudu ulos" -v\u00e4lilehte\u00e4. Joten poistan "Kirjaudu ulos" -v\u00e4lilehden ulos, lis\u00e4\u00e4n v\u00e4lilehden ja laitan sitten "Kirjaudu ulos" -v\u00e4lilehden takaisin.<\/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
Jos p\u00e4ivit\u00e4t Oma tili -sivusi nyt, sinun pit\u00e4isi n\u00e4hd\u00e4 v\u00e4lilehti ennen "Kirjaudu ulos". Napsauttamalla sit\u00e4 p\u00e4\u00e4set URL-osoitteeseen " <example.com>\/my-account\/license-keys\/<\/code>". Et kuitenkaan n\u00e4e mit\u00e4\u00e4n muutosta, kun napsautat v\u00e4lilehte\u00e4. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 emme ole m\u00e4\u00e4ritt\u00e4neet, mit\u00e4 tulostetaan. Se on seuraava askelemme.<\/p>\n
Muokatun v\u00e4lilehden sis\u00e4ll\u00f6n render\u00f6iminen<\/h3>\n
WooCommerce tarjoaa koukun woocommerce_account_<endpoint key>_endpoint<\/code>sis\u00e4ll\u00f6n tulostamiseen "Oma tilille", jossa korvaat sen mukautetulla p\u00e4\u00e4tepisteavaimella. Esimerkiss\u00e4mme oikea koukku olisi 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
Mit\u00e4 tulee v\u00e4lilehden todelliseen tuottoon, t\u00e4m\u00e4 on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Voit tehd\u00e4 kyselyn, hakea tietoja ja sitten tulostaa sen. On kuitenkin suositeltavaa k\u00e4ytt\u00e4\u00e4 malleja HTML:n tulostamiseen sen sijaan, ett\u00e4 koko HTML tulostettaisiin suoraan funktiossamme. WooCommerce tarjoaa erinomaiset toiminnot malleille, joten k\u00e4yt\u00e4mme sit\u00e4.<\/p>\n
K\u00e4ytt\u00e4m\u00e4ll\u00e4 wc_get_template()<\/code>voimme tarjota mukautetun mallin (sen ei tarvitse olla yksi WooCommercen malleista). Toisena argumenttina voimme m\u00e4\u00e4ritell\u00e4 muuttujat, jotka v\u00e4litet\u00e4\u00e4n mallitiedostoon. WooCommercen vakiintuneen rakenteen mukaisesti luomme mukautetun WooCommerce-mallin, jonka me call license-keys.php<\/code>kansioon <theme>\/woocommerce\/myaccount\/<\/code>.<\/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
Mene eteenp\u00e4in ja luo tyhj\u00e4 tiedosto <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. T\u00e4m\u00e4n sis\u00e4ll\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4 mukautetun v\u00e4lilehden tulosteen. Meill\u00e4 on my\u00f6s p\u00e4\u00e4sy kaikkiin muuttujiin, jotka v\u00e4litimme taulukossa wc_get_template()<\/code>. Joten meid\u00e4n tapauksessamme $licenses<\/code>muuttuja on saatavilla ja t\u00e4ytet\u00e4\u00e4n tiedoilla, jotka v\u00e4litimme p\u00e4\u00e4tepistefunktiostamme. Voit v\u00e4litt\u00e4\u00e4 niin monta muuttujaa kuin tarvitset.<\/p>\n
P\u00e4\u00e4tepisteen ja mukautetun painikkeen lis\u00e4\u00e4minen jokaiseen tilaukseen "Oma tili" -sivulla<\/h2>\n
Jatketaan samalla esimerkill\u00e4 yll\u00e4; olettaen, ett\u00e4 verkkokauppasi myy ohjelmistoja ja sinun on n\u00e4ytett\u00e4v\u00e4 asiakkaan lisenssiavaimet jossain. Mutta sen sijaan, ett\u00e4 lis\u00e4isit mukautetun v\u00e4lilehden n\u00e4ytt\u00e4m\u00e4\u00e4n ne kaikki, ehk\u00e4 haluat mieluummin n\u00e4ytt\u00e4\u00e4 tiettyyn tilaukseen liitetyt lisenssiavaimet? Voisimme lis\u00e4t\u00e4 mukautetun painikkeen "N\u00e4yt\u00e4"-kohdan viereen Oma tili -sivun tilauskatsauksessa:<\/p>\n
\"Kuinka<\/a><\/p>\n
Aloitetaan tekem\u00e4ll\u00e4 sama kuin edell\u00e4: rekister\u00f6id\u00e4\u00e4n mukautettu p\u00e4\u00e4tepiste:<\/p>\n
Rekister\u00f6i mukautettu p\u00e4\u00e4tepiste<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
\u00c4l\u00e4 unohda huuhdella pysyv\u00e4t linkit (siirry kohtaan Asetukset > Pysyv\u00e4t linkit ja paina Tallenna-painiketta)!<\/p>\n
Lis\u00e4\u00e4 mukautettu toiminto (ja painike)<\/h3>\n
Seuraava vaihe on painikkeen lis\u00e4\u00e4minen suodattimen avulla woocommerce_my_account_my_orders_actions<\/code>. Toisena argumenttina t\u00e4lle suodattimelle saat tilausobjektin. Se on eritt\u00e4in hy\u00f6dyllist\u00e4; Haluamme tarkistaa, ett\u00e4 tilaus on valmis ja maksettu, jotta emme n\u00e4yt\u00e4 maksamattomien tai peruutettujen tilausten lisenssiavaimia. Tilausobjektin avulla saamme my\u00f6s tilaustunnuksen, joka on todenn\u00e4k\u00f6isimmin v\u00e4ltt\u00e4m\u00e4t\u00f6n tilauksen tuotteiden lisenssiavainten kyselyyn. Alla olevasta koodista tarkistan vain, onko tilauksen tila valmis vai ei. Sinun on luultavasti lis\u00e4tt\u00e4v\u00e4 oma koodisi tarkistaaksesi, onko tilausta kohti n\u00e4ytett\u00e4v\u00e4\u00e4 lisenssiavaimia.<\/p>\n
Jotta voimme lis\u00e4t\u00e4 mukautetun toiminnon, meid\u00e4n on annettava yksil\u00f6llinen avain ja taulukko, jossa on itsest\u00e4\u00e4n selvi\u00e4 arvoja kohteille " url<\/code>" ja " name<\/code>". Mit\u00e4 tulee URL-osoitteeseen, k\u00e4yt\u00e4mme WordPressin toimintoa p\u00e4\u00e4tepisteen URL-osoitteen palauttamiseen: wc_get_endpoint_url()<\/code>. Koska meid\u00e4n on v\u00e4litett\u00e4v\u00e4 my\u00f6s tilaustunnus, asetamme tilaustunnuksen t\u00e4m\u00e4n funktion toiseksi argumentiksi, mik\u00e4 johtaa seuraavan URL-osoitteen: <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
T\u00e4m\u00e4n pit\u00e4isi lis\u00e4t\u00e4 uusi painike jokaiselle valmiille tilaukselle:<\/p>\n
\"Kuinka<\/a><\/p>\n
Nyt tarvitsemme vain mallin, joka n\u00e4ytet\u00e4\u00e4n p\u00e4\u00e4tepisteelle license-keys<\/code>.<\/p>\n
Loppupisteen render\u00f6iminen<\/h3>\n
P\u00e4\u00e4tepisteiden toimintatapa WordPressiss\u00e4 on se, ett\u00e4 p\u00e4\u00e4tepisteen j\u00e4lkeen tuleva on kyseisen kyselymuuttujan arvo. tai toisin sanoen; kun k\u00e4ymme esimerkiksi URL-osoitteessa, <example.com>\/my-account\/license-keys\/204\/<\/code>jota voimme k\u00e4ytt\u00e4\u00e4 get_query_var('license-keys')<\/code>tilaustunnuksen saamiseen; 204.<\/p>\n
Muokatun p\u00e4\u00e4tepisteemme sis\u00e4ll\u00f6n tuottamiseksi kiinnit\u00e4mme siihen, woocommerce_account_<endpoint key>_endpoint<\/code>mik\u00e4 meid\u00e4n tapauksessamme olisi woocommerce_account_license-keys_endpoint<\/code>. T\u00e4m\u00e4n toiminnon sis\u00e4ll\u00e4 voimme get_query_var()<\/code>hankkia tilaustunnuksen ja t\u00e4ll\u00e4 kyselyll\u00e4 tilauksen mille tahansa lisenssiavaimelle.<\/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
Muokatun mallisi " myaccount\/license-keys.php<\/code>" todellinen HTML-tulostus riippuu t\u00e4ysin tarpeistasi. Oletettavasti olisit k\u00e4ytt\u00e4nyt tilaustunnusta ker\u00e4t\u00e4ksesi lisenssiavaimet johonkin taulukkoon ja v\u00e4litt\u00e4nyt sen malliin mukavan tulosteen saamiseksi. Yll\u00e4 olevassa koodissa v\u00e4lit\u00e4n my\u00f6s tilaustunnuksen, jotta se on k\u00e4ytett\u00e4viss\u00e4 $order_id<\/code>mallin sis\u00e4ll\u00e4 (esim. mukavan otsikon tulostamiseen "Tilauksen #204 lisenssiavaimet").<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 viesti selitt\u00e4\u00e4 kuinka lis\u00e4t\u00e4 mukautettuja p\u00e4\u00e4tepisteit\u00e4 WooCommercen ”Oma tilille”; joko omana v\u00e4lilehten\u00e4 tai jokaisen tilauksen painikkeena ”Tilaukset”-v\u00e4lilehdell\u00e4.<\/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":[813,1110,843,813,843,854,854,864,864],"tags":[1166],"class_list":{"0":"post-233599","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-laajennuksia","8":"category-n-a","9":"category-opetusohjelmia","12":"category-woocommerce-5","14":"category-wordpress-5","16":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233599"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233599\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}