Menggunakan jenis medan ModalSelect Form dalam Joomla 5 untuk memudahkan pencarian produk yang betul, daripada beribu-ribu, dengan menapis dalam tetingkap modal menggunakan kategori, pengilang dan carian semasa membangunkan sambungan.
Dalam proses bekerja dengan pelanggan, terdapat tugas dalam pelbagai peringkat: seseorang memerlukan laman web ringkas 5-6 halaman. Seseorang memerlukan katalog barangan yang besar atau kedai dalam talian dengan penyepaduan dengan sistem pihak ketiga menggunakan API REST. Orang lain memerlukan kefungsian bukan standard yang tiada penyelesaian popular tersedia.
Joomla bagus untuk pembangunan dan membolehkan anda mencipta kod yang diselenggara dengan mudah. Jika keperluan mengikut teras CMS maka ia mempunyai jawapan untuk semua kes ini.
Untuk menyelesaikan projek yang besar, kita perlu membahagikannya kepada tugas yang lebih kecil dan saya ingin bercakap tentang menyelesaikan salah satu tugasan ini dalam artikel ini.
Pelanggan telah pun mencipta katalog produk pada salah satu komponen popular kedai dalam talian untuk Joomla (JoomShopping). Mereka boleh memilih parameter produk, memasukkannya ke dalam troli dan membuat pembelian. Semuanya seperti biasa. Walau bagaimanapun, kini anda perlu menambah keupayaan untuk mencipta reka letak grafik untuk produk. Contohnya, produk anda ialah mug atau baju-T. Dan sebelum membeli, anda boleh pergi ke pereka produk, muat naik logo atau foto anda, tulis teks dan susun atur ini dilampirkan pada pesanan di kedai dalam talian. Selepas pembayaran, reka letak pergi terus ke pengeluaran, di mana imej dan teks digunakan pada cawan anda dan dihantar ke alamat.
Memandangkan pelaksanaan fungsi ini agak memakan masa, ia dicipta sebagai komponen pereka produk yang berasingan. Dan pemalam pembekal data sudah pun dibuat, membolehkan anda bekerja dengan satu atau komponen e-dagang yang lain.
Salah satu tugas kecil yang digunakan ialah mewujudkan hubungan antara barangan komponen kedai dalam talian dan barangan dalam komponen pereka produk. Ini sepatutnya mudah dan intuitif untuk pengurus kandungan yang akan mengusahakan kandungan pada masa hadapan. Oleh itu, tidak cukup hanya untuk membuat medan teks di mana nombor id produk yang dikehendaki akan ditunjukkan. Mungkin terdapat hanya beberapa dozen produk di kedai dalam talian, dan kemudian memilih produk untuk komunikasi tidak begitu sukar. Jika terdapat beribu-ribu produk, fungsi mencari dan menapis produk mengikut parameter adalah penting. Jika anda boleh menapis senarai produk mengikut kategori, pengilang atau mencarinya mengikut nama antara ratusan yang lain, kerja anda akan menjadi lebih pantas dan lebih mudah.
Lihat video
Medan ini sangat serupa dengan kerja pemalam butang editor (kumpulan editor-xtd), di mana data untuk pemilihan ditunjukkan dalam tetingkap modal: pautan ke artikel, kod pendek untuk modul, dsb.
Dalam panel pentadbir Joomla, terdapat medan berbeza yang perlu diisi dengan data daripada komponen lain: nyatakan artikel, item menu, kenalan, produk, dll. Biasanya medan sedemikian direka bentuk sebagai senarai juntai bawah pilihan pilihan , ia boleh direka bentuk sebagai input type="text" dengan senarai data, tetapi terdapat juga medan yang mudah menunjukkan senarai entiti yang dikehendaki, dengan penapisan, carian dan penomboran. Bukan sahaja sumber dalam tapak (pelbagai komponen, pemalam) boleh bertindak sebagai sumber data, tetapi juga perkhidmatan pihak ketiga yang tersedia melalui REST API: CRM, perkhidmatan penghantaran, pangkalan data luaran, tapak Joomla lain dan sebagainya.
Kita semua telah melihat medan ini dalam tindakan apabila memilih artikel dalam item menu seperti "Artikel -Artikel tunggal", "Kenalan - Kenalan tunggal", atau apabila mencipta alias item menu - "Pautan sistem - Menu Alias item". Walau bagaimanapun, mari kita ingatkan diri kita bagaimana rupa mereka.
Tetingkap pemilihan artikel modal.
Tetingkap pemilihan kenalan tunggal modal.
Mari kita lihat lebih dekat medan ini - apakah sebenarnya yang mereka benarkan untuk anda lakukan. Jauh di dalam, kami memahami bahawa tugas utama medan ini ialah untuk mendapatkan id entiti yang dipilih dan meletakkan id ini dalam medan teks. Tetapi pada skrin kita melihat sesuatu yang lain - bukannya nombor id, kita melihat tajuk artikel atau kenalan. Ia bagus dan selesa. Anda tidak perlu mengingati nama artikel dengan id 1452704. Selain itu, video dengan jelas menunjukkan bahawa jika medan sudah mempunyai nilai, butang "kosongkan" muncul. Ia menetapkan semula nilai medan dan membolehkan anda mengklik pada butang "pilih" sekali lagi.
Dalam beberapa kes, kami mempunyai peluang untuk mencipta jenis entiti yang dipilih - artikel, kenalan, dll. betul-betul dalam proses mencipta item menu. Butang ini berfungsi dengan mengambil kira ACL - pengasingan hak akses dalam Joomla.
Bayangkan anda sedang membina tapak web dan mencipta halaman "Kenalan". Jika anda tidak mempunyai sekumpulan cawangan syarikat dengan struktur yang kompleks, maka ini hanyalah artikel Joomla biasa dalam kategori "Tidak Dikategorikan". Dan ia sudah mempunyai semua kenalan dalam bentuk teks atau pembolehubah. Pada zaman dahulu, anda perlu membuat artikel terlebih dahulu, dan kemudian pergi ke item menu dan mencipta item menu untuknya. Anda tidak perlu berbuat demikian sekarang.
Dan jika medan sudah mempunyai nilai, maka dalam beberapa kes adalah mungkin untuk mengedit entiti yang dipilih (artikel, item menu, dll.) terus dalam proses mencipta item menu.
Jadi, menggunakan medan pemilihan dalam tetingkap modal, kita boleh:
Ini yang ada di depan mata saya. Tetapi dalam kedalaman Joomla terdapat juga parameter urlCheckin yang ingin tahu yang membolehkan anda menghantar nilai yang dipilih ke url yang dinyatakan dalam medan. Perlu diingat bahawa fungsi dalam Joomla ini telah berkembang secara beransur-ansur untuk masa yang agak lama. Walau bagaimanapun, jenis medan universal yang berasingan yang boleh digunakan untuk keperluan anda hanya muncul dalam Joomla 5. Ia bukan dalam Joomla 4.
Sebelum ini, pembina ini dipanggil JForm. Saya akan menganggap bahawa tidak semua pembaca saya mempunyai alat pembangunan seperti IDE - persekitaran pembangunan - ala PHP Storm atau VS Code, jadi saya akan cuba memberikan garis panduan tambahan untuk menavigasi pangkalan kod.
Dalam Joomla, Logik dipisahkan daripada View (output HTML sebenar), jadi kami akan menerokainya di beberapa tempat pada masa yang sama.
Logik ialah kelas Borang. Dalam Joomla 5, fail kelas Borang terletak dalam pustaka/src/Borang. Kami meneliti fail ini untuk memahami logik itu sendiri, perkara yang berlaku kepada data dan cara mengendalikannya.
Ringkasnya, pembina Borang menerima XML dengan penerangan medan. membaca data (jenis medan, kelas medan tersuai daripada atribut addfieldprefix, jika ada, dsb.), memuatkan kelas medan yang diperlukan menggunakan FormHelper. Jika medan mempunyai beberapa peraturan untuk menapis data output - kelas FormRule digunakan - ingat medan Joomla jenis senarai fail, di mana anda boleh menentukan parameter penapisan dan memilih, sebagai contoh, hanya fail php atau css sahaja.
Fail kelas medan Borang Joomla terletak dalam pustaka/src/Borang/Field. Terdapat, secara sederhana, banyak daripada mereka. Ini adalah bahan binaan panel pentadbir, dan kadangkala bahagian hadapan juga.
Fail kelas menerangkan sifat kelas seperti $type, $layout dan lain-lain yang diperlukan untuk operasi. Kebanyakan medan mempunyai kaedah getInput() - sebenarnya mengembalikan output HTML medan, getLayoutData() - pramemproses data untuk medan sebelum menghantarnya ke pemaparan, getLabel() - berfungsi dengan label medan, dsb.
Kami ingat bahawa kelas medan mewarisi kelas FormField induk. Dalam fail kelas libraries/src/Form/FormField.php kemungkinan atribut medan diterangkan, yang boleh digunakan dalam penerangan dalam XML. Mereka mempunyai penerangan ringkas tentang apa itu dan mengapa.
Kelas kanak-kanak (waris) mempunyai keupayaan untuk bekerja dengan kaedah kelas induk dan, jika perlu, mengatasinya.
Setiap kelas medan mempunyai output HTML. Dalam MVC klasik, View berfungsi dengan output data serta-merta, tetapi dalam Joomla terdapat lapisan tambahan - Reka Letak, yang membolehkan anda mengatasi reka letak - salah satu ciri terpenting CMS ini. Reka letak teras ialah dijangka terletak dalam folder reka letak dalam akar tapak. Mereka lulus tatasusunan $displayData dengan semua data yang diterima daripada kaedah getLayoutData(). Kami menentukan reka letak keluaran yang hendak digunakan dalam harta kelas $layout.
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
Rakaman jenis ini agak biasa. Dalam Joomla, susun atur ialah laluan yang dipisahkan titik ke fail susun atur daripada folder susun atur di akar tapak. Iaitu, entri $layout = 'joomla.form.field.email' bermaksud bahawa reka letak akan digunakan apabila memaparkan medan susun atur/joomla/form/field/email.php.
<?php
use Joomla\CMS\Layout\LayoutHelper;
$displayData = [
'src' => $this->item->image,
'alt' => $this->item->name,
];
echo LayoutHelper::render(
'joomla.html.image',
$displayData
);
Begitu juga, contoh ini akan menggunakan reka letak layouts/joomla/html/image.php. Sesetengah reka letak boleh diganti dalam folder html templat tapak dan panel pentadbir.
Oleh itu, jika kita ingin melihat dengan tepat data yang datang kepada reka letak pada akhirnya dan bagaimana ia dipaparkan, pergi ke fail reka letak dan lihat.
Sekarang mari kita kembali kepada tugas utama artikel.
Contoh penting untuk kita pelajari (Joomla 5.0.1 pada masa menulis artikel ini):
Medan pilih modal kenalan tunggal daripada com_contacts semasa menulis artikel ini belum lagi ditukar kepada jenis medan universal satu dan hanya terletak pada (dalam Joomla 5.0.2, semasa artikel ini ditulis) pentadbir /components/com_contact/src/Field/Modal/ContactField.php. Ia mewarisi FormField secara langsung, bukan ModalSelectField.
Algoritma tindakan untuk menambah medan anda sendiri adalah seperti berikut:
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
Untuk memastikan semua yang berlaku dalam PHP menjadi jelas, anda perlu melihat susun atur keluaran medan terlebih dahulu. Ia ada dalam fail layouts/joomla/form/field/modal-select.php. Malah, 2 medan input adalah output - satu kelihatan, satu lagi tidak kelihatan. Tajuk artikel, kenalan atau produk yang dipilih dimasukkan dalam medan yang boleh dilihat dalam bentuk ruang letak - parameter $valueTitle. Dan yang kedua ialah idnya - $value. Jika kita belum memilih apa-apa lagi, mesti ada frasa dalam medan seperti "pilih artikel" atau "pilih produk". Ini ialah pemalar bahasa yang kami letakkan dalam atribut pembayang dalam medan XML atau dalam kaedah persediaan() kelas medan.
Semua parameter tersedia untuk reka letak output (yang bermaksud parameter yang boleh digunakan secara pengaturcaraan atau dalam fail XML):
<?php /** * Name of the layout being used to render the field * * @var string * @since 3.7 */ protected $layout = 'joomla.form.field.email';
Kelas medan, seperti yang anda duga, ada dalam pemalam saya. Caranya plugins/wtproductbuilder/providerjoomshopping/src/Field/ProductlistField.php. Saya mengambil medan pilih artikel modal tunggal sebagai asas dan mereka bentuk semula untuk memenuhi keperluan saya - memilih produk daripada kedai dalam talian JoomShopping. Kami melanjutkan kelas ModalSelectField induk dengan kelas kami sendiri.
Tugas saya termasuk hanya pemilihan produk, penyuntingan dan penciptaan tidak, jadi dalam teks artikel kita hanya bercakap tentang pemilihan produk. Kelas PHP adalah kecil, saya akan memberikannya secara keseluruhan dan mengulasnya.
<?php
use Joomla\CMS\Layout\LayoutHelper;
$displayData = [
'src' => $this->item->image,
'alt' => $this->item->name,
];
echo LayoutHelper::render(
'joomla.html.image',
$displayData
);
Secara berasingan, kaedah getValueTitle() telah diperkenalkan, yang menunjukkan nama entiti yang dipilih (nama produk, tajuk artikel, dll.) dalam kes apabila entiti tersebut telah dipilih dan disimpan. Iaitu, kami pergi untuk mengedit item menu, kami tidak menyentuh medan, tetapi kami ingin melihat tajuk artikel / nama produk dapat difahami oleh orang ramai, dan bukan hanya id. Kaedah ini menunjukkan tajuk yang diingini.
<field
type="productlist"
name="product_id"
addfieldprefix="Joomla\Plugin\Wtproductbuilder\Providerjoomshopping\Field"
label="Field label"
hint="Field placeholder"
/>
Dalam sesetengah medan yang memerlukan fungsi yang lebih kompleks - persatuan berbilang bahasa dan sebagainya - terdapat kaedah lain dalam kelas medan yang mengatasi kaedah asas kelas FormField:
Dalam kes kami, tidak ada keperluan sedemikian, jadi kami tidak menggunakannya.
Apabila anda mengklik pada butang "pilih", tetingkap Bootstrap modal dibuka, di mana senarai produk dibuka dalam