Adăugarea câmpurilor personalizate la produse simple cu WooCommerce

WooCommerce este, fără îndoială  cel mai popular mod de a vinde produse folosind WordPress. Cu WordPress alimentând aproximativ 25% din Internet și WooCommerce alimentând aproximativ 39% din toate magazinele online, este un pariu sigur de a utiliza cele două în legătură unul cu celălalt, dacă doriți să comercializați bunuri către clienți.

Dar, la fel ca orice software, sunt momente în care noi sau clienții noștri doresc adesea să extindă setul de funcții dincolo de ceea ce este oferit din cutie. 

Cazul în punct: Cu WooCommerce, să presupunem că aveți un produs simplu pe care doriți să-l vindeți, dar doriți să includeți mai multe informații despre produsul care se afișează pe front-end.

Folosind câteva cârlige furnizate de WooCommerce și funcționalitatea personalizată pe care o vom scrie, vom analiza modul în care putem face exact acest lucru.

Instrumente necesare

Înainte de a începe, presupun că aveți următoarea configurație (sau ceva asemănător) pe mașina dvs.:

• Sistemul dvs. de operare ales - voi folosi macOS
• Cel puțin PHP 5.6.25, deși voi folosi PHP 7
• MySQL 5.6.33
• Apache sau Nginx
• WordPress 4.7
• WooCommerce 3.9
• IDE-ul dvs. preferat

Pentru restul tutorialului, presupun că toate acestea sunt instalate, activate și difuzate. 

Dacă descărcați WooCommerce special pentru acest tutorial, nu este nevoie să vă faceți griji cu privire la lucruri cum ar fi paginile de checkout, termenii și condițiile sau ceva de genul asta. De fapt, vom fi concentrat doar asupra meta-boxului Simple Product pe tot parcursul acestui tutorial.

Adăugarea câmpurilor personalizate

Când vine vorba de a lucra cu WordPress, noțiunea de câmpuri personalizate poartă de obicei cu ea o definiție diferită:

WordPress are capacitatea de a permite autorilor posturilor să atribuie câmpuri personalizate unei postări. Această informație suplimentară arbitrară este cunoscută sub numele de meta-date.

Pentru non-dezvoltatori, acest tip de informații poate fi un pic mai complex și inutil. Dar dacă sunteți obișnuit să lucrați cu el, atunci este important să rețineți că atunci când mă refer la câmpurile personalizate din acest tutorial, vorbesc despre ceva complet diferit.

În schimb, vorbesc despre un câmp text real pe care îl vom introduce în Produsul conectat din tabelul Produs simplu tip.

 Dar vom ajunge la asta mai târziu în tutorial. Pentru moment, să începem.

1. Cârligele

La fel ca WordPress, WooCommerce oferă un API care ne permite să cârpim în parte din ciclul de viață al paginii. Deci, deși este posibil să fi lucrat mai devreme cu API-ul metadatelor WordPress, acest lucru cu WooCommerce este diferit.

Există două cârlige care sunt importante pentru a ști:

1. woocommerce_product_options_grouping. Vom folosi această funcție pentru a crea o descriere și introducere de text care acceptă valorile noastre.
2. woocommerce_process_product_meta. Vom folosi acest cârlig pentru a procesa, dezinfecta și salva valoarea textului de intrare.

Ca și cu toate cârligele din WordPress, acestea vor necesita definirea acestor cârlige și apoi definirea funcționalității personalizate pentru ele. Deși puteți face acest lucru folosind programarea procedurală, acest tutorial va implementa funcționalitatea folosind programarea orientată pe obiecte. 

2. Funcționalitatea

În primul rând, vom defini o clasă care va avea o variabilă deoarece este data de instanță. Această variabilă va reprezenta ID-ul câmpului de intrare care va apărea în interfața cu utilizatorul:

În continuare, vom inițializa această variabilă instanță în constructorul clasei:
textfield_id = 'tutsplus_text_field';  
În acest moment, suntem gata să începem să folosim cârligele de mai sus. Pentru a face acest lucru, totuși, vom adăuga o funcție de inițializare care va înregistra două funcții personalizate cu cârligul. 
În următoarele două secțiuni, vom vedea exact modul de implementare a funcționalității personalizate.
1. Adăugarea unui câmp de introducere a textului
Mai întâi, vom dori să adăugăm o funcție pe care o avem woocommerce_product_options_grouping. În funcția inițială pe care am definit-o în secțiunea anterioară, vom face exact acest lucru. 
textfield_id = 'tutsplus_text_field';  funcția publică init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping'));  funcția publică product_options_grouping () 
Observați că am numit funcția product_options_grouping. Cred că acest lucru face codul un pic mai ușor de citit. Deși funcția, singură, nu poate fi foarte descriptivă în ceea ce privește funcția, ea se raportează la cârligul său.
Apoi, trebuie să implementăm funcția. Pentru a face acest lucru, vom avea nevoie de câteva informații:
 
Avem nevoie de un ID pe care îl vom folosi pentru identificarea unică a câmpului de text. Vom folosi setul de date de instanță în constructor.
 
Se va folosi o etichetă pentru a da o descriere câmpului de intrare.
 
În mod opțional, putem specifica un substituent și, în scopul exemplului nostru, vom face.
 
Există o opțiune pentru a afișa o indicație de ajutor ori de câte ori utilizatorul își poziționează mouse-ul peste o pictogramă.
 
Și avem opțiunea pentru o descriere pe care o vom folosi pentru a umple textul sugestiii.
 
Toate informațiile de mai sus vor fi stabilite într-o matrice asociativă și apoi vor fi transmise woocommerce_wp_text_input. Aceasta este o funcție API WooCommerce concepută pentru a scoate un element de text cu argumentele de mai sus.
textfield_id = 'tutsplus_text_field';  funcția publică init () add_action ('woocommerce_product_options_grouping', array ($ this, 'product_options_grouping'));  funcția publică product_options_grouping () $ description = sanitize_text_field ('Introduceți o descriere care va fi afișată pentru cei care vizualizează produsul.'); $ placeholder = sanitize_text_field ("Înșelăm produsul cu o scurtă descriere."); $ args = array ('id' => $ this-> textfield_id, 'label' => sanitize_text_field ('Product Teaser'), 'placeholder' => , 'descriere' => descriere $,); woocommerce_wp_text_input ($ args); 
În acest moment, avem prima parte a plugin-ului făcut. Încă am scris codul care stabilește totul în mișcare și încă nu am scris codul care salvează informațiile în baza de date, așa că trebuie să avem grijă de asta acum.
2. Salvarea informațiilor
Apoi, adăugați următoarele linii de cod în init metodă:
După aceea, asigurați-vă că adăugați add_custom_linked_field_save funcţie. 
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)); 
Voi vorbi puțin despre implementarea funcției în secțiunea următoare.
Sanitizarea datelor
Observați în funcția de mai sus, există trei lucruri care se întâmplă:
 
Verificăm să vă asigurați că există mai multe valori nonce. Dacă nu, atunci ne întoarcem fals. Aceasta este o precauție standard de securitate. Valorile nonce sunt detectate prin căutarea specifică a ceea ce WooCommerce oferă în codul sursă.
 
Sanitizează datele în $ _POST colecție corespunzătoare cu intrarea utilizatorului.
 
Salvați informațiile în tabelul cu metadate postare.
 
Rețineți că, de fapt, nu facem nimic pentru a face informațiile de la front-end, deci nu există nici un apel get_post_meta. Cu toate acestea, vom face informații despre front-end.
3. Afișarea teaser-ului pe front-end
Pentru a furniza informații despre front-end, vom avea nevoie de o clasă care să facă multe lucruri pe care le-am făcut deja. Mai exact, vom avea nevoie de:
 
un ID de câmp text
 
inițializarea ID-ului menționat în constructor
 
o funcție de inițializare pentru conectarea codului personalizat la front-end
 
redând valoarea reală
 
Setarea acestui lucru nu este de fapt atât de dificilă, deoarece am făcut deja acest lucru, așa că voi trece mai departe clasa în totalitate; cu toate acestea, voi avea câteva comentarii pe care le vom face despre modul în care ne îndreptăm pentru a stabili această clasă după sari:
textfield_id = 'tutsplus_text_field';  funcția publică init () add_action ('woocommerce_product_thumbnails', array ($ this, 'product_thumbnails'));  funcția publică product_thumbnails () $ teaser = get_post_meta (get_the_ID (), $ this-> textfield_id, true); dacă (gol ($ teaser)) retur;  echo esc_html ($ teaser); 
Rezultatul final ar trebui să fie ceva de genul:
În acest moment, avem un cod redundant. În mod specific, clasele publice și cele administrative folosesc a textfield_ID și a pus-o în constructorul lor. Acesta este un miros de cod deoarece încalcă întregul principiu DRY al programării orientate pe obiecte.
Există o serie de modalități prin care putem atenua acest lucru, cum ar fi trecerea valorii în constructori atunci când clasele sunt instanțiate, utilizând un model simplu de design pentru a orchestra informații între cele două clase și așa mai departe.
În fișierul care însoțește acest tutorial, care poate fi descărcat utilizând link-ul din bara laterală, veți vedea de fapt modul în care am trecut valoarea în constructor pentru ao face ușor mai ușor de gestionat.
În al doilea rând, rețineți că folosesc woocommerce_product_thumbnails cârlig pentru a ajuta la redarea informațiilor. Există un număr de cârlige pe care WooCommerce le-a pus la dispoziție, și am ales-o pur și simplu de la cârligele disponibile pentru al face. Puteți să vă simțiți liberi să porniți prin documentație pentru a determina ce cârlig funcționează cel mai bine pentru nevoile dvs.. 
4. Aduceți-i pe toți împreună
În cele din urmă, ultimul lucru pe care trebuie să-l facem este să configurați un fișier bootstrap care va porni pluginul. Am făcut acest lucru într-o serie de tutoriale anterioare, așa că nu voi petrece prea mult timp pentru a elabora punctul.
Iată codul pentru modul în care o rup:
init ();  altfel $ plugin = new TutsPlus_Custom_WooCommerce_Display ('tutsplus_text_field'); $ Plugin-> init (); 
Observați că includ dependențele și apoi, odată ce funcția se declanșează, verifică dacă tabloul de bord este afișat sau nu. Dacă da, atunci este încărcată partea corespunzătoare a pluginului; în caz contrar, afișajul standard este încărcat, pe care îl puteți vedea pe pagina produsului.
Concluzie
În acest moment, am acoperit tot ceea ce ne-am propus să facem în introducerea tutorialului:
 
Am adăugat un câmp personalizat.
 
Am dezinfectat și l-am salvat.
 
Am creat un aspect public al plugin-ului.
 
Și am recuperat și afișat conținutul.
 
Nu uitați să descărcați demonstrația finală de lucru din bara laterală a acestei pagini. Este butonul albastru mare din bara laterală. În plus, dacă sunteți interesat de WooCommerce, nu uitați să verificați câteva dintre celelalte tutoriale ale noastre sau unele dintre elementele pe care le avem pe piața noastră.
Ca de obicei, dacă căutați alte materiale legate de WordPress, puteți găsi toate tutorialele mele anterioare pe pagina de profil și puteți să mă urmați pe blogul meu sau pe Twitter. 
Nu uitați să lăsați orice întrebări sau comentarii în feedul de mai jos!
Resurse
 
câmpuri customizate
 
 woocommerce_product_options_grouping
 
 woocommerce_process_product_meta
 
 Procedura de programare
 
 woocommerce_wp_text_input
 
esc_html
 
USCAT
 
WooCommerce în CodeCanyon
 



		
			
	   
	




Cod