How to add JS and CSS calling in PHTML file?

Question

I am including JS validations in Magento, there respected .js and .css files included like:

app/design/frontend/Smartwave/porto/Smartwave_Porto/layout/default.xml

<css src="Smartwave_Porto::css/index.css"/>
<script src="Smartwave_Porto::js/index.js"/>

and include those css, js files in :

app/design/frontend/Smartwave/porto/Smartwave_Porto/web/css and js

I have created a CMS Page and call the test.phtml file in cms page

I want to include css and js files in the test.phtml file but I cant.

Explain how to inlude those css and js files in .phtml file Location of .phtml file:

app/design/frontend/Smartwave/porto/Smartwave_Porto/templates/test.phtml

Thanks!

• Sejal Shah: You can not call js and css files in phtml files. However if you are including js and css files in default.xml it should be available overall the frontend.
• shivashankar m: Then how, Where to call
• Sejal Shah: you have already called in default.xml. So it should be available everywhere on frontend.
• shivashankar m: ok, but i want it in cms page loading to frontend
• shivashankar m: css and js are like below (Reload the page to get source for: /magento2/js/index.js/)

Answer 1

You can follow the bellow technique.

enter image description here

You can also get static file location url directly:-

$block->getViewFileUrl();

• shivashankar m: let us know, How to give other path here:<link rel="stylesheet" type="text/css" href="<?php echo $block->getUrl();?> other-path">
• shivashankar m: <link rel="stylesheet" type="text/css" href="<?php echo $block->getUrl('css/index.css');?> ">
• shivashankar m: I was given liken lik above
• DelwaR: $block->getUrl() will give your base path like example.com. Other path means your css or js file folder structure after your main path.
• shivashankar m: I tried this but remain same

Answer 2

You can add below code in PHTML file to call js

<script src="<?= $block->getViewFileUrl('Namespace_Vendorname::js/myjs.js')?>"/>

And to call CSS file add :

<link rel="stylesheet" type="text/css" href="<?= $block->getViewFileUrl('Namespace_Vendorname::css/mycss.css')?>">

$block->getViewFileUrl('Namespace_Vendorname::js/myjs.js') will load js from pub/static/frontend/ThemeNamespace/ThemeName/en_US/Namespace_Vendorname/jspath.

<link rel="stylesheet" type="text/css" href="<?= $block->getViewFileUrl('css/mycss.css')?>">

Above code will load CSS file from pub/static/frontend/ThemeNamespace/ThemeName/en_US/css