Questo post spiega come aggiungere endpoint personalizzati alla pagina "Il mio account" di WooCommerce. Possiamo renderlo accessibile in due modi: come scheda personalizzata o come pulsante per ciascun ordine nella scheda "Ordini".
La pagina "Il mio account" di WooCommerce utilizza la funzionalità integrata di WordPress per gli endpoint che semplifica la regolazione o l’aggiunta dei propri endpoint. Se non hai dimestichezza con gli endpoint, ti consiglio di leggere il mio post che approfondisce come aggiungere endpoint personalizzati in WordPress.
Il modo in cui rendi accessibile il tuo endpoint personalizzato per l’utente da "Il mio account" dipende interamente dalle esigenze del tuo negozio online. Se desideri semplicemente una pagina generale per ulteriori informazioni, puoi aggiungere questa pagina come scheda a sé stante. Se tuttavia desideri che il tuo endpoint sia correlato a ciascun ordine, devi aggiungere il tuo endpoint a ciascuna riga dell’ordine nella scheda "Ordini". In questo post esamineremo entrambi i metodi.
Aggiunta di una scheda personalizzata e di un endpoint a "Il mio account"
Per esempio, supponiamo che il nostro negozio online venda software e abbiamo bisogno di un posto dove mostrare le chiavi di licenza dei nostri clienti nella loro pagina "Il mio account". Aggiungeremo una scheda personalizzata "Chiavi di licenza" che dovrebbe restituire tutte le chiavi di licenza valide registrate per quell’utente.
Aggiunta di un endpoint personalizzato
Nel codice del nostro tema functions.phpo del plugin, aggiungiamo prima il nostro endpoint personalizzato utilizzando add_rewrite_endpoint(). Come primo argomento a questo forniamo una chiave univoca. Nell’esempio seguente ho chiamato l’endpoint ‘ license-keys‘.
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Tieni presente che WordPress aggiunge automaticamente la nostra chiave per interrogare vars durante l’utilizzo add_rewrite_endpoint(), quindi non è necessario filtrare query_vars.
Se riscontri errori "404 non trovato", devi aggiornare i tuoi permalink. Puoi farlo andando su Impostazioni> Permalink e fai semplicemente clic su Salva. Ogni volta che apportiamo modifiche ai permalink o agli endpoint, dobbiamo farlo.
Aggiunta di una scheda personalizzata
Il passaggio successivo consiste nell’aggiungere una scheda alle schede della pagina "Il mio account". Lo facciamo con il filtro woocommerce_account_menu_items. L’array fornito dal filtro contiene tutti i tasti di tabulazione e la relativa etichetta.
Puoi semplicemente aggiungere la tua scheda alla fine dell’array, ma se vuoi un maggiore controllo su dove dovrebbe apparire la tua scheda, devi manipolare l’array usando le funzioni PHP. Nell’esempio sopra lo voglio alla fine, ma prima della scheda "Esci". Quindi estraggo la scheda "Esci", inserisco la mia scheda e quindi rimetto la scheda "Esci" dopo.
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;
});Se aggiorni la pagina Il mio account ora, dovresti vedere la tua scheda apparire prima di "Esci". Cliccandoci sopra si accede all’URL ” <example.com>/my-account/license-keys/“. Tuttavia non vedrai nulla di cambiamento quando fai clic sulla scheda. Questo perché non abbiamo definito cosa produrre. Questo è il nostro prossimo passo.
Rendering del contenuto della scheda personalizzata
WooCommerce offre l’hook woocommerce_account_<endpoint key>_endpointper l’output di contenuti in "Il mio account", dove si sostituisce con la chiave dell’endpoint personalizzata. Nel nostro esempio l’hook corretto sarebbe woocommerce_account_license-keys_endpoint.
add_action('woocommerce_account_license-keys_endpoint', function() {
_e('Your license keys', 'txtdomain');
});Per quanto riguarda l’output effettivo della scheda, dipende interamente da te. Potresti fare una query, recuperare alcune informazioni e quindi emetterle. Tuttavia si consiglia di utilizzare i modelli per l’output dell’HTML invece di produrre l’output HTML completo direttamente all’interno della nostra funzione. WooCommerce offre ottime funzionalità per i modelli, quindi lo useremo.
Utilizzando wc_get_template()possiamo fornire un modello personalizzato (non è necessario che sia uno dei modelli di WooCommerce). Come secondo argomento possiamo definire variabili che verranno passate al file template. Seguendo la struttura stabilita di WooCommerce, creiamo un modello WooCommerce personalizzato che abbiamo call license-keys.phpnella <theme>/woocommerce/myaccount/cartella.
Vai avanti e crea un file vuoto <theme>/woocommerce/myaccount/license-keys.php. All’interno di questo è dove definisci l’output della tua scheda personalizzata. Abbiamo anche accesso a tutte le variabili che abbiamo passato nell’array wc_get_template(). Quindi nel nostro caso la $licensesvariabile sarà disponibile e popolata con le informazioni che abbiamo passato dalla nostra funzione di endpoint. Puoi trasmettere tutte le variabili di cui hai bisogno.
Aggiunta di un endpoint e di un pulsante personalizzato a ciascun ordine nella pagina "Il mio account".
Continuiamo con lo stesso esempio sopra; supponendo che il tuo negozio online venda software e tu debba mostrare le chiavi di licenza del cliente da qualche parte. Ma invece di aggiungere una scheda personalizzata per mostrarli tutti, forse preferisci mostrare le chiavi di licenza collegate a un ordine specifico? Potremmo aggiungere un pulsante personalizzato accanto a "Visualizza" nella panoramica degli ordini in Il mio account:
Iniziamo facendo lo stesso che abbiamo fatto sopra: registrazione di un endpoint personalizzato:
Registra un endpoint personalizzato
add_action('init', function() {
add_rewrite_endpoint('license-keys', EP_ROOT | EP_PAGES);
});Non dimenticare di svuotare i permalink (vai su Impostazioni > Permalink e premi il pulsante Salva)!
Aggiungi un’azione personalizzata (e un pulsante)
Il passaggio successivo consiste nell’aggiungere il pulsante utilizzando il filtro woocommerce_my_account_my_orders_actions. Come secondo argomento di questo filtro ottieni l’oggetto order. Questo è molto utile; vogliamo controllare che l’ordine sia completato e pagato, in modo da non mostrare le chiavi di licenza per ordini non pagati o annullati. Con l’oggetto dell’ordine otteniamo anche l’ID dell’ordine che è molto probabilmente necessario per interrogare le chiavi di licenza per i prodotti in quell’ordine. Nel codice qui sotto controllo semplicemente se lo stato dell’ordine è completato o meno. Probabilmente dovrai aggiungere il tuo codice per verificare se ci sono o meno chiavi di licenza da mostrare per ordine.
Per aggiungere un’azione personalizzata è necessario fornire una chiave univoca e un array con valori autoesplicativi per ‘ url‘ e ‘ name‘. Per quanto riguarda l’URL, utilizziamo la funzione di WordPress per restituire l’URL dell’endpoint: wc_get_endpoint_url(). Poiché abbiamo bisogno di passare anche l’ID dell’ordine, impostiamo l’ID dell’ordine come secondo argomento per questa funzione, che risulta nel seguente URL: <example.com>/my-account/license-keys/<order ID>/.
Questo dovrebbe aggiungere un nuovo pulsante per ogni ordine completato:
Ora tutto ciò di cui abbiamo bisogno è il modello da mostrare per l’endpoint license-keys.
Rendering dell’endpoint
Il modo in cui funzionano gli endpoint in WordPress è che qualunque cosa venga dopo l’endpoint è il valore di quella variabile di query; o in altre parole; quando visitiamo ad esempio l’URL <example.com>/my-account/license-keys/204/che possiamo utilizzare get_query_var('license-keys')per ottenere l’ID dell’ordine; 204.
Per l’output del contenuto per il nostro endpoint personalizzato, ci colleghiamo a woocommerce_account_<endpoint key>_endpointquale nel nostro caso sarebbe woocommerce_account_license-keys_endpoint. All’interno di quella funzione possiamo usare get_query_var()per ottenere l’ID dell’ordine e con quella query l’ordine per eventuali chiavi di licenza.
L’output HTML effettivo del tuo modello personalizzato " myaccount/license-keys.php" dipende interamente dalle tue esigenze. Presumibilmente avresti utilizzato l’ID ordine per raccogliere le chiavi di licenza in un array e passarlo al modello per un buon output. Nel codice sopra sto anche passando l’ID dell’ordine in modo che sia accessibile come $order_idall’interno del modello (ad esempio per l’output di un bel titolo "Chiavi di licenza per l’ordine n. 204").