How to initialize a block loader Magento 2

How to initialize a block loader Magento 2

Did you want to add loader into **templates/cart/totals.phtml**
These some ways to add loader spinner into block or page.

1 Use: <div data-bind=”blockLoader: isLoadding”> /** Block Content HTML */ </div>,

with this option you should add **isLoadding : ko.observable(false)** into your Component

Example:
Block XML Define

<block class="Magento\Framework\View\Element\Template" name="block-name"
       template="Namespace_ModuleName::templates.phtml">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="scope_name" xsi:type="array">
                    <item name="component" xsi:type="string">Namespace_ModuleName/js/componentjsfile</item>
                </item>
            </item>
        </argument>
    </arguments>
</block>

 

Block templates.phtml CODE

<div id="abc-def" data-bind="scope: 'scope_name'">
    <div class="product-wizard-selections" data-bind="blockLoader: isLoading">
        <div class="cart table-wrapper">
            HTML CONTENT
        </div>
    </div>
</div>

 

Script

<script type="text/x-magento-init">
{
    "#abc-def": {
        "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout(); ?>
    }
}
</script>

 

**Javascript code: Namespace_ModuleName/js/componentjsfile**

define([
    'uiComponent',
    'ko'
], function (Component, ko){
    return Component.extend({
        defaults: {
            addToCartTitle: 'Add To Cart'
        },
        isLoading: ko.observable(false),
        initObservable: function () {
            this._super();
            this.isLoading(true);
        }
    });
});

 

2: With **<div class=”loader”>** using **rjsResolver**

**js file named “Namespace_ModuleName/js/abc“**

define([
        'rjsResolver',
    ], function (resolver) {
        'use strict';

        /**
         * Removes provided loader element from DOM.
         *
         * @param {HTMLElement} $loader - Loader DOM element.
         */
        function hideLoader($loader) {
            let defaultValue = this;
            $loader.parentNode.removeChild($loader);
        }

        /**
         * Initializes assets loading process listener.
         *
         * @param {Object} config - Optional configuration default data after loaded component
         * @param {HTMLElement} $loader - Loader DOM element.
         */
        function init(config, $loader) {
            resolver(hideLoader.bind(config, $loader));
        }

        return init;
    });

 

**PHTML file**

<div id="block-loader-id" data-role="abc-loader" class="loading-mask" data-mage-init='{"Namespace_ModuleName/js/abc": {}}'>
    <div class="loader">
        <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
             alt="<?= /* @escapeNotVerified */__('Loading...') ?>" style="position: absolute;">
    </div>
</div>
<script>
    require([
        'mage/url',
        'Magento_Ui/js/block-loader'
    ], function (url, blockLoader) {
        blockLoader("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>");
        return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>');
    });
</script>

 

Please follow and like us:
error

One thought on “How to initialize a block loader Magento 2

  1. Thanks for the guidelines you have contributed here. Yet another thing I would like to mention is that pc memory requirements generally go up along with other innovations in the know-how. For instance, if new generations of cpus are introduced to the market, there is usually a corresponding increase in the size and style preferences of both laptop or computer memory as well as hard drive space. This is because the software operated by way of these cpus will inevitably boost in power to make new technological innovation.

Leave a Reply

Your email address will not be published.

Follow by Email
Facebook
Facebook
LinkedIn