Cum se creează un panou de setări personalizate în WooCommerce

WooCommerce este de departe cel mai important plugin de comerț electronic pentru WordPress. La momentul redactării, are peste 3 milioane de instalații active și se pare că se află în spatele a peste 40% din toate magazinele online.

Unul dintre motivele pentru popularitatea lui WooCommerce este extinderea acestuia. La fel ca WordPress, WooCommerce este plin de acțiuni și filtre pe care dezvoltatorii le pot introduce în cazul în care doresc să extindă funcționalitatea prestabilită a WooCommerce.

Un exemplu foarte bun este capacitatea de a crea un panou de date personalizat.

Ce este acoperit în acest tutorial?

Acest tutorial este împărțit în două părți. În prima parte, ne vom uita la:

• adăugând un panou personalizat la WooCommerce
• adăugarea câmpurilor personalizate în panou
• dezinfectarea și salvarea valorilor câmpului personalizat

Apoi, în partea a doua, vom analiza:

• afișarea câmpurilor personalizate pe pagina produsului
• modificarea prețului produsului în funcție de valoarea câmpurilor personalizate
• afișarea valorilor câmpului personalizat în coș și comandă

Ce este un panou de date personalizat WooCommerce?

Atunci când creați un produs nou în WooCommerce, introduceți majoritatea informațiilor critice despre produs, cum ar fi prețul și inventarul, în Date despre produs secțiune.

În captura de ecran de mai sus, puteți vedea că Date despre produs secțiunea este împărțită în panouri: filele din stânga, de ex. General, Inventar, etc, fiecare deschide panouri diferite în vederea principală din dreapta.

În acest tutorial, vom examina crearea unui panou personalizat pentru datele despre produse și adăugarea câtorva câmpuri personalizate. Apoi vom analiza utilizarea acelor câmpuri personalizate în partea frontală și salvarea valorilor acestora la comenzile clienților.

În scenariul nostru de exemplu, vom adăuga un panou "Giftwrap" care conține câteva câmpuri personalizate:

• o casetă de selectare pentru a include o opțiune de împachetare a cadoului pentru produs pe pagina produsului
• o casetă de selectare pentru a activa un câmp de introducere în care un client poate introduce un mesaj pe pagina produsului
• un câmp de introducere pentru a adăuga un preț pentru opțiunea de împachetare a cadourilor; prețul va fi adăugat la prețul produsului din cărucior

În spate, va arăta astfel:

Și la capătul din față, va arăta așa:

Creați un plugin nou

Pentru că extindem funcționalitatea, vom crea un plugin, în loc să adăugăm codul nostru la o temă. Asta inseamna ca utilizatorii nostri vor putea sa pastreze aceasta functionalitate suplimentara, chiar daca schimba tema site-ului. Crearea unui plug-in este în afara scopului pentru acest tutorial, dar dacă aveți nevoie de ajutor, aruncați o privire la acest curs Tuts + Coffee Break pe crearea primului dvs. plugin: 

Pluginul nostru va fi alcătuit din două clase: unul care să se ocupe de chestii în admin și unul care să se ocupe de tot la capătul din față. Structura fișierului plugin-ului nostru va arăta astfel:

Clasa Admin

În primul rând, trebuie să creăm clasa noastră pentru a se ocupa de toate cele din spate. Într-un dosar numit clase, creați un fișier nou numit clasa-tpwcp-admin.php.

Această clasă se va ocupa de următoarele:

• Creați fila personalizată (fila este elementul pe care se poate da clic în partea stângă a secțiunii Date despre produse).
• Adăugați câmpurile personalizate în panoul personalizat (panoul este elementul afișat când faceți clic pe o filă).
• Decideți tipurile de produse în care panoul va fi activat.
• Sanitizează și salvează valorile câmpului personalizat.

Inserați următorul cod în acel fișier nou. Vom trece prin ea pas cu pas după aceea.

 __ ('Giftwrap', 'tpwcp'), // Numele panoului 'target' => 'gifwrap_panel', // Va fi folosit pentru a crea un link anchor, giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Clasă pentru fila panoului dvs. - ajută la ascundere / afișare în funcție de tipul de produs' prioritate '=> 80, // unde va apărea panoul dvs. Implicit, 70 este ultimul element); întoarce $ tabs;  / ** * Afișarea câmpurilor pentru noul panou * @ vezi https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @ din 1.0.0 * / public function display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Include opțiunea de cadou cadou', 'tpwcp'), 'desc_tip' => __ ('Selectați această opțiune pentru a afișa opțiunile de împachetare pentru acest produs', 'tpwcp'))); woocommerce_wp_checkbox ('id' => 'include_custom_message', 'label' => __ ('Includeți mesaj personalizat', 'tpwcp'), 'desc_tip' => __ (Selectați această opțiune pentru a permite clienților să includă un mesaj personalizat ',' tpwcp '))); woocommerce_wp_text_input ('id' => 'giftwrap_cost', 'label' => __ ('Giftwrap cost', 'tpwcp'), 'type' => de împachetare a acestui produs "," tpwcp "))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // Salvați setarea include_giftwrap_option $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'da nu'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // Salvați setarea 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ți fila personalizată

Pentru a crea fila personalizată, intrăm în woocommerce_product_data_tabs filtrați utilizând create_giftwrap_tab funcţie. Aceasta trece prin WooCommerce $ file obiect, pe care apoi îl modificăm folosind următorii parametri:

• eticheta: utilizați aceasta pentru a defini numele fila dvs..
• ţintă: acest lucru este folosit pentru a crea o legătură de ancoră, astfel încât trebuie să fie unic.
  
• clasă: o serie de clase care vor fi aplicate panoului dvs..
• prioritate: definiți unde doriți să apară fila dvs..

Tipuri de produse

În acest stadiu, merită să luăm în considerare tipurile de produse pe care le-am dori ca panoul nostru să fie activat. În mod implicit, există patru tipuri de produse WooCommerce: simple, variabile, grupate și afiliate. Să spunem pentru scenariul nostru de exemplu, dorim doar ca panoul nostru Giftwrap să fie activat pentru tipuri de produse simple și variabile.

Pentru a realiza acest lucru, adăugăm show_if_simple și show_if_variable clase la parametrul de clasă de mai sus. Dacă nu vrem să activați panoul pentru tipuri de produse variabile, am fi omis show_if_variable clasă.

Adăugați câmpuri personalizate

Următorul cârlig pe care îl folosim este woocommerce_product_data_panels. Această acțiune ne permite să obținem marcajul propriu pentru panoul Giftwrap. În clasa noastră, funcția display_giftwrap_fields creează câteva div wrappers, în interiorul căruia folosim câteva funcții WooCommerce pentru a crea câmpuri personalizate. 

Rețineți cum id atribut pentru exterior div, giftwrap_panel, se potrivește cu valoarea pe care am trecut-o în ţintă parametru din fila noastră de cadou de mai sus. Acesta este modul în care WooCommerce va ști să afișeze acest panou când faceți clic pe fila Giftwrap.

Funcțiile câmpului personalizat WooCommerce

În exemplul nostru, cele două funcții pe care le folosim pentru a crea câmpurile noastre sunt:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

Aceste funcții sunt furnizate de WooCommerce în mod special în scopul creării câmpurilor personalizate. Ei iau o serie de argumente, printre care:

• id: acesta este ID-ul domeniului tău. Trebuie să fie unic și vom face referire mai târziu în codul nostru.
• eticheta: aceasta este eticheta așa cum va apărea pentru utilizator.
• desc_tip: acesta este vârful de instrument opțional care apare când utilizatorul se deplasează peste pictograma de marcaj de întrebare de lângă etichetă.

Rețineți, de asemenea, că woocommerce_wp_text_input funcția ia, de asemenea, o tip argument, unde puteți specifica număr pentru un câmp de introducere a unui număr sau text pentru un câmp de introducere a textului. Câmpul nostru va fi folosit pentru a introduce un preț, așa că îl specificăm număr.

Salvați câmpurile personalizate

Partea finală a clasei noastre admin utilizează woocommerce_process_product_meta acțiune pentru salvarea valorilor câmpului personalizat.

Pentru a standardiza și a optimiza modul în care stochează și prelucrează date, WooCommerce 3.0 a adoptat o metodă CRUD (Creare, Citire, Actualizare, Ștergere) pentru setarea și obținerea datelor despre produs. Puteți afla mai multe despre gândirea din spatele acestui lucru în anunțul WooCommerce 3.0.

Având în vedere acest lucru, în loc de cele mai familiare get_post_meta și update_post_meta metode pe care le-am folosit în trecut, folosim acum $ POST_ID pentru a crea un WooCommerce $ produs obiect, apoi aplicați update_meta_data pentru salvarea datelor. De exemplu:

$ product = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'da nu'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ Produs-> Salvare ();

Rețineți, de asemenea, că avem grijă să dezinstalați datele înainte de a le salva în baza de date. Mai multe informații despre dezinfectarea datelor aici: 

Fișier principal de plugin

Când v-ați creat readme.txt fișierul și fișierul principal de plugin tutsplus-woocommerce-panel.php, puteți adăuga acest cod în fișierul principal.

init ();  add_action ("plugins_loaded", "tpwcp_init");

Aceasta va iniția clasa administratorului.

Când vă activați plugin-ul pe un site (împreună cu WooCommerce) și apoi mergeți pentru a crea un produs nou, veți vedea noul dvs. panou Giftwrap disponibil împreună cu câmpurile personalizate. Puteți să actualizați câmpurile și să le salvați ... Dar nu veți vedea nimic încă pe front.

Concluzie

Să recapitulăm ceea ce am analizat până acum în acest articol.

Am analizat un exemplu de scenariu pentru adăugarea unui panou particularizat "Giftwrap" la WooCommerce. Am creat un plugin și am adăugat o clasă pentru a crea panoul. În cadrul clasei, am folosit și funcțiile WooCommerce pentru a adăuga câmpuri personalizate și apoi am dezinfectat și salvat aceste valori ale câmpului.