0

I would like to change the values for the media property for the files menu.js & responsive.js from media: '(min-width: 768px)' to media: '(min-width: 992px)'.

I thought using Magento's JS Mixin approach would be best as instead overriding these files entirly, with this approach I should be able to just change the media property.

So I created the requirejs-config.js file in my theme below, but it does't work. It does not load the mixin files from my theme or give any errors in the browser console.

app/design/frontend/Namespace/mytheme/Magento_Theme/requirejs-config.js

"use strict";
var config = {
    config: {
        mixins: {
            'Magento_Theme/js/responsive': {
                'Magento_Theme/js/responsive-mixin': true
            },
            'lib/web/mage/menu': {
                'Magento_Theme/js/menu-mixin': true
            }
        }
    }
};

app/design/frontend/Namespace/mytheme/Magento_Theme/web/js/responsive-mixin.js

define([
    'jquery',
    'matchMedia',
    'mage/tabs',
    'domReady!'
], function ($, mediaCheck) {
    'use strict';

    var mixin = {

        media: '(min-width: 992px)'
    };

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

I have cleared the cache and remove the static files. i.e.

bin/magento cache:clean
rm -rf pub/static/frontend/ var/view_preprocessed/

I'm not sure what else to do? Is it not possible to write a mixin for these files? Is there another approach I can take. Ideally, I would prefer not to have to overide the files entirely in my theme.

UPDATE

I have noticed if I try to add a mixin for another file it works... i.e.

"use strict";
var config = {
    config: {
        mixins: {
            'Magento_Ui/js/modal/confirm': {
                'Magento_Theme/js/test-mixin': true
            }
        }
    }
};

So is it that JS Mixins do not work for JS files which come from a parent theme or /lib directory?

Also, another way I can change the breakpoint in menu.js is to override the template in my theme and passing "mediaBreakpoint": "(max-width: 992px)" as one of the options

app/design/frontend/Namespace/mytheme/Magento_Theme/templates/html/topmenu.phtml

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>

<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>
<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"mediaBreakpoint": "(max-width: 992px)", "responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?= /* @escapeNotVerified */ $_menu ?>
        <?= /* @escapeNotVerified */ $block->getChildHtml() ?>
    </ul>
</nav>
0

I found the issue with the mixin for menu.js. It should use mage/menu rather than lib/web/mage/menu'

"use strict";
var config = {
    config: {
        mixins: {
            'mage/menu': {
                'Magento_Theme/js/menu-mixin': true
            }
        }
    }
};

And then in the menu-mixin.js file I have.

define([], function () {
    return function (widget) {
        widget.menu.prototype.options.mediaBreakpoint = "(max-width: 992px)";

        return widget;
    };
});

I'm still having the issue with Magento_Theme/js/responsive though, I think this may be because it is initialised in the deps block of parent theme's (blank) requirejs-config file rather than within a define block or with data-mage-init.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.