Magento 2.2 Добавить кладку JS

У меня проблема с включением Masonry JS в мой Magento 2.2

У меня есть пользовательская тема в приложении/дизайне/интерфейсе/пользовательском вендоре/пользовательской теме В этой папке у меня есть веб/папка, а внутри я requirejs-config.js 

var config = {

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

    deps: [
        "js/custom-masonry"
    ]

};

В этой же папке у меня есть папка js/. Внутри у меня каменная кладка на заказ.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'
        });

    });

});

Консоль покажет мне, что enter image description here Я думаю, что проблема в том, когда jQuery загружен, и он загружен до моей кладки.

Author: Aasim Goriya, 2017-10-26
Source

2 answers

Пожалуйста, переместите "DOMReady" перед "masonry" в поле требуется или обновите свой js следующим образом.

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
Author: Aasim Goriya, 2019-01-21 08:06:37

Ответ Аасима выглядит правильным, так как вам нужно использовать метод vanilla JS, если нет, то вот как я заставил его работать.

Я реализовал его, чтобы его можно было легко повторно использовать в других шаблонах, просто пропустив родителя и ребенка в сценарии x-magento-init.

Требуется Конфигурация

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();
    };
});

И в моем шаблоне PHTML

<script type="text/x-magento-init">
    {
        ".brands-page": {
            "masonryInit": {
                "masonryParent": ".brands-page__brands",
                "masonryChild": ".brands-page__collection"
            }
        }
    }
</script>
 2
Author: Ben Crook, 2017-10-26 14:18:30