Magento 2 Tambahkan Kategori Tree Renderer Input Dengan Tombol Modal


13

Saya mencoba menempatkan input kategori untuk formulir kustom saya menggunakan formulir uicomponent.

masukkan deskripsi gambar di sini

Saya dapat membuat dropdown tetapi bagaimana saya bisa membuat tombol dan membuka modal baru darinya?

Bisakah saya membuat tombol menggunakan uicomponent dan membuka modal dari itu. Saya ingin tombol bukan dari kategori baru saya ingin menambahkan tombol pilih produk dan ingin menambahkan acara daftar produk dari yang dipilih kategori dalam grid.

Berikut ini adalah xml untuk membuat input kategori

<field name="parent">
    <argument name="data" xsi:type="array">
    <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
     <item name="config" xsi:type="array">
          <item name="label" xsi:type="string" translate="true">Parent Category</item>
          <item name="componentType" xsi:type="string">field</item>
          <item name="formElement" xsi:type="string">select</item>
          <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
           <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
           <item name="dataScope" xsi:type="string">data.parent</item>
           <item name="filterOptions" xsi:type="boolean">true</item>
           <item name="showCheckbox" xsi:type="boolean">false</item>
           <item name="disableLabel" xsi:type="boolean">true</item>
           <item name="multiple" xsi:type="boolean">false</item>
           <item name="levelsVisibility" xsi:type="number">1</item>
           <item name="sortOrder" xsi:type="number">20</item>
           <item name="required" xsi:type="boolean">true</item>
           <item name="validation" xsi:type="array">
                  <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="listens" xsi:type="array">
                  <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
             </item>
      </item>
     </argument>
</field>

Sampai saya dapat memahami apa yang ada di sana dan mungkin memberikan jawaban, saya dapat merekomendasikan Anda untuk melihat Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Categorieskelas. Ini adalah salah satu yang menambahkan pemilih kategori pohon ke layar tambah / edit produk. Mungkin Anda lebih beruntung memahami apa yang ada di sana.
Marius

@Marius Ya melihat hal yang sama sepertinya itulah cara terbaik untuk melakukannya.
Priyank

Hai Saya pikir menambahkan pengubah hanya digunakan untuk bentuk produk dan sangat sulit untuk menambahkannya untuk model kustom setelah mencari sekitar 3 hari saya sudah gila. Saya baru saja mendapatkan nama elemen Komponen UI yang Tidak Valid: 'category_mapping_form'
Priyank

Bagaimana cara opsi yang dipilih bekerja di sini?
Amrit Pal Singh

Jawaban:


3

Kode di bawah ini bekerja dengan saya:

     <container>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
            <item name="formElement" xsi:type="string">container</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
        </item>
        </argument>
        <field name="category_ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="chipsEnabled" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string">Categories</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                    <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    <item name="options" xsi:type="array">
                            <item name="0" xsi:type="array">
                                <item name="value" xsi:type="number">1</item>
                                <item name="label" xsi:type="string" translate="true">Category 1</item>
                                <item name="optgroup" xsi:type="array">
                                    <item name="0" xsi:type="array">
                                        <item name="value" xsi:type="number">2</item>
                                        <item name="is_active" xsi:type="boolean">true</item>
                                        <item name="label" xsi:type="string" translate="true">Category 1.1</item>
                                    </item>
                                </item>
                            </item>
                            <item name="1" xsi:type="array">
                                <item name="value" xsi:type="number">2</item>
                                <item name="is_active" xsi:type="boolean">true</item>
                                <item name="label" xsi:type="string" translate="true">Category 2</item>
                            </item>
                    </item>
                   <item name="config" xsi:type="array">
                       <item name="dataScope" xsi:type="string">category_ids</item>
                   </item>
                </item>
            </argument>
        </field>
    </container>

Ini hasilnya:

Demo

Catatan: Dengan opsi item, Anda harus mengubah xsi:type="object"dan mendeklarasikan Kelas untuknya.

Saya harap ini membantu!


1
Kekhawatiran saya bukanlah bagaimana saya harus membuat pohon. Pertanyaan saya adalah membuat tombol di samping drop down seperti yang ditunjukkan pada tangkapan layar saya dan membuka modal dari itu dan untuk menampilkan daftar kotak produk di dalamnya.
Priyank

Bagaimana cara mendapatkan opsi yang dipilih dalam hal ini?
Amrit Pal Singh
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.