Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I have tried to add materialize js to Magento 2 but it does not work. I have my materialize js in theme/web/js.
then I have the requirejs-config.js in theme/
this is the code:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/materialize"
]
};
and I put my materialize.js inside this code:
define([
"jquery"
],
function($) {
add below code in requirejs-config.js of respective theme.
var config = {
paths:{
materialize : 'js/materialize'
},
shim: {
materialize: ['jquery'],
}
};
and add below code in your .phtml file to check is it correct:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
<script>
require(["jquery","materialize"], function($){
"use strict";
$(document).ready(function(){
$('.collapsible').collapsible();
});
});
</script>
add below fonts and css in your default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<link rel="stylesheet" type="text/css" src="https://fonts.googleapis.com/icon?family=Material+Icons" src_type="url" />
<css src="css/materialize.css"/>
</head>
</page>
You will see like below :
