Advertisement
  1. Code
  2. WordPress

Cara membuat sebuah Panel pengaturan khusus di WooCommerce

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Saipul Hidayat (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

WooCommerce adalah jauh terkemuka e-commerce plugin untuk WordPress. Pada saat penulisan, memiliki lebih dari 3 juta aktif instalasi dan dilaporkan berada di belakang lebih dari 40% dari semua toko online.

Salah satu alasan untuk popularitas WooCommerce's adalah yang menampilkan extendability. Seperti WordPress itu sendiri, WooCommerce dikemas penuh tindakan dan filter yang pengembang dapat menghubungkan ke jika mereka ingin memperpanjang WooCommerce's fungsionalitas asali.

Contoh ini adalah kemampuan untuk menciptakan sebuah kustom data panel.

Apa yang dibahas dalam Tutorial ini?

Tutorial ini dibagi menjadi dua bagian. Pada bagian satu, kita akan melihat:

  • menambahkan sebuah panel kustom untuk WooCommerce
  • menambahkan kolom kustom ke panel
  • sanitasi dan menyimpan nilai-nilai bidang kustom

Kemudian dalam bagian kedua, kita akan melihat:

  • Menampilkan bidang kustom pada halaman produk
  • mengubah harga produk tergantung pada nilai kolom kustom
  • menampilkan nilai-nilai bidang kustom dalam keranjang dan urutan

Apa yang dimaksud dengan Data WooCommerce Custom Panel?

Ketika Anda membuat produk baru di WooCommerce, Anda memasukkan sebagian besar informasi produk kritis, seperti harga dan persediaan, di bagian data produk.

WooCommerce custom data panelWooCommerce custom data panelWooCommerce custom data panel

Dalam gambar di atas, Anda dapat melihat bahwa bagian data produk terbagi menjadi panel: tab ke kiri, misalnya umum, persediaan, dll, masing-masing membuka panel yang berbeda dalam tampilan utama di sebelah kanan.

Dalam tutorial ini, kita akan melihat menciptakan sebuah panel kustom untuk data produk dan menambahkan beberapa bidang kustom untuk itu. Kemudian kita akan melihat menggunakan bidang kustom di ujung depan dan menyimpan nilai-nilai mereka ke pesanan pelanggan.

Dalam skenario contoh kami, kami akan menambahkan sebuah panel 'Giftwrap' yang berisi beberapa bidang kustom:

  • sebuah kotak centang untuk menyertakan pilihan giftwrapping untuk produk di halaman produk
  • sebuah kotak centang untuk mengaktifkan sebuah field input yang mana pelanggan dapat memasukkan pesan pada halaman produk
  • sebuah field input untuk menambahkan harga untuk pilihan giftwrapping; harga akan ditambahkan ke harga produk di Shopping cart

Di bagian belakang akhir, itu akan terlihat seperti ini:

Giftwrap panelGiftwrap panelGiftwrap panel

Dan di ujung depan, itu akan terlihat seperti ini:

Front end exampleFront end exampleFront end example

Membuat sebuah Plugin baru

Karena kita sedang memperluas fungsionalitas, kita akan menciptakan sebuah plugin daripada menambahkan kode kami ke tema. Itu berarti bahwa pengguna kami akan mampu mempertahankan fungsi tambahan ini bahkan jika mereka beralih tema situs mereka. Membuat plugin berada di luar cakupan tutorial ini, tetapi jika Anda memerlukan bantuan, lihat pada Tuts + Coffee Break kursus ini menciptakan plugin pertama Anda:

Plugin kami akan terdiri dari dua kelas: satu untuk menangani hal-hal yang di admin, dan satu untuk menangani segala sesuatu di ujung depan. Struktur file plugin kami akan terlihat seperti ini:

Project structureProject structureProject structure

Admin kelas

Pertama, kita perlu membuat kelas kami menangani segala sesuatu di belakang. Dalam folder yang disebut kelas, menciptakan sebuah file baru yang disebut kelas-tpwcp-admin.php.

Kelas ini akan menangani berikut:

  • Membuat kustom tab (tab yang diklik elemen ke kiri bagian data produk).
  • Tambahkan custom fields untuk kustom panel (panel adalah elemen yang akan ditampilkan bila Anda mengklik tab).
  • Memutuskan jenis produk yang mana panel akan diaktifkan.
  • Membersihkan dan menyimpan nilai-nilai bidang kustom.

Paste kode berikut ke dalam file baru. Kami akan berjalan melalui langkah demi langkah selanjutnya.

Membuat Tab kustom

Untuk membuat tab kustom, kita menghubungkan ke filter woocommerce_product_data_tabs menggunakan fungsi create_giftwrap_tab kami. Ini tiket WooCommerce $tabs objek dalam, yang kita kemudian memodifikasi menggunakan parameter sebagai berikut:

  • Label: Gunakan ini untuk menentukan nama tab Anda.
  • target: ini digunakan untuk membuat link jangkar sehingga kebutuhan untuk menjadi unik.
  • kelas: array kelas yang akan diterapkan ke panel.
  • prioritas: menentukan mana Anda ingin tab Anda muncul.

Jenis produk

Pada tahap ini, ada baiknya mempertimbangkan apa jenis produk kami seperti panel kami harus diaktifkan untuk. Secara default, ada empat jenis produk WooCommerce: sederhana, variabel, dikelompokkan, dan afiliasi. Katakanlah untuk skenario contoh kami, kami hanya ingin panel Giftwrap kami harus diaktifkan untuk jenis produk yang sederhana dan variabel.

Untuk mencapai hal ini, kami menambahkan kelas show_if_simple dan show_if_variable ke parameter kelas atas. Jika kita tidak ingin mengaktifkan panel untuk jenis variabel produk, kami hanya akan menghilangkan kelas show_if_variable.

Tambahkan Custom Fields

Hook berikutnya kita menggunakan adalah woocommerce_product_data_panels. Tindakan ini memungkinkan kita untuk output kita sendiri markup untuk Giftwrap panel. Dalam kelas kami, display_giftwrap_fields fungsi menciptakan beberapa div pembungkus, dalam yang kita menggunakan beberapa fungsi WooCommerce untuk membuat bidang kustom.

Perhatikan bagaimana id atribut untuk kami luar div, giftwrap_panel, cocok dengan nilai kami melewati ke parameter target kami giftwrap tab di atas. Ini adalah bagaimana WooCommerce tahu untuk menampilkan panel ini ketika kita klik Giftwrap tab.

WooCommerce Custom Field fungsi

Dalam contoh kita, dua fungsi kita menggunakan untuk membuat bidang kami adalah:

  • woocommerce_wp_checkbox
  • woocommerce_wp_text_input

Fungsi-fungsi ini disediakan oleh WooCommerce secara khusus untuk tujuan menciptakan kolom kustom. Mereka mengambil sebuah array dari argumen, termasuk:

  • ID: ini adalah ID dari bidang Anda. Perlu menjadi unik, dan kami akan referensi itu kemudian dalam kode kita.
  • Label: ini adalah label seperti itu akan ditampilkan kepada pengguna.
  • desc_tip: ini adalah ujung alat opsional yang muncul ketika pengguna melayang di atas ikon tanda tanya di sebelah label.

Perhatikan juga bahwa fungsi woocommerce_wp_text_input juga membutuhkan jenis argumen, mana Anda dapat menentukan nomor nomor field input, atau field input teks untuk teks. Bidang kami akan digunakan untuk memasukkan harga, jadi kita menetapkannya sebagai angka.

Simpan Custom Fields

Bagian akhir dari kelas admin kami menggunakan tindakan woocommerce_process_product_meta untuk menyimpan nilai-nilai bidang kustom kami.

Untuk standarisasi dan mengoptimalkan bagaimana menyimpan dan mengambil data, WooCommerce 3.0 mengadopsi metode CRUD (membuat, baca, Update dan Delete) untuk menetapkan dan mendapatkan data produk. Anda dapat mengetahui lebih lanjut tentang pemikiran di balik ini dalam pengumuman WooCommerce 3.0.

Dengan ini dalam pikiran, bukan lebih akrab get_post_meta dan metode update_post_meta yang kami telah digunakan di masa lalu, kita sekarang menggunakan $post_id untuk membuat WooCommerce $product objek, dan kemudian menerapkan metode update_meta_data untuk menyimpan data. Sebagai contoh:

Harap dicatat juga bahwa kami tidak berhati-hati untuk membersihkan data kami sebelum menyimpannya ke database. Ada informasi lebih lanjut tentang sanitasi data di sini:

Berkas utama Plugin

Ketika Anda membuat file readme.txt Anda dan Anda plugin utama berkas tutsplus-woocommerce-panel.php, Anda dapat menambahkan kode ini ke file utama Anda.

Ini akan memulai kelas admin Anda.

Bila Anda mengaktifkan plugin Anda di situs (bersama dengan WooCommerce) dan kemudian pergi untuk menciptakan produk baru, Anda akan melihat panel Giftwrap baru tersedia, bersama dengan bidang kustom. Anda dapat memperbarui bidang dan menyelamatkan mereka... Tetapi Anda tidak akan melihat apa-apa di ujung depan belum.

Kesimpulan

Hanya rekap apa kita telah melihat begitu jauh dalam artikel ini.

Kita telah melihat contoh skenario untuk menambahkan panel 'Giftwrap' kustom untuk WooCommerce. Kami telah menciptakan sebuah plugin dan menambahkan kelas untuk membuat panel. Dalam kelas tersebut, kami juga telah menggunakan fungsi WooCommerce untuk menambahkan kolom kustom, dan kemudian kita telah dibersihkan dan diselamatkan nilai-nilai bidang tersebut.

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.