{"id":233584,"date":"2023-02-18T15:26:00","date_gmt":"2023-02-18T12:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233584"},"modified":"2022-11-11T00:29:07","modified_gmt":"2022-11-10T21:29:07","slug":"hur-man-laegger-till-anpassade-slutpunkter-paa-sidan-mitt-konto-i-woocommerce","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-laegger-till-anpassade-slutpunkter-paa-sidan-mitt-konto-i-woocommerce\/","title":{"rendered":"Hur man l\u00e4gger till anpassade slutpunkter p\u00e5 sidan Mitt konto i WooCommerce"},"content":{"rendered":"\n

Det h\u00e4r inl\u00e4gget kommer att g\u00e5 igenom hur man l\u00e4gger till anpassade slutpunkter p\u00e5 WooCommerces<\/a> "Mitt konto"-sida. Vi kan g\u00f6ra det tillg\u00e4ngligt p\u00e5 tv\u00e5 s\u00e4tt; antingen som en egen anpassad flik eller som en knapp f\u00f6r varje best\u00e4llning p\u00e5 fliken "Best\u00e4llningar".<\/p>\n

WooCommerces "Mitt konto"-sida anv\u00e4nder WordPress inbyggda funktionalitet f\u00f6r endpoints vilket g\u00f6r det enkelt att justera eller l\u00e4gga till dina egna endpoints. Om du inte \u00e4r bekant med endpoints rekommenderar jag att du l\u00e4ser mitt inl\u00e4gg som g\u00e5r in i detalj om hur man l\u00e4gger till anpassade endpoints i WordPress<\/a>.<\/p>\n

Hur du g\u00f6r din anpassade slutpunkt tillg\u00e4nglig f\u00f6r anv\u00e4ndaren fr\u00e5n "Mitt konto" beror helt p\u00e5 din webshops behov. Om du bara vill ha en allm\u00e4n sida f\u00f6r ytterligare information kan du l\u00e4gga till den h\u00e4r sidan som en egen flik. Om du d\u00e4remot vill att din \u00e4ndpunkt ska vara relaterad till varje best\u00e4llning, m\u00e5ste du l\u00e4gga till din \u00e4ndpunkt p\u00e5 varje best\u00e4llningsrad p\u00e5 fliken "Best\u00e4llningar". I det h\u00e4r inl\u00e4gget ska vi titta p\u00e5 b\u00e5da metoderna.<\/p>\n

L\u00e4gga till en anpassad flik och slutpunkt i "Mitt konto"<\/h2>\n

L\u00e5t oss till exempel anta att v\u00e5r webbshop s\u00e4ljer mjukvara och att vi beh\u00f6ver en plats f\u00f6r att visa v\u00e5ra kunders licensnycklar p\u00e5 deras "Mitt konto"-sida. Vi l\u00e4gger till en anpassad flik "Licensnycklar" som ska mata ut alla giltiga licensnycklar som registrerats f\u00f6r den anv\u00e4ndaren.<\/p>\n

L\u00e4gga till en anpassad slutpunkt<\/h3>\n

I v\u00e5rt tema functions.php<\/code>eller plugin-kod l\u00e4gger vi f\u00f6rst till v\u00e5r anpassade slutpunkt med hj\u00e4lp av add_rewrite_endpoint()<\/code>. Som f\u00f6rsta argument f\u00f6r detta tillhandah\u00e5ller vi en unik nyckel. I exemplet nedan har jag kallat slutpunkten f\u00f6r ’ license-keys<\/code>’.<\/p>\n

add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
T\u00e4nk p\u00e5 att WordPress automatiskt l\u00e4gger till v\u00e5r nyckel till fr\u00e5gevarianter n\u00e4r du anv\u00e4nder add_rewrite_endpoint()<\/code>, s\u00e5 det finns ingen anledning att filtrera query_vars<\/code>.<\/p>\n
Om du st\u00f6ter p\u00e5 "404 not found"-fel m\u00e5ste du uppdatera dina permal\u00e4nkar. Du g\u00f6r detta genom att g\u00e5 till Inst\u00e4llningar > Permal\u00e4nkar och klicka bara p\u00e5 Spara. N\u00e4r vi g\u00f6r n\u00e5gra \u00e4ndringar i permal\u00e4nkar eller slutpunkter m\u00e5ste vi g\u00f6ra detta.<\/p>\n
L\u00e4gga till en anpassad flik<\/h3>\n
N\u00e4sta steg \u00e4r att l\u00e4gga till en flik p\u00e5 sidan "Mitt konto". Vi g\u00f6r detta med filtret woocommerce_account_menu_items<\/code>. Arrayen som tillhandah\u00e5lls av filtret inneh\u00e5ller alla tabbtangenter och deras motsvarande etikett.<\/p>\n
Du kan helt enkelt l\u00e4gga till din flik i slutet av arrayen, men om du vill ha mer kontroll \u00f6ver var din flik ska visas m\u00e5ste du manipulera arrayen med PHP-funktioner. I exemplet ovan vill jag ha det i slutet, men f\u00f6re fliken "Logga ut". S\u00e5 jag tar ut fliken "Logga ut", s\u00e4tter in min flik och l\u00e4gger sedan tillbaka fliken "Logga ut" efter.<\/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
Om du uppdaterar din Mitt konto-sida nu, b\u00f6r du se din flik f\u00f6re "Logga ut". Genom att klicka p\u00e5 den kommer du till URL:en " <example.com>\/my-account\/license-keys\/<\/code>". Du kommer dock inte att se n\u00e5gon f\u00f6r\u00e4ndring n\u00e4r du klickar p\u00e5 fliken. Det beror p\u00e5 att vi inte har definierat vad som ska matas ut. Det \u00e4r v\u00e5rt n\u00e4sta steg.<\/p>\n
Rendering av inneh\u00e5llet p\u00e5 den anpassade fliken<\/h3>\n
WooCommerce erbjuder kroken woocommerce_account_<endpoint key>_endpoint<\/code>f\u00f6r att mata ut inneh\u00e5ll i "Mitt konto", d\u00e4r du ers\u00e4tter med din anpassade slutpunktsnyckel. I v\u00e5rt exempel skulle den korrekta kroken vara 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
N\u00e4r det g\u00e4ller den faktiska produktionen av fliken \u00e4r detta helt upp till dig. Du kan g\u00f6ra en fr\u00e5ga, h\u00e4mta lite information och sedan mata ut den. Det rekommenderas dock att anv\u00e4nda mallar f\u00f6r utmatning av HTML ist\u00e4llet f\u00f6r att mata ut hela HTML-utdata direkt i v\u00e5r funktion. WooCommerce erbjuder fantastisk funktionalitet f\u00f6r mallar, s\u00e5 det kommer vi att anv\u00e4nda.<\/p>\n
Genom att anv\u00e4nda wc_get_template()<\/code>kan vi tillhandah\u00e5lla en anpassad mall (det beh\u00f6ver inte vara en av WooCommerces mallar). Som andra argument kan vi definiera variabler som kommer att skickas till mallfilen. Efter WooCommerces etablerade struktur skapar vi en anpassad WooCommerce-mall som vi call license-keys.php<\/code>i <theme>\/woocommerce\/myaccount\/<\/code>mappen.<\/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
Forts\u00e4tt och skapa en tom fil <theme>\/woocommerce\/myaccount\/license-keys.php<\/code>. Inuti det \u00e4r h\u00e4r du definierar utdata fr\u00e5n din anpassade flik. Vi har ocks\u00e5 tillg\u00e5ng till alla variabler vi skickade i arrayen till wc_get_template()<\/code>. S\u00e5 i v\u00e5rt fall $licenses<\/code>kommer variabeln att vara tillg\u00e4nglig och fylld med informationen vi f\u00f6rmedlade fr\u00e5n v\u00e5r slutpunktsfunktion. Du kan skicka vidare s\u00e5 m\u00e5nga variabler som du beh\u00f6ver.<\/p>\n
L\u00e4gga till en slutpunkt och en anpassad knapp f\u00f6r varje best\u00e4llning p\u00e5 sidan "Mitt konto".<\/h2>\n
L\u00e5t oss forts\u00e4tta med samma exempel ovan; f\u00f6rutsatt att din webbshop s\u00e4ljer mjukvara och du beh\u00f6ver visa kundens licensnycklar n\u00e5gonstans. Men ist\u00e4llet f\u00f6r att l\u00e4gga till en anpassad flik f\u00f6r att visa dem alla, kanske du hellre vill visa licensnycklar kopplade till en specifik best\u00e4llning? Vi kan l\u00e4gga till en anpassad knapp bredvid "Visa" i best\u00e4llnings\u00f6versikten i Mitt konto:<\/p>\n
\"Hur<\/a><\/p>\n
L\u00e5t oss b\u00f6rja med att g\u00f6ra samma sak som vi gjorde ovan: registrera en anpassad slutpunkt:<\/p>\n
Registrera en anpassad slutpunkt<\/h3>\n
add_action('init', function() {\n    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);\n});<\/code><\/pre>\n
Gl\u00f6m inte att spola permal\u00e4nkar (g\u00e5 till Inst\u00e4llningar > Permal\u00e4nkar och tryck p\u00e5 Spara-knappen)!<\/p>\n
L\u00e4gg till en anpassad \u00e5tg\u00e4rd (och en knapp)<\/h3>\n
N\u00e4sta steg \u00e4r att l\u00e4gga till knappen med hj\u00e4lp av filtret woocommerce_my_account_my_orders_actions<\/code>. Som andra argument till detta filter f\u00e5r du orderobjektet. Det \u00e4r v\u00e4ldigt anv\u00e4ndbart; vi vill kontrollera att best\u00e4llningen \u00e4r genomf\u00f6rd och betald, s\u00e5 att vi inte visar licensnycklar f\u00f6r obetalda eller annullerade best\u00e4llningar. Med best\u00e4llningsobjektet f\u00e5r vi \u00e4ven tag p\u00e5 det best\u00e4llnings-ID som troligen \u00e4r n\u00f6dv\u00e4ndigt f\u00f6r att s\u00f6ka licensnycklar f\u00f6r produkter i den ordningen. I koden nedan kontrollerar jag helt enkelt om orderstatus \u00e4r klar eller inte. Du m\u00e5ste f\u00f6rmodligen l\u00e4gga till din egen kod f\u00f6r att kontrollera om det finns n\u00e5gra licensnycklar att visa per best\u00e4llning.<\/p>\n
F\u00f6r att l\u00e4gga till en anpassad \u00e5tg\u00e4rd m\u00e5ste vi tillhandah\u00e5lla en unik nyckel och en array med sj\u00e4lvf\u00f6rklarande v\u00e4rden f\u00f6r ’ url<\/code>’ och ’ name<\/code>’. N\u00e4r det g\u00e4ller URL anv\u00e4nder vi WordPress funktion f\u00f6r att returnera slutpunkts-URL: wc_get_endpoint_url()<\/code>. Eftersom vi ocks\u00e5 m\u00e5ste skicka order-ID, st\u00e4ller vi in \u200b\u200border-ID som andra argument f\u00f6r denna funktion, vilket resulterar i f\u00f6ljande 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
Detta b\u00f6r l\u00e4gga till en ny knapp f\u00f6r varje slutf\u00f6rd best\u00e4llning:<\/p>\n
\"Hur<\/a><\/p>\n
Nu beh\u00f6ver vi bara mallen att visa f\u00f6r slutpunkten license-keys<\/code>.<\/p>\n
\u00c5terger slutpunkten<\/h3>\n
S\u00e4ttet som endpoints fungerar i WordPress \u00e4r att det som kommer efter endpointen \u00e4r v\u00e4rdet p\u00e5 den fr\u00e5gevariabeln; eller med andra ord; n\u00e4r vi bes\u00f6ker till exempel webbadressen <example.com>\/my-account\/license-keys\/204\/<\/code>kan vi anv\u00e4nda get_query_var('license-keys')<\/code>f\u00f6r att f\u00e5 order-ID; 204.<\/p>\n
F\u00f6r att mata ut inneh\u00e5ll f\u00f6r v\u00e5r anpassade slutpunkt kopplar vi till woocommerce_account_<endpoint key>_endpoint<\/code>vilket i v\u00e5rt fall skulle vara woocommerce_account_license-keys_endpoint<\/code>. Inuti den funktionen kan vi anv\u00e4nda get_query_var()<\/code>f\u00f6r att f\u00e5 order-ID, och med den fr\u00e5gan best\u00e4llningen f\u00f6r eventuella licensnycklar.<\/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
Den faktiska HTML-utdata fr\u00e5n din anpassade mall " myaccount\/license-keys.php<\/code>" beror helt p\u00e5 dina behov. F\u00f6rmodligen skulle du ha anv\u00e4nt order-ID f\u00f6r att samla licensnycklarna i n\u00e5gon array och skicka det vidare till mallen f\u00f6r en snygg utdata. I koden ovan skickar jag ocks\u00e5 order-ID s\u00e5 att detta \u00e4r tillg\u00e4ngligt som $order_id<\/code>i mallen (t.ex. f\u00f6r att mata ut en fin titel "Licensnycklar f\u00f6r order #204").<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Det h\u00e4r inl\u00e4gget kommer att f\u00f6rklara hur man l\u00e4gger till anpassade slutpunkter till WooCommerces ”Mitt konto”; antingen som en egen flik, eller som en knapp till varje best\u00e4llning p\u00e5 fliken ”Best\u00e4llningar”.<\/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":[848,1110,818,818,848,858,858,868,868],"tags":[1173],"class_list":{"0":"post-233584","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-handledningar","8":"category-n-a","9":"category-plugins-3","12":"category-woocommerce-9","14":"category-wordpress-9","16":"tag-affiai-sv"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233584"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223696"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}