Technically there is a option to include css and JS in template file but Adobe commerce strongly recommended avoiding this.
This topic describe how to apply custom css and js on template file.
Apply Custom CSS:
There are diffrent ways to apply css on custom page. We can use each method according to out requirement.
- Internal CSS
- Inline CSS
- External CSS
Method 1: Internal CSS
Internal CSS is defined in a page which will apply on the sepecific page.
Example:
|
1 |
<style> body{ background-color:linen; } h1{ color:maroon; margin-left:40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> |
Method 2:Inline CSS
The inline css is apply on single element using style attribute.
Example:
|
1 |
<h1 style="color:blue;text-align:center;">This is a heading</h1> |
Method 3: External CSS
The external css is apply each page in which must has a reference to the external css file.
Please follow below Steps to include external css.
Step1: External CSS are defined in layout file using “css” element, reference by “src” attribute and inside the section.
Example: Create a layout file in :
Bluethink/Crud/View/frontend/layout/filename.xml
|
1 2 3 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="Bluethink_Crud::css/custom.css"/> </head> <body> <referenceContainer name="content"> <block class="Bluethink\Crud\Block\View" name="view_user_index" template="Bluethink_Crud::display.phtml" /> </referenceContainer> </body> </page> |
Step 2: Create custom.css file in :
“Bluethink/Crud/View/web/css/custom.css”
|
1 |
th{ background-color: cyan; } |
Step3: Deploy Changes by run below command:
rm -rf var/cache/* var/page_cache/* pub/static/frontend/*
var/view_preprocessed/pub/static/frontend/*
sudo php bin/magento s:s:d -f
sudo php bin/magento c:f
sudo chmod -R 777 var pub generated
Apply Custom JavaScript
There are different ways to apply custom JS in custom phtml file.
Method 1: Using custom module
Include JS file reference in script element inside head section in layout file.
Please follow below steps to apply JS
Step1: Create app/code/Bluethink/Crud/View/frontend/layout/filename.xml
|
1 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="Bluethink_Crud::js/custom.js"/> </head> <body> <referenceContainer name="content"> <block class="Bluethink\Crud\Block\View" name="view_user_index" template="Bluethink_Crud::display.phtml" /> </referenceContainer> </body> </page> |
Step 2: Create JS file in app/code/Bluethink/Crud/View/frontend/web/js/custom.js
|
1 |
function deleteData(url) { if(confirm("Are you want to delete?")){ window.location.href = url; } } |
Method 2: Using theme
Please follow below steps to apply js using custom theme.
Step1: Create layout file in custom theme inside Design folder:
app/design/frontend/{theme/folder/Vendor_Module}/layout/filename.xml
|
1 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="Bluethink_Crud::js/custom.js"/> </head> <body> <referenceContainer name="content"> <block class="Bluethink\Crud\Block\View" name="view_user_index" template="Bluethink_Crud::display.phtml" /> </referenceContainer> </body> </page> |
Step2: Create {Vendor_Module}/web/js/filename.js
put the js content in this file like below example:
|
1 |
define([ 'jquery' ], function ($) { 'use strict'; alert("This is alert"); }); |
Method 3: Using requirejs-config.js file:
please follow below steps to apply custom js :
This method can be apply in custom module and custom theme.
Step1: Create requirejs-config.js file in:
app/design/frontend/{theme/folder/Vendor_Module}/requirejs-config.js
or
app/code/Bluethink/Crud/View/requirejs-config.js
Content would be:
|
1 |
var config = { map:{ '*':{ customJs:'Bluethink_Crud/js/customJs' } }, shim:{ 'js1':{ deps:['jquery'] } } } |
Explanation:
There is a keyword customJs which is used inside map keyword. This is a alise name for JS filepath.
Jquery will run before js file by using shim keyword.
Step 2: Create customJs.js file in:
app/design/frontend/{theme/folder/Vendor_Module}/web/js/customJs.js
OR
app/code/Bluethink/Crud/View/web/js/customJs.js
content would be according requirement:
|
1 |
define(['jquery','domReady!','customJs'],function($,dm,customJs){ alert("second file js"); }); |
Step 3: Use js in phtml file
Method 4: Using Script tag
Custom Js can be apply using script tag in the same phtml file:
|
1 |
<script> function deleteData(url) { if(confirm("Are you want to delete?")){ window.location.href = url; } } </script> |
bluethinkinc_blog
2023-09-06