В данном примере приведена кастомизация упрощенного компонента авторизации/регистрации - 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');
После всех манипуляций, результат должен быть примерно таким для клиентской стороны
И таким, для профиля зарегистрировавшегося пользователя