Senarai pesanan WooCommerce mempunyai tetingkap pratonton pantas: klik ikon mata pada mana-mana baris dan tetingkap terbuka menunjukkan butiran bil, butiran penghantaran dan item pesanan. Ia sangat berguna, tetapi hanya untuk dibaca secara lalai: menukar status atau menyemak nota pesanan masih bermaksud meninggalkan tetingkap dan membuka skrin suntingan pesanan penuh.
Memperluas teras dengan cara yang betul
Daripada menggantikan templat tetingkap WooCommerce (yang akan rosak pada kemas kini WooCommerce seterusnya), kami menggunakan dua titik sambungan rasmi yang sudah disediakan: penapis woocommerce_admin_order_preview_get_order_details, yang membolehkan anda menyuntik data tambahan ke dalam tetingkap, dan woocommerce_admin_order_preview_end, tindakan yang dijalankan di hujung templat Underscore.js tetingkap itu, membolehkan anda menambah markup yang boleh mengakses data yang sama.
Dengan menggabungkan dua hook itu, kami menambah:
- Menu lungsur status dengan butang Simpan, disambungkan kepada pengendali AJAX kecil yang mengemas kini pesanan dan, yang penting, turut mengemas kini baris senarai di bawahnya, bukan tetingkap sahaja, supaya senarai tidak pernah menunjukkan status lama selepas ditutup.
- Suapan nota dalaman pesanan yang boleh ditatal, diambil melalui
wc_get_order_notes()dan dipaparkan yang terbaharu dahulu, sama seperti dalam skrin pesanan penuh. - Butang penyerahan kurier WhatsApp yang diterangkan dalam artikel lain, yang terletak dalam tetingkap yang sama.
Menjadikannya kelihatan asli
Bahagian paling rumit bukan fungsinya, tetapi menyamai rentak visual WooCommerce dengan cukup rapat supaya tambahan itu tidak kelihatan ditampal. Kami menyamai padding, gaya tajuk dan jarak yang sudah digunakan WooCommerce untuk panel “Billing details”, bukan mencipta bahasa visual baharu untuk satu tetingkap ini. Hasilnya kelihatan seperti lanjutan tetingkap itu, bukan tambahan pengarang plugin yang dikokot di bawahnya.
Pengajaran utama
- Titik hook rasmi WooCommerce untuk tetingkap ini wujud tepat supaya anda tidak perlu menggantikan templatnya; menggunakannya memastikan penyesuaian selamat daripada kemas kini.
- Kemas kini AJAX di pihak pentadbiran perlu menyentuh setiap tempat data yang berubah dipaparkan, bukan hanya kawalan yang digunakan pengguna, atau antara muka menjadi lapuk tanpa disedari.
- Konsistensi visual dengan komponen platform sendiri ialah keputusan reka bentuk yang sebenar, bukan sekadar tambahan; itulah yang menjadikan tambahan tersuai terasa boleh dipercayai.
Bacaan berkaitan: mengawal lajur yang dipaparkan di telefon, menukar varian produk selepas pesanan dibuat.
Menghadapi had yang serupa dalam panel WooCommerce atau WordPress anda sendiri? Mari berbincang: ArtinTech Solution membina alat kedai tersuai seperti ini.