Magento2 JavaScript mixins介紹

使用mixin可以讓一個class的方法去增加或混合到另一個class裡, 而不用整個class去繼承或覆寫原本的基礎class, 大大增加了開發的彈性, 此篇就要來介紹, 要如去使用mixin方法在Magento2專案裡。

範例:

延展UI component

此示範如何新增一個function至目標component, 使其component屬性可增加

File: ExampleCorp/Sample/view/base/web/js/columns-mixin.js

define(function () {
    'use strict';

    var mixin = {

        /**
         *
         * @param {Column} elem
         */
        isDisabled: function (elem) {
            return elem.blockVisibility || this._super();
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../columns returns.
        return target.extend(mixin); // new result that all other modules receive
    };
});

延展 jQuery Widget

下面範例為將Widget modal新增一個功能「是否關閉視窗?」。

File: ExampleCorp/Sample/view/base/web/js/modal-widget-mixin.js

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

    var modalWidgetMixin = {
        options: {
            confirmMessage: "Please, confirm modal closing."
        },

        /**
         * Added confirming for modal closing
         *
         * @returns {Element}
         */
        closeModal: function () {
            if (!confirm(this.options.confirmMessage)) {
                return this.element;
            }

            return this._super();
        }
    };

    return function (targetWidget) {
        // Example how to extend a widget by mixin object
        $.widget('mage.modal', targetWidget, modalWidgetMixin); // the widget alias should be like for the target widget

        return $.mage.modal; //  the widget by parent alias should be returned
    };
});

延展 JS 物件

另一種案例是使用wrapper去包住指定的function, 來去修改或延展此function的邏輯功能.

File: ExampleCorp/Sample/view/frontend/web/js/model/step-navigator-mixin.js

define([
    'mage/utils/wrapper'
], function (wrapper) {
    'use strict';

    return function (stepNavigator) {
        stepNavigator.setHash = wrapper.wrapSuper(stepNavigator.setHash, function (hash) {
            this._super(hash);
            // add extended functionality here or modify method logic altogether
        });

        return stepNavigator;
    };
});

延展 JS 功能

此範例使用wrapper在結帳步驟添加其他function的方法

File: ExampleCorp/Sample/view/frontend/web/js/proceed-to-checkout-mixin.js

define([
    'mage/utils/wrapper'
], function (wrapper) {
    'use strict';

    return function (proceedToCheckoutFunction) {
        return wrapper.wrap(proceedToCheckoutFunction, function (originalProceedToCheckoutFunction, config, element) {
            originalProceedToCheckoutFunction(config, element);
            // add extended functionality here
        });
    };
});

以上所有的mixin都需要再requirejs-config.js檔案進行宣告, 且此檔案要放置在特定的位置才能正常運行, 如下所示

File: ExampleCorp/Sample/view/base/requirejs-config.js

var config = {
 config: {
     mixins: {
         'Magento_Ui/js/grid/controls/columns': {
             'ExampleCorp_Sample/js/columns-mixin': true
         },
         'Magento_Ui/js/modal/modal': {
             'ExampleCorp_Sample/js/modal-widget-mixin': true
         },
         'Magento_Checkout/js/model/step-navigator': {
             'ExampleCorp_Sample/js/model/step-navigator-mixin': true
         },
         'Magento_Checkout/js/proceed-to-checkout': {
             'ExampleCorp_Sample/js/proceed-to-checkout-mixin': true
         }
     }
 }
};

以下範例為覆寫mixin的方法:

File: ExampleCorp/CartFix/view/base/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'ExampleCorp_Sample/js/original-add-to-cart-mixin': false,
                'ExampleCorp_CartFix/js/overwritten-add-to-cart-mixin': true
            }
        }
    }
};

File: ExampleCorp/CartFix/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="ExampleCorp_CartFix" setup_version="0.0.1">
        <sequence>
            <module name="ExampleCorp_Sample" />
        </sequence>
    </module>
</config>

以上就是本篇的分享呦！大家都知道該如何做了嗎？喜歡歐斯瑞的讀者們，記得追蹤我們的FB粉絲團及IG，也別忘了訂閱電子報，隨時掌握第一消息喔！若有任何問題，歡迎隨時與我們聯繫。

參考資料:https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_mixins.html

Magento, 技術應用

Magento2 JavaScript mixins介紹