Hur man lägger till anpassade slutpunkter på sidan Mitt konto i WooCommerce

Det här inlägget kommer att gå igenom hur man lägger till anpassade slutpunkter på WooCommerces "Mitt konto"-sida. Vi kan göra det tillgängligt på två sätt; antingen som en egen anpassad flik eller som en knapp för varje beställning på fliken "Beställningar".

WooCommerces "Mitt konto"-sida använder WordPress inbyggda funktionalitet för endpoints vilket gör det enkelt att justera eller lägga till dina egna endpoints. Om du inte är bekant med endpoints rekommenderar jag att du läser mitt inlägg som går in i detalj om hur man lägger till anpassade endpoints i WordPress.

Hur du gör din anpassade slutpunkt tillgänglig för användaren från "Mitt konto" beror helt på din webshops behov. Om du bara vill ha en allmän sida för ytterligare information kan du lägga till den här sidan som en egen flik. Om du däremot vill att din ändpunkt ska vara relaterad till varje beställning, måste du lägga till din ändpunkt på varje beställningsrad på fliken "Beställningar". I det här inlägget ska vi titta på båda metoderna.

Lägga till en anpassad flik och slutpunkt i "Mitt konto"

Låt oss till exempel anta att vår webbshop säljer mjukvara och att vi behöver en plats för att visa våra kunders licensnycklar på deras "Mitt konto"-sida. Vi lägger till en anpassad flik "Licensnycklar" som ska mata ut alla giltiga licensnycklar som registrerats för den användaren.

Lägga till en anpassad slutpunkt

I vårt tema functions.phpeller plugin-kod lägger vi först till vår anpassade slutpunkt med hjälp av add_rewrite_endpoint(). Som första argument för detta tillhandahåller vi en unik nyckel. I exemplet nedan har jag kallat slutpunkten för ‘ license-keys‘.

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

Tänk på att WordPress automatiskt lägger till vår nyckel till frågevarianter när du använder add_rewrite_endpoint(), så det finns ingen anledning att filtrera query_vars.

Om du stöter på "404 not found"-fel måste du uppdatera dina permalänkar. Du gör detta genom att gå till Inställningar > Permalänkar och klicka bara på Spara. När vi gör några ändringar i permalänkar eller slutpunkter måste vi göra detta.

Lägga till en anpassad flik

Nästa steg är att lägga till en flik på sidan "Mitt konto". Vi gör detta med filtret woocommerce_account_menu_items. Arrayen som tillhandahålls av filtret innehåller alla tabbtangenter och deras motsvarande etikett.

Du kan helt enkelt lägga till din flik i slutet av arrayen, men om du vill ha mer kontroll över var din flik ska visas måste du manipulera arrayen med PHP-funktioner. I exemplet ovan vill jag ha det i slutet, men före fliken "Logga ut". Så jag tar ut fliken "Logga ut", sätter in min flik och lägger sedan tillbaka fliken "Logga ut" efter.

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;
});

Om du uppdaterar din Mitt konto-sida nu, bör du se din flik före "Logga ut". Genom att klicka på den kommer du till URL:en " <example.com>/my-account/license-keys/". Du kommer dock inte att se någon förändring när du klickar på fliken. Det beror på att vi inte har definierat vad som ska matas ut. Det är vårt nästa steg.

Rendering av innehållet på den anpassade fliken

WooCommerce erbjuder kroken woocommerce_account_<endpoint key>_endpointför att mata ut innehåll i "Mitt konto", där du ersätter med din anpassade slutpunktsnyckel. I vårt exempel skulle den korrekta kroken vara woocommerce_account_license-keys_endpoint.

add_action('woocommerce_account_license-keys_endpoint', function() {
    _e('Your license keys', 'txtdomain');
});

När det gäller den faktiska produktionen av fliken är detta helt upp till dig. Du kan göra en fråga, hämta lite information och sedan mata ut den. Det rekommenderas dock att använda mallar för utmatning av HTML istället för att mata ut hela HTML-utdata direkt i vår funktion. WooCommerce erbjuder fantastisk funktionalitet för mallar, så det kommer vi att använda.

Genom att använda wc_get_template()kan vi tillhandahålla en anpassad mall (det behöver 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.phpi <theme>/woocommerce/myaccount/mappen.

Fortsätt och skapa en tom fil <theme>/woocommerce/myaccount/license-keys.php. Inuti det är här du definierar utdata från din anpassade flik. Vi har också tillgång till alla variabler vi skickade i arrayen till wc_get_template(). Så i vårt fall $licenseskommer variabeln att vara tillgänglig och fylld med informationen vi förmedlade från vår slutpunktsfunktion. Du kan skicka vidare så många variabler som du behöver.

Lägga till en slutpunkt och en anpassad knapp för varje beställning på sidan "Mitt konto".

Låt oss fortsätta med samma exempel ovan; förutsatt att din webbshop säljer mjukvara och du behöver visa kundens licensnycklar någonstans. Men istället för att lägga till en anpassad flik för att visa dem alla, kanske du hellre vill visa licensnycklar kopplade till en specifik beställning? Vi kan lägga till en anpassad knapp bredvid "Visa" i beställningsöversikten i Mitt konto:

Låt oss börja med att göra samma sak som vi gjorde ovan: registrera en anpassad slutpunkt:

Registrera en anpassad slutpunkt

add_action('init', function() {
    add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});

Glöm inte att spola permalänkar (gå till Inställningar > Permalänkar och tryck på Spara-knappen)!

Lägg till en anpassad åtgärd (och en knapp)

Nästa steg är att lägga till knappen med hjälp av filtret woocommerce_my_account_my_orders_actions. Som andra argument till detta filter får du orderobjektet. Det är väldigt användbart; vi vill kontrollera att beställningen är genomförd och betald, så att vi inte visar licensnycklar för obetalda eller annullerade beställningar. Med beställningsobjektet får vi även tag på det beställnings-ID som troligen är nödvändigt för att söka licensnycklar för produkter i den ordningen. I koden nedan kontrollerar jag helt enkelt om orderstatus är klar eller inte. Du måste förmodligen lägga till din egen kod för att kontrollera om det finns några licensnycklar att visa per beställning.

För att lägga till en anpassad åtgärd måste vi tillhandahålla en unik nyckel och en array med självförklarande värden för ‘ url‘ och ‘ name‘. När det gäller URL använder vi WordPress funktion för att returnera slutpunkts-URL: wc_get_endpoint_url(). Eftersom vi också måste skicka order-ID, ställer vi in ​​order-ID som andra argument för denna funktion, vilket resulterar i följande URL: <example.com>/my-account/license-keys/<order ID>/.

Detta bör lägga till en ny knapp för varje slutförd beställning:

Nu behöver vi bara mallen att visa för slutpunkten license-keys.

Återger slutpunkten

Sättet som endpoints fungerar i WordPress är att det som kommer efter endpointen är värdet på den frågevariabeln; eller med andra ord; när vi besöker till exempel webbadressen <example.com>/my-account/license-keys/204/kan vi använda get_query_var('license-keys')för att få order-ID; 204.

För att mata ut innehåll för vår anpassade slutpunkt kopplar vi till woocommerce_account_<endpoint key>_endpointvilket i vårt fall skulle vara woocommerce_account_license-keys_endpoint. Inuti den funktionen kan vi använda get_query_var()för att få order-ID, och med den frågan beställningen för eventuella licensnycklar.

Den faktiska HTML-utdata från din anpassade mall " myaccount/license-keys.php" beror helt på dina behov. Förmodligen skulle du ha använt order-ID för att samla licensnycklarna i någon array och skicka det vidare till mallen för en snygg utdata. I koden ovan skickar jag också order-ID så att detta är tillgängligt som $order_idi mallen (t.ex. för att mata ut en fin titel "Licensnycklar för order #204").