1

Im unable to successfully get masonry working for my Magento 2.0 theme. What i have done currently is i added the link to Masonry cdn to my file default_head_blocks.xml and also called the function from one of my CMS pages. But no luck, nothing works.

Here is my default_head_blocks.xml

    <?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
        <link src="https://fonts.googleapis.com/css?family=Roboto:400,300" src_type="url" /> 
        <link src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js" src_type="url" />         
    </head>
</page>

Here is CMS page content

    <div class="grid">
  <div class="grid-item">Grid 1</div>
  <div class="grid-item grid-item--width2"> Grid 2</div>
  <div class="grid-item">Grid 3</div>
</div>

<script>
$(function(){

    var $container = $('. grid');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.grid-item'
      });
    });

  });
</script>
|improve this question
6

Do not include JavaScript files in Magento 2 layout XML!

I'm using masonry on my M2 project, and want to share it with you.

To use masonry.js in Magento 2 add this piece of code to your template file (copy from vendor/magento/module-catalog/view/product/list.phtml to app/design/frontend/Vendor/Namespace/Magento_Catalog/templates/product/list.phtml):

<script>
// require the require function
requirejs( [ 'require', 'jquery', 'path/to/masonry.pkgd.js' ],
  function( require, $, Masonry ) {
    // require jquery-bridget, it's included in masonry.pkgd.js
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
      // make Masonry a jQuery plugin
      jQueryBridget( 'masonry', Masonry, $ );
      // now you can use $().masonry()
      $('.grid').masonry({...});
    }
  );
});
</script>

You need to use such construction to run masonry as jQuery plugin In my case it's look like this:

<script>
requirejs( [ 'require', 'jquery', 'Magefan_Blog/js/lib/masonry.pkgd.min' ],
function( require, $, Masonry ) {
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
        jQueryBridget( 'masonry', Masonry, $ );
        $('.post-list').masonry({
            itemSelector: '.post-holder',
            percentPosition: true
        })
    });
});
</script>

The source code you can find on github.

masonry.pkgd.min.js I have put to:

vendor/magefan/module-blog/view/frontend/web/js/lib/masonry.pkgd.min.js

Hope this helps someone.

If anybody have better suggestion, please let to know.

|improve this answer
  • Which M2 version was in use when you wrote this answer? – Max Mar 25 '17 at 1:33
0

You should try to use script tag to include your external js in layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    .......
    <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js" src_type="url" />         
</head>

|improve this answer
0

Utilize require-js to load masonry. On the website it is stated how it works. For Magento2:

  1. load the masonry.js into your themes web/js-folder.

  2. Register in require-js:

    var config = {

map: {
    '*': {
        'masonry' : 'js/masonry'
    }
},
"shim": {
    "masonry": ['jquery', 'jquery/ui'],
}
};

  3. put the code in your list.phtml

    requirejs( [ 'require', 'jquery', 'masonry' ],
function( require, $, Masonry ) {
// require jquery-bridget, it's included in masonry.pkgd.js
     require( [ 'jquery-bridget/jquery-bridget' ],
        function( jQueryBridget ) {
         // make Masonry a jQuery plugin
         jQueryBridget( 'masonry', Masonry, $ );
         // now you can use $().masonry()
         $('.grid').masonry({ 
           // your settings 
        });
      }
    );
  });
|improve this answer

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.