TransWikia.com

How to add custom js file in Magento 2 in custom theme without use module

Magento Asked by Gagan on October 1, 2021

I used custom theme in magento 2. I want to add custom js file for navigation in magento 2 but js file not work.

I add js link in default_head_block.xml but a js doesn’t work.

<link src="js/menu.js"/>
customjavascriptmagento2

3 Answers

The best way to add a JS in Magento (theme or module) is with REQUIREJS.

To add a js in theme via Requirejs:

Supposing that your js file is: myfile.js

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};

app/design/frontend/{Vendor}/{theme}/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello myscript');
           //put all your myfile js code here
       }
});

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/{yourfile}.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

Answered by Aamir on October 1, 2021

create the file /app/design/frontend/Vendor/customtheme/Magento_Theme/layout/default_head_blocks.xml

assume you are trying to add bootstrap.js

File : default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
         <!--Include js From CDN-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
         <!--Include js From Custom module app/code/Company/Module/view/frontend/web/js-->
        <script src="Company_Module::js/bootstrap.min.js"/>        
    </head>
</page>

Please remove static files and flush magento cache

Answered by Pritam Info 24 on October 1, 2021

Goto your default.xml to the below location:

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

And add the below code:

<?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>
        <script src="Magento_Theme::js/custom.js"/>
    </head>
</page>

Now place your custom.js under below location:

app/design/frontend/Vendor/theme/Magento_Theme/web/js/custom.js

Now you can add your to the js file as you want.

Answered by Sukumar Gorai on October 1, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP