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/[email protected]/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>
2 Answers 2
Utilize require-js to load masonry. On the website it is stated how it works. For Magento2:
- load the
masonry.jsinto your themesweb/js-folder. Register in require-js:
var config = { map: { '*': { 'masonry' : 'js/masonry' } }, "shim": { "masonry": ['jquery', 'jquery/ui'], } };put the code in your
list.phtmlrequirejs( [ '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 }); } ); });
answered Mar 25, 2017 at 10:09
Max
1,8645 gold badges31 silver badges52 bronze badges
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/[email protected]/dist/masonry.pkgd.min.js" src_type="url" />
</head>
answered Jan 26, 2016 at 7:56
mrtuvn
3,2935 gold badges29 silver badges40 bronze badges
default
<head><link src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js" src_type="url" /> </head>for external js follow this magento.stackexchange.com/questions/98091/…