Home > database >  Magento accessing jsLayout config data from a mixin
Magento accessing jsLayout config data from a mixin

Time:09-18

I want to extend the functionality of a knockout component. I have added the config to the xml file in question:

<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
...
            <item name="example">
                ... other properties of the component
                <item name="config" xsi:type="array">
                    <item name="SomeConfigVariable" xsi:type="string">true</item>
                </item>
            </item>
...
        </item>
    </argument>
</arguments>

I have included the mixin using my modules requirejs-config.js, I can see it hit a breakpoint in my browser.

var config = {
    config: {
        mixins: {
            "Magento_MODULE/js/view/example": {
                "VENDOR_MODULE/js/view/example-mixin": true,
            }
        },
    },
};

However I can't seem to find the code necessary to get my config data, I have tried this:

define(["ko"], function (ko) {
    var mixin = {
        imports: {
            someConfigVariable: "${ $.SomeConfigVariable }", // Doesn't seem to do anything
        },

        initialize: function () {
            this.someConfigVariable = false; // Default value
            this._super();
            return this;
        },
    };

    return function (target, config) { // config is undefined
        return target.extend(mixin);
    };
});

What am I missing?

CodePudding user response:

The mixin code is not strictly neceesary. Setting it as a default like so:

define(["ko"], function (ko) {
    var mixin = {
        defaults: {
            someConfigVariable: false,
        },

        initialize: function () {
            this._super();
            return this;
        },
    };

    return function (target) {
        return target.extend(mixin);
    };
});

and updating the layout xml to look like so:

<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
...
            <item name="example">
                ... other properties of the component
                <item name="config" xsi:type="array">
                    <item name="SomeConfigVariable" xsi:type="boolean">true</item> <!-- Note the xsi:type as boolean -->
                </item>
            </item>
...
        </item>
    </argument>
</arguments>

Gets me the desired result when running the component. Magento does some magic with the config element before hitting the initConfig method.

  • Related