Share
WooCommerce è discutibilmente il il modo più popolare per vendere prodotti usando WordPress. Con WordPress che alimenta circa il 25% di Internet e WooCommerce che alimenta circa il 39% di tutti i negozi online, è una scommessa sicura utilizzare i due in combinazione tra loro se stai cercando di commercializzare i prodotti ai clienti.
Ma, come con qualsiasi software, ci sono momenti in cui noi oi nostri clienti spesso vogliamo estendere il set di funzionalità oltre a quello che viene offerto fuori dalla scatola.
Caso in questione: con WooCommerce, diciamo che hai un prodotto semplice che vuoi vendere ma vuoi includere un po 'più di informazioni sul prodotto da mostrare sul front-end.
Usando un paio di ganci forniti da WooCommerce e funzionalità personalizzate che scriveremo, daremo un'occhiata a come possiamo fare esattamente questo.
Prima di iniziare, suppongo che tu abbia la seguente configurazione (o qualcosa di simile) sulla tua macchina:
Per il resto del tutorial, presumo che tutto questo sia installato, attivato e in esecuzione.
Se scarichi WooCommerce appositamente per questo tutorial, non devi preoccuparti di cose come le pagine di checkout, i termini e le condizioni, o qualcosa del genere. In effetti, ci concentreremo solo sulla meta box del prodotto semplice nel resto di questo tutorial.
Quando si tratta di lavorare con WordPress, la nozione di campi personalizzati di solito porta con sé una definizione diversa:
WordPress ha la capacità di consentire agli autori dei post di assegnare campi personalizzati a un post. Questa informazione extra arbitraria è conosciuta come meta-dati.
Per i non sviluppatori, questo tipo di informazioni può essere un po 'più complesso e non necessario. Ma se sei abituato a lavorare con esso, allora è importante notare che quando mi riferisco ai campi personalizzati in questo tutorial, sto parlando di qualcosa di completamente diverso.
Invece, sto parlando di un vero campo di testo che introdurremo nel Prodotto collegato scheda del Prodotto semplice genere.
Ma ci arriveremo più avanti nel tutorial. Per ora, iniziamo.
Proprio come WordPress, WooCommerce fornisce un'API che ci consente di collegare parte del suo ciclo di vita della pagina. Quindi, anche se potresti aver già lavorato con l'API dei metadati di WordPress, farlo con WooCommerce è diverso.
Ci sono due ganci che è importante sapere:
Come con tutti gli hook in WordPress, questi richiedono che definiamo questi hook e quindi definiamo le loro funzionalità personalizzate. Sebbene tu possa farlo usando la programmazione procedurale, questo tutorial implementerà la funzionalità usando la programmazione orientata agli oggetti.
Innanzitutto, definiremo una classe che avrà una variabile since come dati di istanza. Questa variabile rappresenterà l'ID del campo di input che apparirà nell'interfaccia utente:
Successivamente, inizializzeremo questa variabile di istanza nel costruttore della classe:
textfield_id = 'tutsplus_text_field';A questo punto, siamo pronti per iniziare a utilizzare i ganci elencati sopra. Per fare questo, aggiungeremo una funzione di inizializzazione che registrerà due funzioni personalizzate con l'hook.
Nelle due sezioni seguenti, vedremo esattamente come implementare la funzionalità personalizzata.
1. Aggiunta di un campo di immissione del testo
Per prima cosa, vorremmo aggiungere una funzione che è agganciata a
woocommerce_product_options_grouping. Nella funzione init che abbiamo definito nella sezione precedente, faremo esattamente questo.textfield_id = 'tutsplus_text_field'; public function init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping')); public function product_options_grouping ()Si noti che ho chiamato la funzione
product_options_grouping. Trovo che fare questo rende il codice un po 'più facile da leggere. Anche se la funzione, da sola, potrebbe non essere molto descrittiva di ciò che fa la funzione, si riferisce al rispettivo hook.Successivamente, dobbiamo implementare la funzione. Per fare questo, avremo bisogno di alcune informazioni:
Tutte le informazioni di cui sopra saranno impostate in un array associativo e saranno quindi passate a woocommerce_wp_text_input. Questa è una funzione API WooCommerce progettata per generare un elemento di testo con gli argomenti sopra.
Accentsconagua
textfield_id = 'tutsplus_text_field'; public function init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping')); public function product_options_grouping () $ description = sanitize_text_field ('Immettere una descrizione che verrà visualizzata per coloro che stanno visualizzando il prodotto.'); $ placeholder = sanitize_text_field ('Tease your product with a short description.'); $ args = array ('id' => $ this-> textfield_id, 'label' => sanitize_text_field ('Product Teaser'), 'placeholder' => 'Tease your product with a short description', 'desc_tip' => true , 'description' => $ description,); woocommerce_wp_text_input ($ args); A questo punto, abbiamo fatto la prima parte del plugin. Dobbiamo ancora scrivere il codice che mette tutto in moto, e dobbiamo ancora scrivere il codice che salva le informazioni nel database, quindi prendiamocene cura ora.
Quindi, aggiungi le seguenti righe di codice nel file dentro metodo:
Successivamente, assicurati di aggiungere il
add_custom_linked_field_savefunzione.textfield_id]) || wp_verify_nonce (sanitize_key ($ _POST ['woocommerce_meta_nonce']), 'woocommerce_save_data'))) return false; $ product_teaser = sanitize_text_field (wp_unslash ($ _POST [$ this-> textfield_id])); update_post_meta ($ post_id, $ this-> textfield_id, esc_attr ($ product_teaser));Parlerò un po 'dell'implementazione della funzione nella prossima sezione.
Sanificazione dei dati
Nota nella funzione sopra, ci sono tre cose che accadono:
- Controlliamo per accertarci che siano presenti diversi valori nonce. Se no, allora torniamo
falso. Questa è una precauzione di sicurezza standard. I valori nonce vengono rilevati guardando in modo specifico a ciò che WooCommerce fornisce nel codice sorgente.- Disinfetta i dati nel
$ _POSTraccolta corrispondente all'input dell'utente.- Salva le informazioni nella tabella dei metadati del post.
Nota che in realtà non facciamo nulla per rendere le informazioni sul front-end e quindi non ci sono chiamate
get_post_meta. Questo è, tuttavia, il modo in cui renderemo le informazioni sul front-end.3. Visualizzazione del teaser sul front-end
Per rendere le informazioni sul front-end, avremo bisogno di una classe che faccia lo stesso lavoro che abbiamo già fatto. In particolare, avremo bisogno di:
L'impostazione di questo non è in realtà così difficile poiché abbiamo già fatto questo, quindi ho intenzione di passare la classe nella sua interezza di seguito; tuttavia, avrò alcuni commenti da fare sul modo in cui stiamo andando a impostare questa classe dopo il salto:
textfield_id = 'tutsplus_text_field'; public function init () add_action ('woocommerce_product_thumbnails', array ($ this, 'product_thumbnails')); public function product_thumbnails () $ teaser = get_post_meta (get_the_ID (), $ this-> textfield_id, true); if (vuoto ($ teaser)) return; echo esc_html ($ teaser); Il risultato finale dovrebbe essere qualcosa del genere:
A questo punto, abbiamo un codice ridondante. Nello specifico, il pubblico e le classi amministrative usano entrambi textfield_ID e installarlo nel loro costruttore. Questo è un odore di codice in quanto viola l'intero principio ASCIUTTO della programmazione orientata agli oggetti.
Ci sono diversi modi in cui possiamo attenuare questo, come il passaggio del valore nei costruttori quando le classi vengono istanziate, usando un modello di progettazione semplice per orchestrare le informazioni tra le due classi, e così via.
Nel file che accompagna questo tutorial, che può essere scaricato utilizzando il link nella barra laterale, vedrai effettivamente come ho passato il valore nel costruttore per renderlo un po 'più facile da gestire.
In secondo luogo, nota che sto usando il woocommerce_product_thumbnails gancio per aiutare a rendere l'informazione. Ci sono un certo numero di ganci resi disponibili da WooCommerce, e ho scelto semplicemente questo dai ganci disponibili per renderlo. Puoi sentirti libero di esaminare la documentazione per determinare quale gancio funziona meglio per le tue esigenze.
Infine, l'ultima cosa che dobbiamo fare è impostare un file bootstrap che avvii il plugin. Lo abbiamo fatto in un certo numero di miei tutorial precedenti, quindi non ho intenzione di passare troppo tempo a fare il punto.
Ecco il codice per come lo sto suddividendo:
dentro(); else $ plugin = new TutsPlus_Custom_WooCommerce_Display ('tutsplus_text_field'); $ Plugin-> init (); Si noti che includo le dipendenze e quindi, una volta che la funzione si attiva, controllo se il dashboard è visualizzato o meno. Se è così, allora viene caricata la parte corretta del plugin; in caso contrario, viene caricato il display standard, che è possibile visualizzare sulla pagina del prodotto.
A questo punto, abbiamo coperto tutto ciò che abbiamo deciso di fare nell'introduzione del tutorial:
Non dimenticare di scaricare la demo finale di lavoro dalla barra laterale di questa pagina. È il grande pulsante blu nella barra laterale. Inoltre, se sei interessato a WooCommerce, non dimenticare di dare un'occhiata ad alcuni dei nostri altri tutorial o ad alcuni degli articoli che abbiamo nel nostro marketplace.
Come al solito, se stai cercando altro materiale relativo a WordPress, puoi trovare tutti i miei tutorial precedenti sulla mia pagina del profilo e puoi seguirmi sul mio blog o su Twitter.
Non dimenticare di lasciare domande o commenti nel feed qui sotto!
