0

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($) {

1 Answer 1

0

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 :

enter image description here

1
  • I tried it and is not working, the carousel and parallax are not doing the right animations, what could it be? do I need to put the whole materialize.js functions inside define()? Jan 13, 2020 at 19:55

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.