Как расширить виджет загрузчика в Magento 2, чтобы фоновое изображение отображалось при каждом запуске загрузчика

Question

Я пытался расширить виджет $.mage.loader magento 2. У меня есть файл requirejs-config.js со следующими строками

var config = {
    map: {
        '*': {
            'mage/loader' : 'Youssuph_Bakerscheckout/js/custom-mage-loader'
        }
    }
};

А содержимое custom-mage-loader.js файла

  define([
    'jquery',
    'mage/template',
    'jquery/ui',
    'mage/translate'], 

function ($, mageTemplate) {

    'use strict';

    $.widget("bakers.loader", $.mage.loader, {

         options: {
                icon: '',
                texts: {
                    loaderText: $.mage.__('Please wait...'),
                    imgAlt: $.mage.__('Loading...')
                },
                template:
                    '<div class="loading-mask" data-role="loader">' +
                        '<div class="loader">' +
                            '<img alt="<%- data.texts.imgAlt %>" src="'+loadingBakersLogo+'">' +
                            '<p><%- data.texts.loaderText %></p>' +
                        '</div>' +
                    '</div>'
            }
    });
    return $.bakers.loader;
}); 

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

База не является функцией

Что я делаю не так?

Answer 1

Прошло много времени, но если кто-нибудь еще наткнется на этот ответ.

Вьюрадо не правильно. Ошибка лежит в requirejs-config.js. Правильным будет ссылка без «мага», например:

var config = {
    map: {
        '*': {
            'loader' : 'Youssuph_Bakerscheckout/js/custom-mage-loader'
        }
    }
};

Значение custom-mage-loader.js верно, как указано в исходном вопросе.

Answer 2

Ваш requirejs-config.js все верно, но ваш файл js нет, измените параметры следующим образом:

define([
    'jquery',
    'jquery/ui',
    'mage/loader'],
function ($) {

    $.widget('your_namespace.loader', $.mage.loader, {
        options: {
            texts: {
                loaderText: $.mage.__('Foo')
            },
            template:
                '<div>Your template</div>'
        }
    });

    return $.your_namespace.loader;
});

Теперь используйте: jQuery ('body'). Loader ('show') и посмотрите ваш новый пользовательский загрузчик!