adding js file in magento2

apkbarkgma96dd · ‎07-26-2023

I have two questions, First where should I put a JavaScript file to make it global across all pages? Second, let's say there is a module called "module-layered-navigation," and I want to override it in my apkbark's theme and add a JavaScript file specifically for this module. How can I achieve this, ensuring that the JavaScript file is only readable within this module?

an0888500g92af · ‎07-26-2023

1. To make a JavaScript file global across all pages, you typically place it in the header or footer of your website's template files. The exact location depends on your website's architecture and how it's built. Here are the common locations where you can include a JavaScript file to make it accessible on all pages:

a. In the `<head>` section of your website's HTML template:
```html
<head>

<script src="/path/to/your-global-js-file.js"></script>
</head>
```

b. Before the closing `</body>` tag of your website's HTML template:
```html
<body>

<script src="/path/to/your-global-js-file.js"></script>
</body>
```

By including the JavaScript file in either of these locations, it will be loaded and accessible on all pages of your website.

2. To override a module and add a JavaScript file specifically for that module, you can follow these steps:

a. Create a new JavaScript file with your custom code and save it in your theme's directory. Let's say you name it `custom-layered-navigation.js`.

b. In your theme's template files (usually in Magento, Shopify, or any other CMS you're using), locate the section where the module "module-layered-navigation" is included. It could be in the template file responsible for rendering that module.

c. Add a reference to your custom JavaScript file within the scope of the "module-layered-navigation" element or section. This ensures that your custom JavaScript file is loaded only when the module is present on the page.

For example, in HTML, it might look like this:
```html
<div class="module-layered-navigation">

<script src="/path/to/custom-layered-navigation.js"></script>
</div>
```

This way, your custom JavaScript file will only be loaded and executed when the "module-layered-navigation" module is present on the page, ensuring that it doesn't interfere with other parts of your website. It provides a targeted approach to enhancing specific modules without affecting the global JavaScript behavior.

syedhasan · ‎07-26-2023

Hello @apkbarkgma96dd

Follow the below link to how to add a custom js.

https://www.thecoachsmb.com/how-to-add-custom-javascript-in-magento-2/

jQuery is already pre-packaged with Magento2, there is no need to implement it on your own, however, you have to utilize it.

To add JS to your theme you have several possibilities.

By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/

Example Content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

If you inject JS this way, do not forget to wrap your JS into the require.js -conform way:

require(['jquery'], function($){ /* Code... */ })

Or: by utilizing requirejs-config.js in your themes root folder.

Simply add Deps to it, for example:

var config = {

    deps: [
        "js/main",
    ],

    map: {
        '*': {
            'owlcarousel': 'js/owl.carousel.min',
            'sticky' : 'js/jquery.sticky',
            'tether' : 'js/tether.min',
            'bootstrap': 'js/bootstrap.min'

        }
    },
    "shim": {
        "owlcarousel": ["jquery"],
        "tether": ["jquery"],
        "bootstrap": ["jquery"]
    }
};

In the above example, I register main.js by calling it in the Deps. The path is without the .js extension, requirejs is handling this on its own.

Your main.js should be located at web/js/ in your theme.

The content of main.js should be like this:

define([
  "jquery",
  "whatever lib you wanna use..."
], 
function($) {
  "use strict";

    $(document).ready(function($){
        console.log("DID IT! jQuery log complete.");
    });
    return;
});

------------------------------------------------
If you've found one of my answers helpful, please give "Kudos" or "Accept as Solution"

adding js file in magento2

adding js file in magento2

Re: adding js file in magento2

Re: adding js file in magento2