1

I have created a block and called it in my phtml file then I call that block in my cms page like this {{block class="Abc\Custom\Block\Product" template="Abc_Custom::product.phtml"}}

and some HTML code in phtml file but I don't have controllers so now how do I add CSS and js file using layout XML

2

You can add your js and css using layout by below method

Edit your layout file app/code/vendor/module/view/frontend/layout/test_index_index.xml

     <?xml version="1.0"?>
     <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
       <head>
          <css src="css/mycustomcss.css" />
          <script src="js/mycustomjs.js"/>
     </head> 
       <body>
                 //your code here
     </body> 
    </page>

Create your js and css file in your module as below path.

app/code/vendor/module/view/frontend/web/css/mycustomcss.css

app/code/vendor/module/view/frontend/web/js/mycustomjs.js
  • test_index_index.xml i dont want this – sdfasdf Jan 17 at 9:45
  • you can replace this with your layout. @sdfasdf – Rizwan Khan Jan 17 at 12:25
2

Magento 2 brings some new features in javascript. One of them is “requireJS” (javascript file loader) and second is “jQuery“, a very popular js library. One of the biggest benefits is using requireJS which means that Magento 2 is ready for the upcoming HTTP2 protocol.

1) Place your requirejs-config.js file in one of the following directories (according to the location of your custom script):

Your theme files: <theme_dir> Or Your module view files: /view/frontend requirejs-config.js

var config = {
  "map": {
    "*": {
      "menu": "js/navigation-menu"
    }
  }
};

2) Load your js files in your template files

<script type="text/javascript">
require([
  'menu'
  ], function(menu){
  $(document).ready( function() {
    //Do your actions here
});
});
</script>

Refer this Magento Dev Docs for more information https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/custom_js.html

For loading CSS, you can directly load it through layout XML file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<head>
  <css src="css/mycustomcss.css" />
</head> 
</page>
0
vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml

override this (default_head_blocks.xml) xml file in your custom theme like below

app\design\frontend\Package\custom-theme\Magento_Theme\layout\default_head_blocks.xml

add below code in default_head_blocks.xml file

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/custom.css"/> OR <css src="css/custom.less"/>
        <script src="js/custom.js"/>
    </head>

</page> 

keep your js and css/less file in

\app\design\frontend\Package\custom-theme\web\css\custom.css
\app\design\frontend\Package\custom-theme\web\js\custom.js

after check your changes.

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.