Magento 2 Adicionar categoria Entrada de renderizador de árvore com botão modal

Estou tentando colocar a entrada de categoria para o meu formulário personalizado usando o formulário uicomponent.

Sou capaz de criar um menu suspenso, mas como posso criar o botão e abrir um novo modal a partir dele?

Posso criar um botão usando o uicomponent e abrir um modal a partir dele. Quero um botão em vez da nova categoria . Quero adicionar o botão selecionar produtos e adicionar a lista de produtos das categorias selecionadas na grade.

Aqui está o xml para criar a entrada de categoria

<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>

— Priyank
fonte

Até que eu possa entender o que está lá e talvez encontrar uma resposta, recomendo que você dê uma olhada na Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Categoriesaula. É o que adiciona o seletor de árvore de categorias à tela de adição / edição de produtos. Talvez você tenha mais sorte em entender o que há lá.

— Marius

@ Marius Ya, olhando a mesma coisa, parece que é a melhor maneira de fazê-lo.

— Priyank

Ei, acho que adicionar modificadores é usado apenas para a forma do produto e é muito difícil adicioná-lo ao modelo personalizado depois de procurá-lo por cerca de 3 dias. Acabei de receber o nome do elemento do componente de interface do usuário inválido: 'category_mapping_form'

— Priyank

Como as opções selecionadas funcionam aqui?

— Amrit Pal Singh

Este código abaixo trabalhando comigo:

     <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>

Este é o resultado:

Nota: Com as opções do item, você deve alterar xsi:type="object"e declarar uma classe para ele.

Espero que tenha sido útil!

— Thao Pham
fonte

minha preocupação não é como devo criar a árvore. Minha pergunta é criar um botão ao lado da lista suspensa, como mostrado na minha captura de tela, abrir um modal a partir dele e mostrar a lista de grade de produtos nela.

— Priyank

Como obter opções selecionadas nisso?

— Amrit Pal Singh