Magento2 Create a loader on layout pages using require js

Sometimes we need to customize our page and some ajax request needs loader to tell the user that some action is going on until the request gets completed. This notifies the user to wait for the response and not to do any other action like submitting twice the same form or reloading the page.

Let's see how we can achieve this through our custom module.

Step 1: Create our custom loader module registration files as module.xml.

Location: app/code/Magemeta/Loader/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Magemeta_Loader',
    __DIR__
);


Location: app/code/Magemeta/Loader/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magemeta_Loader" setup_version="1.0.0"></module>
</config>


Step 2: Create our custom loader block to render our custom js in defined layout.

Location: app/code/Magemeta/Loader/Block/Loader.php


<?php
namespace Magemeta\Loader\Block;

/**
* Class Loader
* @package Magemeta\Loader\Block
*/
class Loader extends \Magento\Framework\View\Element\Template
{
    /**
    * Loader constructor.
    * @param \Magento\Framework\View\Element\Template\Context $context
    */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }
}


Step 3: Create our custom loader frontend layout file to add loader script in specific layout.

Location: app/code/Magemeta/Loader/view/frontend/layout/customer_account_create.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.components">
            <block class="Magemeta\Loader\Block\Loader"  name="magemeta_loader" 
            template="Magemeta_Loader::loader.phtml"/>
        </referenceBlock>
    </body>
</page>


Step 4: Create our custom loader frontend template file to render loader script.

Location: app/code/Magemeta/Loader/view/frontend/templates/loader.phtml

<?php $jsUrl = $block->getViewFileUrl('Magemeta_Loader::js/loader.js') ?>
<script type="text/javascript" src="<?php echo $jsUrl; ?>"/>


Step 5: Create our custom loader frontend js file to write loader script.

Location: app/code/Magemeta/Loader/view/frontend/web/js/loader.js

require(['jquery'], function ($) {
    $(document).ready(function () {
        var pathname = window.location.pathname;
        if (pathname.indexOf('/customer/account/create/') != -1 ) {
            $('.save').add('.submit').on('click submit', function (e) {
                if ($('#form-validate').valid()) {
                    $('body').loader('show');
                } else {
                    $('body').loader('hide');
                }
            });
        }
    });
});


That's it! You are done with the custom loader module customization.
Hope this is helpful guys!

 

5 comments

  1. Hey. Thank you for this post, I have been searching for this for a long time.
    But I want to include the loader in customer login page. Which reference block should I use to acheive it? head.components doesn’t seem to work for cutsomer login.

  2. Hi Sidharth,

    In your case, I think if you change the layout handle “customer_account_login” as following:

    app/code/Magemeta/Loader/view/frontend/layout/customer_account_login.xml

    Then to this layout handle, either you add the js to “head.components” or directly to “head”, it will resolve your problem.

    Please let me know if you still face any issue.

    Thanks,
    Magemeta Support

    • Hey thanks for the reply
      What all changes must be done to the js file?

      As
      $(‘.save’).add(‘.submit’).on(‘click submit’, function (e) {
      //doesn’t seem to enter into this condition
      }

      what could be the new condition for login?

  3. Hey,
    Thanks for the reply, what all changes must be done in the js file. As

    $(‘.save’).add(‘.submit’).on(‘click submit’, function (e) {

    // doesn’t enter here

    }

    Is there a difference in the js for login

  4. Hi Sidharth,

    To the js file, you may need to do the following:

    Location: app/code/Magemeta/Loader/view/frontend/web/js/loader.js

    require([‘jquery’], function ($) {
    $(document).ready(function () {
    var pathname = window.location.pathname;
    if (pathname.indexOf(‘/customer/account/login/’) != -1 ) {
    $(‘.save’).add(‘.submit’).on(‘click submit’, function (e) {
    if ($(‘#form-validate’).valid()) {
    $(‘body’).loader(‘show’);
    } else {
    $(‘body’).loader(‘hide’);
    }
    });
    }
    });
    });

    Hope this helps you!

Leave a Reply