Come creare un pannello delle impostazioni personalizzate in WooCommerce

WooCommerce è di gran lunga il principale plug-in di e-commerce per WordPress. Al momento della stesura di questo libro, ha oltre 3 milioni di installazioni attive e si trova a circa il 40% di tutti i negozi online.

Uno dei motivi della popolarità di WooCommerce è la sua estensibilità. Come WordPress, WooCommerce è pieno di azioni e filtri a cui gli sviluppatori possono connettersi se vogliono estendere le funzionalità predefinite di WooCommerce.

Un ottimo esempio di ciò è la possibilità di creare un pannello dati personalizzato.

Cosa è coperto in questo tutorial?

Questo tutorial è diviso in due parti. Nella prima parte, vedremo:

• aggiungendo un pannello personalizzato a WooCommerce
• aggiunta di campi personalizzati al pannello
• sanificazione e salvataggio dei valori dei campi personalizzati

Quindi nella seconda parte, vedremo:

• visualizzazione di campi personalizzati nella pagina del prodotto
• modifica del prezzo del prodotto in base al valore dei campi personalizzati
• visualizzazione di valori di campo personalizzati nel carrello e ordine

Cos'è un pannello dati personalizzato di WooCommerce?

Quando crei un nuovo prodotto in WooCommerce, inserisci la maggior parte delle informazioni importanti sul prodotto, come il prezzo e l'inventario, nel Dati del prodotto sezione.

Nello screenshot qui sopra, puoi vedere che il Dati del prodotto la sezione è divisa in pannelli: le schede in basso a sinistra, ad es. Generale, Inventario, ecc., ognuno apre diversi pannelli nella vista principale a destra.

In questo tutorial, esamineremo la creazione di un pannello personalizzato per i dati di prodotto e l'aggiunta di alcuni campi personalizzati. Quindi esamineremo l'utilizzo di questi campi personalizzati sul front-end e il salvataggio dei loro valori negli ordini dei clienti.

Nel nostro scenario di esempio, aggiungeremo un pannello "Giftwrap" che contiene alcuni campi personalizzati:

• una casella di controllo per includere un'opzione giftwrapping per il prodotto sulla pagina del prodotto
• una casella di controllo per abilitare un campo di input in cui un cliente può inserire un messaggio nella pagina del prodotto
• un campo di input per aggiungere un prezzo per l'opzione giftwrapping; il prezzo verrà aggiunto al prezzo del prodotto nel carrello

Nel back-end, assomiglierà a questo:

E sul front end, assomiglierà a qualcosa del genere:

Crea un nuovo plugin

Poiché stiamo estendendo le funzionalità, creeremo un plug-in anziché aggiungere il nostro codice a un tema. Ciò significa che i nostri utenti saranno in grado di mantenere questa funzionalità extra anche se cambiano il tema del loro sito. La creazione di un plugin non rientra nell'ambito di questo tutorial, ma se hai bisogno di aiuto, dai un'occhiata a questo Corso Tuts + Coffee Break per creare il tuo primo plug-in: 

Il nostro plugin sarà composto da due classi: una per gestire le cose nell'amministratore e l'altra per gestire tutto sul front-end. La nostra struttura del file di plugin assomiglierà a questo:

Admin Class

Per prima cosa, dobbiamo creare la nostra classe per gestire tutto sul back-end. In una cartella chiamata classi, crea un nuovo file chiamato class-tpwcp-admin.php.

Questa classe gestirà quanto segue:

• Crea la scheda personalizzata (la scheda è l'elemento selezionabile nella parte sinistra della sezione Dati prodotto).
• Aggiungi i campi personalizzati al pannello personalizzato (il pannello è l'elemento che viene visualizzato quando fai clic su una scheda).
• Decidi i tipi di prodotto in cui il pannello sarà abilitato.
• Disinfetta e salva i valori dei campi personalizzati.

Incolla il seguente codice in quel nuovo file. Lo seguiremo passo dopo passo.

 __ ('Giftwrap', 'tpwcp'), // Il nome del pannello 'target' => 'gifwrap_panel', // Verrà usato per creare un link di ancoraggio quindi deve essere univoco 'class' => array (' giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Class per la scheda del pannello: consente di nascondere / mostrare in base al tipo di prodotto' priority '=> 80, // dove verrà visualizzato il pannello. Per impostazione predefinita, 70 è l'ultimo elemento); return $ tabs;  / ** * Visualizzare i campi per il nuovo pannello * @see https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @sulla 1.0.0 * / public function display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Include giftwrap option', 'tpwcp'), 'desc_tip' => __ ('Seleziona questa opzione per mostrare le opzioni di giftwrapping per questo prodotto', 'tpwcp'))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Includi messaggio personalizzato', 'tpwcp'), 'desc_tip' => __ ('Seleziona questa opzione per consentire ai clienti di includere un messaggio personalizzato ',' tpwcp '))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Costo del costo del regalo', 'tpwcp'), 'tipo' => 'numero', 'desc_tip' => __ ('Inserisci il costo di giftwrapping di questo prodotto ',' tpwcp '))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Salva l'impostazione include_giftwrap_option $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'si No'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Salva l'impostazione di giftwrap_cost $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ product-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ product-> save (); 

Crea la scheda personalizzata

Per creare la scheda personalizzata, ci colleghiamo al woocommerce_product_data_tabs filtra usando il nostro create_giftwrap_tab funzione. Questo passa al WooCommerce $ linguette oggetto in, che poi modifichiamo usando i seguenti parametri:

• etichetta: usa questo per definire il nome della tua scheda.
• bersaglio: questo è usato per creare un collegamento di ancoraggio quindi deve essere unico.
  
• classe: una serie di classi che verranno applicate al tuo pannello.
• priorità: definisci dove vuoi che appaia la tua scheda.

Tipi di prodotto

In questa fase, vale la pena considerare quali tipi di prodotto vorremmo abilitare per il nostro pannello. Per impostazione predefinita, esistono quattro tipi di prodotti WooCommerce: semplici, variabili, raggruppati e affiliati. Diciamo per il nostro scenario di esempio, vogliamo solo che il nostro pannello Giftwrap sia abilitato per tipi di prodotti semplici e variabili.

Per ottenere ciò, aggiungiamo il show_if_simple e show_if_variable classi al parametro di classe sopra. Se non volessimo abilitare il pannello per i tipi di prodotto variabili, dovremmo semplicemente omettere il show_if_variable classe.

Aggiungi campi personalizzati

Il prossimo gancio che usiamo è woocommerce_product_data_panels. Questa azione ci consente di generare il nostro markup per il pannello Giftwrap. Nella nostra classe, la funzione display_giftwrap_fields crea un paio di div wrapper, all'interno del quale utilizziamo alcune funzioni di WooCommerce per creare campi personalizzati. 

Nota come id attributo per il nostro esterno div, giftwrap_panel, corrisponde al valore che abbiamo passato nel bersaglio parametro della nostra scheda regalo sopra. In questo modo WooCommerce saprà di visualizzare questo pannello quando clicchiamo sulla scheda Giftwrap.

WooCommerce Funzioni di campo personalizzate

Nel nostro esempio, le due funzioni che stiamo utilizzando per creare i nostri campi sono:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Queste funzioni sono fornite da WooCommerce appositamente allo scopo di creare campi personalizzati. Prendono una serie di argomenti, tra cui:

• id: questo è l'ID del tuo campo. Deve essere unico, e lo faremo in seguito nel nostro codice.
• etichetta: questa è l'etichetta così come apparirà all'utente.
• desc_tip: questo è il suggerimento opzionale che appare quando l'utente passa sopra l'icona del punto interrogativo accanto all'etichetta.

Nota anche che il woocommerce_wp_text_input la funzione richiede anche a genere argomento, dove è possibile specificare numero per un campo di inserimento numero, o testo per un campo di inserimento del testo. Il nostro campo verrà utilizzato per inserire un prezzo, quindi lo specifichiamo come numero.

Salva i campi personalizzati

La parte finale della nostra classe admin usa il woocommerce_process_product_meta azione per salvare i nostri valori di campo personalizzati.

Al fine di standardizzare e ottimizzare il modo in cui memorizza e recupera i dati, WooCommerce 3.0 ha adottato un metodo CRUD (Creazione, lettura, aggiornamento, eliminazione) per l'impostazione e il recupero dei dati del prodotto. Puoi scoprire di più sulle idee che stanno dietro a questo nell'annuncio di WooCommerce 3.0.

Con questo in mente, invece del più familiare get_post_meta e update_post_meta metodi che potremmo aver usato in passato, ora usiamo il $ post_id per creare un WooCommerce $ prodotto oggetto e quindi applicare il update_meta_data metodo per salvare i dati. Per esempio:

$ product = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'si No'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ Prodotto-> save ();

Si prega di notare anche che stiamo attenti a disinfettare i nostri dati prima di salvarli nel database. Ci sono ulteriori informazioni sull'igienizzazione dei dati qui: 

File plugin principale

Quando hai creato il tuo readme.txt file e il tuo file plugin principale tutsplus-woocommerce-panel.php, puoi aggiungere questo codice al tuo file principale.

dentro();  add_action ('plugins_loaded', 'tpwcp_init');

Questo avvierà la tua classe di amministrazione.

Quando attivi il tuo plug-in su un sito (insieme a WooCommerce) e poi vai a creare un nuovo prodotto, vedrai il tuo nuovo pannello Giftwrap disponibile, insieme ai campi personalizzati. Puoi aggiornare i campi e salvarli ... Ma non vedrai ancora nulla sul front-end.

Conclusione

Ricapitoliamo solo ciò che abbiamo visto finora in questo articolo.

Abbiamo esaminato uno scenario di esempio per l'aggiunta di un pannello personalizzato "Giftwrap" a WooCommerce. Abbiamo creato un plug-in e aggiunto una classe per creare il pannello. All'interno della classe, abbiamo anche utilizzato le funzioni di WooCommerce per aggiungere campi personalizzati, quindi abbiamo disinfettato e salvato quei valori di campo.