So fügen Sie benutzerdefinierte Endpunkte zur Seite „Mein Konto“ in WooCommerce hinzu

In diesem Beitrag wird erläutert, wie benutzerdefinierte Endpunkte zur Seite „Mein Konto” von WooCommerce hinzugefügt werden. Wir können sie auf zwei Arten zugänglich machen: entweder als eigene benutzerdefinierte Registerkarte oder als Schaltfläche für jede Bestellung auf der Registerkarte „Bestellungen”.

Die Seite „Mein Konto” von WooCommerce verwendet die integrierte Funktionalität von WordPress für Endpunkte, die es einfach macht, Ihre eigenen Endpunkte anzupassen oder hinzuzufügen. Wenn Sie mit Endpunkten nicht vertraut sind, empfehle ich Ihnen, meinen Beitrag zu lesen, der ausführlich erklärt, wie Sie benutzerdefinierte Endpunkte in WordPress hinzufügen.

Wie Sie Ihren benutzerdefinierten Endpunkt für den Benutzer über „Mein Konto” zugänglich machen, hängt ganz von den Anforderungen Ihres Webshops ab. Wenn Sie einfach eine allgemeine Seite für zusätzliche Informationen wünschen, können Sie diese Seite als eigenen Tab hinzufügen. Wenn Sie jedoch möchten, dass Ihr Endpunkt mit jeder Bestellung verknüpft ist, müssen Sie Ihren Endpunkt jeder Bestellungszeile auf der Registerkarte „Bestellungen” hinzufügen. In diesem Beitrag werden wir uns beide Methoden ansehen.

Hinzufügen einer benutzerdefinierten Registerkarte und eines Endpunkts zu „Mein Konto”

Nehmen wir beispielsweise an, unser Webshop verkauft Software und wir brauchen einen Ort, an dem die Lizenzschlüssel unserer Kunden auf der Seite „Mein Konto” angezeigt werden können. Wir werden eine benutzerdefinierte Registerkarte „Lizenzschlüssel” hinzufügen, die alle gültigen Lizenzschlüssel ausgeben sollte, die für diesen Benutzer registriert sind.

Hinzufügen eines benutzerdefinierten Endpunkts

In unserem Design- functions.phpoder Plugin-Code fügen wir zuerst unseren benutzerdefinierten Endpunkt mit hinzu add_rewrite_endpoint(). Als erstes Argument dafür liefern wir einen eindeutigen Schlüssel. Im Beispiel unten habe ich den Endpunkt „ license-keys” genannt.

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

Denken Sie daran, dass WordPress bei der Verwendung automatisch unseren Schlüssel zu Abfrage-Variablen hinzufügt add_rewrite_endpoint(), sodass Sie nicht filtern müssen query_vars.

Wenn Sie auf „404 nicht gefunden”-Fehler stoßen, müssen Sie Ihre Permalinks aktualisieren. Gehen Sie dazu zu Einstellungen > Permalinks und klicken Sie einfach auf Speichern. Wann immer wir Änderungen an Permalinks oder Endpunkten vornehmen, müssen wir dies tun.

Hinzufügen einer benutzerdefinierten Registerkarte

Der nächste Schritt ist das Hinzufügen einer Registerkarte zu den Registerkarten der Seite „Mein Konto”. Das machen wir mit dem Filter woocommerce_account_menu_items. Das vom Filter bereitgestellte Array enthält alle Tabulatortasten und ihre entsprechende Bezeichnung.

Sie könnten Ihren Tab einfach am Ende des Arrays anhängen, aber wenn Sie mehr Kontrolle darüber haben möchten, wo Ihr Tab erscheinen soll, müssen Sie das Array mit PHP-Funktionen manipulieren. Im obigen Beispiel möchte ich es am Ende, aber vor dem Reiter „Abmelden”. Also nehme ich die Registerkarte „Abmelden”, füge meine Registerkarte ein und lege die Registerkarte „Abmelden” danach wieder zurück.

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

Wenn Sie Ihre Seite „Mein Konto” jetzt aktualisieren, sollte Ihre Registerkarte vor „Abmelden” erscheinen. Ein Klick darauf bringt Sie zur URL „ <example.com>/my-account/license-keys/“. Sie werden jedoch keine Änderung sehen, wenn Sie auf die Registerkarte klicken. Das liegt daran, dass wir nicht definiert haben, was ausgegeben werden soll. Das ist unser nächster Schritt.

Rendern des Inhalts der benutzerdefinierten Registerkarte

WooCommerce bietet den Haken woocommerce_account_<endpoint key>_endpointfür die Ausgabe von Inhalten in „Mein Konto”, wo Sie ihn durch Ihren benutzerdefinierten Endpunktschlüssel ersetzen. In unserem Beispiel wäre der richtige Haken woocommerce_account_license-keys_endpoint.

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

Was die tatsächliche Ausgabe der Registerkarte betrifft, so liegt dies ganz bei Ihnen. Sie können eine Abfrage durchführen, einige Informationen abrufen und diese dann ausgeben. Es wird jedoch empfohlen, Vorlagen für die Ausgabe von HTML zu verwenden, anstatt die vollständige HTML-Ausgabe direkt in unserer Funktion auszugeben. WooCommerce bietet großartige Funktionen für Vorlagen, also werden wir das verwenden.

Durch die Verwendung wc_get_template()können wir eine benutzerdefinierte Vorlage bereitstellen (es muss keine der WooCommerce-Vorlagen sein). Als zweites Argument können wir Variablen definieren, die an die Vorlagendatei übergeben werden. Wir folgen der etablierten Struktur von WooCommerce und erstellen eine benutzerdefinierte WooCommerce-Vorlage, die wir call license-keys.phpin einem <theme>/woocommerce/myaccount/Ordner haben.

Fahren Sie fort und erstellen Sie eine leere Datei <theme>/woocommerce/myaccount/license-keys.php. Darin definieren Sie die Ausgabe Ihrer benutzerdefinierten Registerkarte. Wir haben auch Zugriff auf alle Variablen, die wir im Array an übergeben haben wc_get_template(). In unserem Fall ist die $licensesVariable also verfügbar und wird mit den Informationen gefüllt, die wir von unserer Endpunktfunktion weitergegeben haben. Sie können beliebig viele Variablen übergeben.

Hinzufügen eines Endpunkts und einer benutzerdefinierten Schaltfläche zu jeder Bestellung auf der Seite „Mein Konto”.

Fahren wir mit dem gleichen Beispiel oben fort; Angenommen, Ihr Webshop verkauft Software und Sie müssen die Lizenzschlüssel des Kunden irgendwo vorzeigen. Aber anstatt eine benutzerdefinierte Registerkarte hinzuzufügen, um sie alle anzuzeigen, möchten Sie vielleicht lieber Lizenzschlüssel anzeigen, die mit einer bestimmten Bestellung verbunden sind? Wir könnten eine benutzerdefinierte Schaltfläche neben „Anzeigen” in der Bestellübersicht in „Mein Konto” hinzufügen:

Beginnen wir damit, dasselbe wie oben zu tun: Registrieren eines benutzerdefinierten Endpunkts:

Registrieren Sie einen benutzerdefinierten Endpunkt

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

Vergessen Sie nicht, Permalinks zu leeren (gehen Sie zu Einstellungen > Permalinks und klicken Sie auf die Schaltfläche Speichern)!

Hinzufügen einer benutzerdefinierten Aktion (und einer Schaltfläche)

Der nächste Schritt ist das Hinzufügen der Schaltfläche mithilfe des Filters woocommerce_my_account_my_orders_actions. Als zweites Argument zu diesem Filter erhalten Sie das Auftragsobjekt. Das ist sehr nützlich; Wir möchten überprüfen, ob die Bestellung abgeschlossen und bezahlt ist, damit wir keine Lizenzschlüssel für unbezahlte oder stornierte Bestellungen anzeigen. Mit dem Bestellobjekt erhalten wir auch die Bestell-ID, die höchstwahrscheinlich für die Abfrage von Lizenzschlüsseln für Produkte in dieser Bestellung erforderlich ist. Im folgenden Code überprüfe ich einfach, ob der Bestellstatus abgeschlossen ist oder nicht. Sie müssen wahrscheinlich Ihren eigenen Code hinzufügen, um zu prüfen, ob es Lizenzschlüssel gibt, die pro Bestellung angezeigt werden müssen.

Um eine benutzerdefinierte Aktion hinzuzufügen, müssen wir einen eindeutigen Schlüssel und ein Array mit selbsterklärenden Werten für „ url” und „ name” bereitstellen. Als URL verwenden wir die WordPress-Funktion zum Zurückgeben der Endpunkt-URL: wc_get_endpoint_url(). Da wir auch die Bestell-ID übergeben müssen, setzen wir die Bestell-ID als zweites Argument für diese Funktion, was zu folgender URL führt: <example.com>/my-account/license-keys/<order ID>/.

Dies sollte für jede abgeschlossene Bestellung eine neue Schaltfläche hinzufügen:

Jetzt brauchen wir nur noch die Vorlage, die für den Endpunkt angezeigt werden soll license-keys.

Rendern des Endpunkts

Die Art und Weise, wie Endpunkte in WordPress funktionieren, ist, dass alles, was nach dem Endpunkt kommt, der Wert dieser Abfragevariablen ist; oder mit anderen Worten; wenn wir zum Beispiel die URL besuchen, die <example.com>/my-account/license-keys/204/wir verwenden können get_query_var('license-keys'), um die Bestell-ID zu erhalten; 204.

Um Inhalte für unseren benutzerdefinierten Endpunkt auszugeben, hängen wir an, woocommerce_account_<endpoint key>_endpointwas in unserem Fall woocommerce_account_license-keys_endpoint. Innerhalb dieser Funktion können wir die get_query_var()Bestell-ID abrufen und damit die Bestellung nach Lizenzschlüsseln abfragen.

Die tatsächliche HTML-Ausgabe Ihrer benutzerdefinierten Vorlage „ myaccount/license-keys.php” hängt ganz von Ihren Anforderungen ab. Vermutlich hätten Sie die Bestell-ID verwendet, um die Lizenzschlüssel in einem Array zu sammeln und diese für eine schöne Ausgabe an die Vorlage weiterzugeben. Im obigen Code übergebe ich auch die Bestell-ID, damit diese $order_idinnerhalb der Vorlage zugänglich ist (z. B. um einen schönen Titel „Lizenzschlüssel für Bestellung Nr. 204″ auszugeben).