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
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
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>
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.
