Кнопка добавления в Magento 2

Question

Я пытаюсь добавить кнопку в форму адреса клиента.Но я не знаю, как это сделать с помощью customer_form.xml файл.Если кто-нибудь знает, пожалуйста, предложите мне.

Я зарегистрировал управление кнопками на ui_definition.xsd и ui_components.xsd файл, но все равно он отображается как textbox вместо кнопки.

Мой Код таков

Magento/Ui/etc/ui_definition.xsd

<xs:complexType name="definition">
        <xs:annotation>
            <xs:appinfo>Registering components in the system and basic setup</xs:appinfo>
            <xs:documentation>Registering components in the system and basic setup</xs:documentation>
        </xs:annotation>
        <xs:all>
            <!-- Components list -->
            <xs:element type="tab" name="tab"/>
            <xs:element type="dataSource" name="dataSource"/>
            <xs:element type="paging" name="paging"/>
            <xs:element type="massaction" name="massaction"/>
            ..... etc
            <!--Custom Button Start-->
            <xs:element type="button" name="button"/>
            <!--Custom Button End-->
        </xs:all>
    </xs:complexType>

Magento/Пользовательский интерфейс/etc/ui_components.xsd

<!--Custom Button Start-->
    <xs:complexType name="button">
        <xs:complexContent>
            <xs:extension base="ui_element">
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:group ref="configurable"/>
                </xs:choice>
            </xs:extension>
        </xs:complexContent>
    </xs:complexType>
    <!--Custom Button End-->

и я создал Класс Button.php От Magento/Ui/Component/Form/Element

<?php

namespace Magento\Ui\Component\Form\Element;

/**
 * Class Button
 */
class Button extends AbstractElement
{
    const NAME = 'button';

    /**
     * Get component name
     *
     * @return string
     */
    public function getComponentName()
    {
        return static::NAME;
    }
}

и, наконец, я создал поле из customer_form.xml файл

<field name="button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">button</item>
                    <item name="formElement" xsi:type="string">input</item>
                </item>
            </argument>
        </field>

Работает без ошибок, но вместо кнопки отображается текстовое поле.Не могли бы вы, пожалуйста, подсказать мне, где я пошел не так?

Answer 1

Я не уверен, что это правильно, но он работал для меня

Приложение / код / Magento / ui / View / base / web / шаблоны / form / components / collection.html

<li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
          // put your code here

.

Но лучший способ прямо здесь не изменяется, вы можете переопределить этот файл в пользовательском модуле.

Не забудьте промыть папку кэша, а также статическое содержимое и запустить команду grunt exec:backend после изменения этого файла.

Answer 2

Извините, что это не полный ответ, а скорее указание в "правильном" направлении.

Существует набор элементов, которые могут быть вызваны внутри Magento/Ui система.Их можно найти в разделе app/code/Magento/Ui/Component/Form/Element/.

Здесь по умолчанию вы увидите:

1. Checkbox.php
2. Input.php
3. Multiline.php
4. MultiSelect.php
5. Radio.php
6. Range.php
7. Select.php
8. Textarea.php

Эти элементы настраиваются в файле определения app/code/Magento/Ui/view/base/ui_component/etc/definition.xml.Например, флажок выглядит следующим образом:

<checkbox class="Magento\Ui\Component\Form\Element\Checkbox">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/field</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
            </item>
        </item>
    </argument>
</checkbox>

Из того, что я могу видеть из моего быстрого просмотра, должно быть возможно добавить ваш собственный тип с помощью такого определения, хотя я не уверен в том, как это работает.Вам нужно будет добавить сюда свой собственный шаблон элемента, настройки по умолчанию можно найти в разделе app/code/Magento/Ui/view/base/web/templates/form/element/*.html

Вы можете видеть, что файл definition.xml добавляется через di следующим образом:

<virtualType name="uiDefinitionFileCollector" type="Magento\Framework\View\Element\UiComponent\Config\FileCollector\AggregatedFileCollector">
    <arguments>
        <argument name="searchPattern" xsi:type="string">etc/definition.xml</argument>
    </arguments>
</virtualType>

Таким образом, вы должны иметь возможность добавить свой собственный definition.xml файл в свой модуль, и он будет принят.

Извините, что это не полный ответ, но это должно быть хорошим началом в "правильном" направлении.

Answer 3

Я написал сегодня простой способ реализации ваших требований с использованием смеси.

Чтобы настроить микну, создайте файл reitjs-config.js в вашей обзоре / базовой папке модуля, который будет проходить микн

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/form/components/collection': {              
            'Mbs_AddButtonInCustomerAddressForm/js/address/collection':true
            }
        }
    }
}

.

Затем в файле JS, определенного в смеси выше: вы можете перезаписать шаблон, чтобы он использовал шаблон в вашем модуле

Образец файла JS ниже:

define([], function () {
    'use strict';

    return function (addressCollection) {
        const orig = addressCollection.defaults;
        orig.template = 'Mbs_AddButtonInCustomerAddressForm/collection';
        orig.buttonExtraLabel = 'Click Me';

        return addressCollection;
    }
});

.

Наконец в пользовательском шаблоне вы можете добавить кнопку.

Это решение не прикасает к файлу сердечника из Magento, и поэтому вы будете соблюдать дополнительные релизы из Magento

У меня есть полный репозиторий кода, показывающий, как выполнить ключи URL и Rewrite URL-адреса по адресу: https:// bitbucket.org / Magstaging / addbuttonincustomeraddressform