Кастомизация упрощенного компонента Simple

В данном примере приведена кастомизация упрощенного компонента авторизации/регистрации - bxmaker:authuserphone.simple. Добавим поле пригласительный код который будет сохраняться в профиле пользователя при регистрации.

Кастомизировать можно аналогичнои другие комопненты на vue - Simple, Edit, Enter

Добавление произвольного поля в профиль пользователя

В первую очередь необходимо добавить дополнительное поле в профиль пользователей с кодом например - UF_CODE.

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

Добавление обработчика для сохранения данных на серверной стороне

Так как логика компонента не ожидает какие-то дополнительные поля, то необходимо добавить обработчик события. В данном случае будем использовать событие вызываемое перед регистрацией пользователя. В нем проверим наличие нового поля и добавим значение в массив с описанием пользователя. Разместить код можно например в файле /bitrix/php_interface/init.php.

if (\Bitrix\Main\Loader::includeModule('bxmaker.authuserphone')) {

    //регистрируем событие, которое также вызывает модуль перед добавлением пользователя
    $eventManager = \Bitrix\Main\EventManager::getInstance();
    $eventManager->addEventHandler(
        "main",
        "OnBeforeUserRegister",
        "bxmaker_authuserphone_event_main_onBeforeUserRegister"
    );


    // непосредственно обработчик осбытия
    function bxmaker_authuserphone_event_main_onBeforeUserRegister(&$arFields)
    {
        $req = \Bitrix\Main\Application::getInstance()->getContext()->getRequest();

        // дополнитлеьные данные приходят в этом поле
        $arExpandData = $req->getPost('expandData');

        if (is_array($arExpandData) && isset($arExpandData['inviteCode'])) {
            $arFields['UF_CODE'] = trim(htmlentities($arExpandData['inviteCode'], ENT_QUOTES));
        }
        else
        {
            throw new \BXmaker\AuthUserPhone\Exception\BaseException('Не заполнено поле обязательное - Код приглашения', 'ERROR_INVITE_CODE');
        }
    }
}

Добавление кастомного поля ввода на клиентской стороне

Для реализации этой задачи необходимо написать мутацию компонента Vue и подключить как отдельный js файл или разместить код на странице перед вызовом компонента авторизации/регистрации по номеру телефона.

В данном случае сделаем отдельный js файл bxmaker.authuserphone.js.

  //название поле размещено здесь для примера, может быть определено и в другом месте и/или другим способом
    BX.message({
        'BXMAKER_AUTHUSERPHONE_SIMPLE_CUSTOM_UF_INVITE_CODE': 'Пригласительный код'
    });
    
    // сама мутация
    BX.Vue.mutateComponent('BXmakerAuthuserphoneSimplePhoneWrapper', 
        {
                data: function () {
                    return {
                        inviteCodeValue: '',
                    }
                },
                created() {
                    if (this.expandData && this.expandData.inviteCode) {
                        this.inviteCodeValue = this.expandData.inviteCode;
                    }
                },
                methods: {
                    // при вводе код, значение пердеадим в объект expandData в хранилище под своим ключем
                    // этот объект всегда передается на сервер с запросом
                    onInputInviteCode: function (value) {
                        this.setExpandData('inviteCode', value);
                    },
                },
                watch: {
                    'expandData.inviteCode': function (val) {
                        this.inviteCodeValue = val;
                    },
                },
                template: '<div>' +
                    '<slot name="header" />' +
                    '<slot name="message" />' +

                    '<BXmakerAuthuserphoneInput :title="$root.localize.BXMAKER_AUTHUSERPHONE_SIMPLE_CUSTOM_UF_INVITE_CODE"' +
                    ':value="inviteCodeValue"' +
                    '@onInput="onInputInviteCode"' +
                    '@onEnter="onInputInviteCode"' +
                    'name="INVITE_CODE" />' +

                    '<slot name="phone" />' +
                    '<slot name="captcha" />' +
                    '<slot name="button" />' +
                    '</div>' +
                    ''
            });

Переносим созданный файл в шаблон сайта в директорию {путь до шаблона сайта}/js/vue/ и подключаем в шапке сайта (файл header.php) например так

$Asset = \Bitrix\Main\Page\Asset::getInstance();
$Asset->addJs(SITE_TEMPLATE_PATH . '/js/vue/bxmaker.authuserphone.js');

Результат

После всех манипуляций, результат должен быть примерно таким для клиентской стороны

И таким, для профиля зарегистрировавшегося пользователя