Magentoのローディング表示制御

こんにちは！

前回、基本編としてMagetnoのローディングマスクの表示方法について解説しました。今回は実践に近いところでAjaxでの利用方法について書いてみたいと思います。

おさらい

簡単に前回のおさらい。
Magentoではmage/loaderが既にbodyにバインドされているため、下記を実行する事でローディングマスクの表示を制御することが出来ました。

$('body').trigger('processStart');     // ローディングマスクが表示される
$('body').trigger('processStop');     // ローディングマスクが解除される

では、Ajax通信の時にローディングマスクを表示するにはどうすればよいでしょうか。

一般的な実装方法

すぐ思い付くのは、下記のような方法です。

define([
    'jquery'
], function ($) {
    'use strict';

    $('#fs-loading-overlay-btn').on('click', function () {
        // Ajax実行前にローディングを表示
        $('body').trigger('processStart');

        $.ajax({
            url: '/rest/V1/some/endpoint',  // 適切なエンドポイントに置き換えてください
            method: 'GET'
        })
            .done(function () {
                // 正常時の処理
            })
            .fail(function () {
                // エラー時の処理
            })
            .always(function () {
                // ここでローディングを非表示にする
                $('body').trigger('processStop');
            });
    });
});

よくある実装例です。
ajaxの呼び出し前に、processStartをしておき、ajaxの処理が終わった後に呼ばれるPromiseのalways内（またはcompleteコールバック内）でprocessStopをすれば、Ajax通信中にローディングマスクが表示されます。

これでも全然かまわないのですが、実はもっと簡単なやり方があります。

Magento独自の設定「showLoader」

Magentoでは$.ajaxの設定にshowLoaderという項目が追加されています、これを指定するだけでAjax通信時に自動的にローディングマスクが表示されます。

define([
    'jquery'
], function ($) {
    'use strict';

    $('#fs-loading-overlay-btn').on('click', function () {
        $.ajax({
            url: '/rest/V1/some/endpoint',  // 適切なエンドポイントに置き換えてください
            method: 'GET',
            showLoader: true      // これを指定するだけで自動的にローディングが表示される
        })
            .done(function () {
                // 正常時の処理
            })
            .fail(function () {
                // エラー時の処理
            });
    });
});

非常に簡単ですね！

どういう仕組みで機能しているのか

簡単すぎてこれだけだと記事として面白みが無いので、どのようにしてこれが機能しているかを少し解説してみたいと思います。

lib/web/mage/loader.jsでは、2つのローディング表示制御の仕組みが備わっています。
1つはmage.loaderウィジェットで、これはローディング表示制御を行う基本的な機能です。
もう一つはmage.loaderAjaxウィジェットで、こちらはAjax処理用に用意されているものです。
Magentoでは、mage.loaderとmage.loaderAjaxのどちらもが機能するように定義されています。

lib/web/mage/loader.jsのソースコードを確認してみると、

mage.loaderAjaxは、Ajaxのイベントをキャッチして動作するようになっています。Ajaxが実行されたとき、documentオブジェクトのajaxSendイベントがトリガーされます。
mage.loaderAjaxではこのイベントをキャッチすると、_onAjaxSendメソッドが呼び出され、その中でshowLoaderオプションがtrueに設定されているかどうかを判断してprocessStartをトリガーするようになっています。また、Ajaxが完了したときは、documentオブジェクトのajaxCompleteイベントがトリガーされます。このイベントをキャッチした場合は_onAjaxCompleteメソッドが呼び出され、その中でshowLoaderオプションを判断してprocessStopがトリガーされるようになっています。