3

I've a problem to include Masonry JS to my Magento 2.2

I've a custom theme in app/design/frontend/CustomVendor/CustomTheme In this folder I've a web/ folder and inside I've requirejs-config.js

var config = {

    map: {
        '*': {
            'masonry' : 'js/masonry.pkgd.min'
        }
    },

    deps: [
        "js/custom-masonry"
    ]

};

In this same folder I've js/ folder. Inside I've custom-masonry.j

require([
    'jquery',
    'masonry',
    'domReady'
], function ($, domReady, masonry) {

    console.log("custom-masonry.js");

    domReady(function() {

        console.log("domReady");

        $('.contents-items').masonry({
            columnWidth: 200,
            itemSelector: '.content-items'
        });

    });

});

Console show me that enter image description here I think the problem is when jQuery is loaded and it's loaded before my Masonry.

2 Answers 2

2

Please move 'domReady' before 'masonry' in require or update you js with following.

require([
    'jquery',
    'domReady',
    'masonry'
], function ($, domReady, Masonry) {
 domReady(function() {
     console.log("domReady");
        var elem = document.querySelector('.contents-items');
         var msnry = new Masonry( elem, {
                itemSelector: '.content-item'
         });

    });

});
2
  • Done, but now I've a other error -> Uncaught TypeError: $(...).masonry is not a function Commented Oct 26, 2017 at 13:30
  • Please try my updated ans Commented Oct 26, 2017 at 13:36
2

Aasim's answer looks to be correct as you need to use the vanilla JS method, if not then this is how I got it working.

I implemented it so it can easily be reused in other templates just by passing the parent and child through in the x-magento-init script.

Require Config

var config = {
    map: {
        '*': {
            masonry: 'js/vendor/masonry/masonry.min',
            masonryInit: 'js/masonry-init',
        }
    }
};

masonry-init.js

define(['jquery', 'masonry', 'domReady!'], function($, Masonry) {
    return function(config) {
        var brandsLayout = {
            init: function() {
                this.initMasonry();
            },

            initMasonry: function() {
                var msnry = new Masonry( config.masonryParent, {
                    columnWidth: config.masonryChild,
                    itemSelector: config.masonryChild,
                    horizontalOrder: true,
                    percentPosition: true
                });
            }
        };

        brandsLayout.init();
    };
});

And in my PHTML template

<script type="text/x-magento-init">
    {
        ".brands-page": {
            "masonryInit": {
                "masonryParent": ".brands-page__brands",
                "masonryChild": ".brands-page__collection"
            }
        }
    }
</script>
1
  • 1
    Note I use domReady! with an exclamation mark so I don't have to use the domReady() function.
    – Ben Crook
    Commented Oct 26, 2017 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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