https://aureatelabs.com/blog/easiest-way-to-load-your-custom-js-component-in-magento-2/

https://r-martins.github.io/m1docs/videos/fundamentals/add-a-javascript-module/index.html

https://github.com/nans/Magestudy/tree/master?tab=readme-ov-file

https://www.thecoachsmb.com/how-to-add-custom-javascript-in-magento-2/#:~:text=Magento%202%20uses%20Require%20JS,to%20increase%20the%20page%20speed.&text=Magento%202%20uses%20requirejs%2Dconfig,the%20JS%20file%20with%20alias.

 

https://www.google.com/search?q=MAGENTO+2+ADD+CUSTOM+JS+METHODS&rlz=1C1CHBD_enPK1035PK1035&oq=MAGENTO+2+ADD+CUSTOM+JS+METHODS+&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBCDgwNzhqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8

 

There are 3 ways to add JS

 

  1. Layout XML File
  2. Via data-mage-init and using RequireJS Configuration(Must add require-js.config file)
  3. Via <script type=”text/x-magento-init”>

 

1) Via Adding Layout

   You can add JavaScript files to specific pages or all pages using layout XML files.

Example:

Layout XML:

 

<?xml version="1.0"?>
<!-- File: app/code/Vendor/Module/view/frontend/layout/default.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Module::js/example.js"/>
    </head>
</page>

 

Add below code to example.js file

require(
    [
        "jquery",
    ],
    function($){

    alert("Add Custom Js");

})

Add JS in any phtml file 

 


<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/modal',
        'domReady!'
    ], function ($, modal) {
        'use strict';

        // Define the modal options
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            modalClass: 'custom-modal-popuplogin'
        };

        // Initialize the modal
        var popup = modal(options, $('#modal-popup'));

        // Open the modal on button click
        $('#open-modal-button').on('click', function() {
            popup.openModal();
        });

        // Close the modal on button click
        $('#close-modal-button').on('click', function() {
            popup.closeModal();
        });
    });
</script>

Above code will Initialize th Modal using Magento 2.

Common Magento 2 JavaScript Dependencies

  1. jquery

    • Description: The jQuery library for handling DOM manipulation, event handling, and AJAX requests.
    • Usage: require(['jquery'], function ($) { ... });

  2. Magento_Ui/js/modal/modal

    • Description: Provides functionality to create and manage modal dialogs (popups).
    • Usage: require(['Magento_Ui/js/modal/modal'], function (modal) { ... });

  3. Magento_Ui/js/form/form

    • Description: Handles form initialization and submission, including form validation.
    • Usage: require(['Magento_Ui/js/form/form'], function (Form) { ... });

  4. Magento_Checkout/js/view/billing-address

    • Description: Manages the billing address view in the checkout process.
    • Usage: require(['Magento_Checkout/js/view/billing-address'], function (BillingAddress) { ... });

  5. Magento_Checkout/js/model/quote

    • Description: Provides access to quote data (cart) and related operations.
    • Usage: require(['Magento_Checkout/js/model/quote'], function (quote) { ... });

  6. Magento_Catalog/js/model/product

    • Description: Manages product data and interactions.
    • Usage: require(['Magento_Catalog/js/model/product'], function (product) { ... });

  7. Magento_Customer/js/customer-data

    • Description: Manages customer data, including cart and session information.
    • Usage: require(['Magento_Customer/js/customer-data'], function (customerData) { ... });

  8. Magento_Ui/js/lib/view/utils/dom/consts

    • Description: Contains constants for DOM-related operations.
    • Usage: require(['Magento_Ui/js/lib/view/utils/dom/consts'], function (consts) { ... });

  9. Magento_Ui/js/lib/view/utils/async

    • Description: Provides utility functions for asynchronous operations.
    • Usage: require(['Magento_Ui/js/lib/view/utils/async'], function (async) { ... });

  10. Magento_Ui/js/lib/view/utils/scroll

    • Description: Utility functions for handling scroll behavior.
    • Usage: require(['Magento_Ui/js/lib/view/utils/scroll'], function (scroll) { ... });

  11. Magento_Ui/js/view/messages

    • Description: Manages and displays messages such as notifications and alerts.
    • Usage: require(['Magento_Ui/js/view/messages'], function (messages) { ... });

  12. mage/url

    • Description: Utility for handling and generating URLs.
    • Usage: require(['mage/url'], function (url) { ... });

  13. mage/translate

    • Description: Provides translation and localization support for JavaScript strings.
    • Usage: require(['mage/translate'], function (translate) { ... });

  14. mage/cookies

    • Description: Manages cookies for client-side operations.
    • Usage: require(['mage/cookies'], function (cookies) { ... });

  15. mage/validation

    • Description: Provides client-side validation functionalities.
    • Usage: require(['mage/validation'], function (validation) { ... });

  16. mage/loader

    • Description: Provides a loader widget for displaying loading indicators.
    • Usage: require(['mage/loader'], function (loader) { ... });