События в JS

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

Чтобы подписаться на них необходимо на странице добавить следующйи код

<script type="text/javascript">
$(document).on("bxmaker.authuserphone.ajax", function(event, data){
    console.log(' событие в компоненте авторизации',  data);
});
</script>

Этот код работает для старых компонентов

Отправка в Яндекс Метрику данных о достижении цели

Для примера приведем пример отправки данных о достижении цели в яндекс метрику, а именно нам нужны цели - успешная авторизация и успешная регистрация. Размещаем следующий код в шаблоне сайта для простоты, в футере например.

<script type="text/javascript">
       $(document).on("bxmaker.authuserphone.ajax", function(event, data){
            // можно раскомментировать строчку и вывести все дсотупные данные в консоль браузера, чтоб
            // мобифицировать обарботчик под свою задачу
            // console.log('bxmaker.authuserphone.ajax', data);
            
            if(data.result && data.result.response && data.result.response.type)
            {
                switch (data.result.response.type) {                    
                    case 'AUTH': {
                        // авторизация прошла успешно
                        // выполняем необходимые действия,
                        // можно переадресовать куда то, или напримре отправить данные о достижении цели в метрику

                        // отправка данных о достижении javascript события, заменить XXXX на номер счетчика
                        console.log('AUTH');
                        ym(XXXX, "reachGoal", "authSuccess");
                        
                        
                        break;
                    }

                    case 'REGISTER': {
                        // регистрация прошла успешно
                        // выполняем необходимые действия,
                        // можно переадресовать куда то, или напримре отправить данные о достижении цели в метрику

                        // отправка данных о достижении javascript события, заменить XXXX на номер счетчика
                        console.log('REGISTER');
                        ym(XXXX, "reachGoal", "registerSuccess");

                        break;
                    }
                }
            }
            else if(data.result && data.result.error)
            {
                // если произошла ошибка
            }
        })
</script>

Для упрощенного входа

В компоненте bxmaker:authuserphone.simple используется Vue, поэтому для отслеживания авторизации и отправки данных в метрику. необходимо использовать код ниже. Событие вызывается только при успешной авторизации/регистрации.

BX.Vue.event.$on('BxmakerAuthuserphoneConfirmCheckSuccess',(data) => {  
  // data -  {response: Object , rand: string, type: string}
  
    
    // здесь может быть отправка в метрику данные
    // отправка данных о достижении javascript события, заменить XXXX на номер счетчика
   console.log('AUTH');
   ym(XXXX, "reachGoal", "authSuccess");

});

Для более сложных задач можно написать мутацию компонента, которая есть в примере наложения маски на поле ввода для упрощенного входа