Magento Question posted in
The official documentation can be found here.

How do I extend loader widget in Magento 2 so that a background image is shown everytime the loader appears

I have been trying to extend magento 2’s $.mage.loader widget. I have have a requirejs-config.js file with the following lines

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

And the content of custom-mage-loader.js file is 

  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;
});

i have confirmed that this file loads in the browser but it just doesn’t work. The loader works normally during page load and I see error message –

Base is not a function

What am I doing wrong?

Tags:

2

Answers


  1. 0

    Your requirejs-config.js it’s right, but your js file no, change the params like this:

    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;
});

    Now use: jQuery(‘body’).loader(‘show’) and see your new custom loader!

    Login or Signup to reply.
  2. 0

    Its been a while but if anybody else stumbles upon this answer.

    vjurado is not correct. The mistake lays in requirejs-config.js. Correct will be a reference withouth the “mage/”, like this:

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

    The custom-mage-loader.js is correct as posted in the initial question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search