如何在Magento 2中扩展加载器小部件，以便每次加载器出现时都显示背景图像

Question

我一直在尝试扩展magento 2的$.mage.loader小部件。我有一个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没错，但是你的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'(，看看你新的自定义加载器！

Answer 2

已经有一段时间了，但如果其他人偶然发现了这个答案。

维尤拉多是不正确的。错误在于requirejs-config.js.正确的是没有"法师/"的引用，如下所示：

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

custom-mage-loader.js是正确的，如初始问题中发布的那样。