Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Paano Gumawa ng Custom Settings Panel sa WooCommerce

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Ang WooCommerce ay ang nangungunang ecommerce plugin para sa WordPress. Sa mga oras na ito, ito ay may mahigit 3 milyong aktibong installations at naiulat na nasa likod ng 40% ng lahat ng online stores. 

Isa sa mga dahilan ng kasikatan ng WooCommerce ay ang pagiging malawak nito. Katulad ng mismong WordPress, ang WooCommerce ay puno ng aksyon at filters kung saan ang developers ay maaaring maka-konekta dito kung nais nilang pahabain ang dati ng functionality ng WooCommerce. 

Ang napakagandang halimbawa nito ay ang kakayahan na gumawa ng custom data panel. 

Ano Ang Saklaw ng Pagtuturong Ito?

Ang pagtuturong ito ay nahahati sa dalawang bahagi. Sa unang bahagi, titingnan natin ang:

  • pagdagdag ng custom panel sa WooCommerce
  • pagdagdag ng custom fields sa panel
  • pagsa-sanitize at  pagsi-save n g custom field values

Pagkatapos sa ikalawang bahagi, titingnan natin ang:

  • pagpapakita ng custom fields sa pahina ng produkto
  • pagbabago ng presyo ng produkto depende sa value ng custom fields
  • pagpapakita ng custom field values sa cart at order

Ano ang WooCommerce Custom Data Panel?

Kapag gumawa ka ng bagong produkto sa WooCommerce, ilalagay mo ang higit na kritikal na impormasyon ng produkto katulad ng presyo at imbentaryo, sa bahagi ng Product data.

WooCommerce custom data panel

Sa screenshot sa itaas, makikita mo na ang Product data ay nahahati sa panels: ang tabs sa ibaba ng kaliwa, halimbawa, General, Inventory, at iba pa, bawat isa ay nagbubukas ng iba’t ibang panels sa pangunahing view sa kanan.

Sa pagtuturong ito, titingnan natin ang paggawa ng custom panel para sa data ng produkto at pagdagdag ng ilang custom fields dito. Pagkatapos ay titingnan natin ang pagggamit ng custom fields na iyon sa front end at pag-save ng values nito sa customer orders.  

Sa ating halimbawang senaryo, idadagdag natin ang 'Giftwrap' panel na naglalaman ng ilang custom fields:

  • checkbox para isama ang opsyon sa giftwrapping para sa produkto sa pahina ng produkto
  • checkbox para i-enable ang input field kung saan ang customer ay makakapaglagay ng mensahe sa pahina ng produkto
  • input field para idagdag ang presyo para sa opsyon sa giftwrapping; ang presyo ay idadagdag sa presyo ng produkto sa cart

Sa back end, ganito ang magiging itsura :

Giftwrap panel

At sa front end, parang ganito ang magiging itsura:

Front end example

Gumawa ng Bagong Plugin

Dahil pinapalawak natin ang functionality, gagawa tayo ng plugin sa halip na pagdagdag ng ating code sa theme.Ibig sabihin ang ating mga users ay mapapanatili ang karagdagang functionality kahit na pagpalitin nila ang theme ng kanilang site. Ang paggawa ng plugin ay hindi na sakop sa pagtuturong ito, subalit kung kailangan mo ng tulong, tingnan ang Tuts+ Coffee Break Course sa paggawa ng iyong unang plugin:

Ang ating plugin ay bububuin ng dalawang class: una para pamahalaan ang mga bagay sa admin, at ang isa para pamahalaan ang lahat sa front end. Ang ating plugin file structure ay ganito ang magiging itsura:

Project structure

Admin Class

Una, kailangan nating gumawa ng class para pamahalaan ang lahat sa back end. Sa folder na tinawag na classes, gumawa ng bagong file na tinawag na class-tpwcp-admin.php

Pamamahalaan ng class na ito ang mga sumusunod:

  • Gumawa ng custom tab(ang tab ay maaaring i-click na element sa babang kaliwa na bahagi ng data ng produkto).
  • Idagdag ang custom fields sa custom panel(ang panel ay element na makikita kapag pumindot ka ng tab).
  • Magpasya ng uri ng produkto kung saan i-enable ang panel.
  • I-sanitize at i-save ang custom field values.

I-paste ang mga sumusunod na code sa bagong file na iyon. Ipapaliwanag natin ito isa isa pagkatapos.

Gawin ang Custom Tab

Para magawa ang custom tab, ikinonek namin sa woocommerce_product_data_tabs filter gamit ang ating create_giftwrap_tab function. Ito ay dadaan sa WooCommerce $tabs object, kung saan binago natin gamit ang mga sumusunod na parameters: 

  • label: gamitin ito para sa pagtukoy ng pangalan ng iyong tab.
  • target: ito ay ginagamit para makagawa ng anchor link kung kaya kailangang kakaiba.
  • class: mga classes na gagamitin sa iyong panel.
  • priority: tukuyin  kung saan mo nais na lumabas ang iyong tab

Mga Uri ng Produkto

Sa puntong ito, mahalagang isaalang-alang anong uri ng mga produkto kung saan gusto natin ang panel ay i-enable. Dati pa, mayroong apat na uri na WooCommerce na produkto: simple, variable, grouped, at affiliate. Sabihin na natin sa halimbawang senaryo, gusto lang natin i-enable ang Giftwrap panel para sa simple at variable na uri ng produkto.

Para magawa ito, idagdag natin ang show_if_simple at show_if_variable na classes sa class parameter sa itaas. Kung ayaw natin na i-enable ang panel para sa variable na uri ng produkto, tatanggalin lang natin ang show_if_variable na class.

Idagdag ang Custom Fields

Ang susunod na hook na gagamitin natin ay woocommerce_product_data_panels. Dito ay mailalabas mo ang iyong sariling markup para sa Giftwrap panel. Sa ating class, ang function display_giftwrap_fields ay gumagawa ng pares ng div na wrappers, sa loob kung saan gumagamit tayo ng ilang WooCommerce functions para gumawa ng custom fields.

Tandaan paano ang id ay may kinalaman sa ating panlabas na divgiftwrap_panel, ay tumutugma sa value na ipinasa natin sa target na parameter ng ating giftwrap tab sa itaas. Ito ay kung paano malalaman ng  WooCommerce na ipakita ang panel na ito kapag pinindot ang Giftwrap tab. 

WooCommerce Custom Field Functions

Sa ating halimbawa, ang dalawang functions na ginagamit natin para magawa ang ating fields ay ang:

  • woocommerce_wp_checkbox
  • woocommerce_wp_text_input

Ang mga functions na ito ay binigay ng WooCommerce partikular para sa layunin ng paggawa ng custom fields. May ilang mga argument dito, kabilang ang:

  • id: ito ang ID ng iyong field.Kailangang ito ay unique, at babanggitin natin ito sa sunod sa ating code.
  • label: ito ang label na makikita ng user.
  • desc_tip: ito ang opsyonal na tool tip na makikita kapag ginalaw ng user ang question mark icon sa tabi ng label. 

Tandaan din na ang woocommerce_wp_text_input na function ay may type na argument, kung saan maaari mong tukuyin ang numero para sa numero input field, o text para sa text input field. Ang ating field ay gagamitin para ilagay ang presyo, kung kaya tutukuyin natin ito na numero.

I-save ang Custom Fields

Ang huling bahagi ng ating admin class ay gumagamit ng woocommerce_process_product_meta na action para i-save ang custom field values.

Para i-standardize at i-optimize kung paano ito nagtatago at nagre-retrieve ng data, ginaya ng WooCommerce 3.0 ang CRUD (Create, Read, Update, Delete) na sistema para sa pag set at pagkuha ng  data ng produkto.Mas malalaman mo ang tungkol sa thinking behind this sa WooCommerce 3.0 announcement.

Dahil dito, maliban sa mas pamilyar get_post_meta at update_post_meta methods na paraan na maaari na nating nagamit dati, ngayon ay gagamitin na natin ang $post_id para gumawa ng WooCommerce $product na object, at gamitin ang update_meta_data na paraan para ma-save ang data. Halimbawa:

Tandaan din na maingat tayo na i-sanitize ang ating data bago ito i-save sa database. Mas maraming impormasyon sa pag sanitize ng data dito: 

Pangunahing Plugin File

Kapag nagawa mo ang iyong readme.txt file at ang iyong pangunahing plugin file tutsplus-woocommerce-panel.php, maaari mong idagdag ang code na ito sa iyong pangunahing file.

Ito ang magsisimula ng iyong admin class.

Kapag inactivate  mo ang iyong plugin sa site(kasama ng WooCommerce), at gumawa ng bagong produkto, makikita mo ang bagong Giftwrap panel , kasama ng custom fields. Maaari mong baguhin ang fields at i-save ang mga iyon…Subalit wala ka pang anumang makikita sa front end. 

Konklusyon

Balikan natin uli ang ating mga tiningnan sa artikulong ito.

Tiningnan natin ang halimbawang senaryo sa pagdagdag ng custom na 'Giftwrap' panel sa WooCommerce.Gumawa tayo ng plugin at nagdagdag ng class para magawa ang panel. Sa loob ng class, gumamit din tayo ng WooCommerce functions para idagdag ang custom fields, at sinanitize natin at sinave ang mga field values na iyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.