Magento Expert Forum - Improve your Magento experience

Results 1 to 5 of 5

Configure JavaScript resources in Magento 2

  1. #1
    [ Contributor ] Wajid Hussain's Avatar
    Join Date
    Nov 2014
    Posts
    204
    Thanks
    3
    Thanked 14 Times in 12 Posts

    Default Configure JavaScript resources in Magento 2

    JavaScript is an object oriented scripting language, and it is very useful for connected host environments like the web browser to the objects of its environment to provide programmatic control over them. In Magento 2, one of the major advantages of using JavaScript is making storefront dynamic and interactive, but including JavaScript in the page headers makes uploading of the pages slow down . The solution of this problem is to add the ability to use the RequireJS library in Magento 2.

    RequireJS is one of the best and popular frameworks for managing dependencies between modules and it improves the page load time as it allows JavaScript to load in the Magento 2 background. In this article, I’m going to show you how to configure JavaScript resources in your Magento 2 store.

    Configure JavaScript Resources

    In Magento 2, you must specify and configure all JavaScript resources for your custom themes and modules. To ensure correct working of themes and modules, do not edit the JavaScript resources which belong to other themes and modules.

    JavaScript resources generate two types of IDs in Magento 2: A Magento modular ID and RequireJS ID. In the following IDs, you can see JavaScript resources for a configurable product:

    Code:
    / Regular ID
    
    require(["jquery"], function($){
    
       // ...
    
    })
    
    // Modular ID (Magento module: Magento_ConfigurableProduct, resource: js/configurable)
    
    require(["magento!Magento_ConfigurableProduct::js/configurable"], function(Configurable){
    
       // ...
    
    });
    The Modular ID is used for loading JavaScript modules. Normalizer plugin is used to convert the modular IDs into the file paths which are used by RequireJS to load JavaScript modules.

    Read The Complete Tutorial on commercegeek.com: http://www.commercegeek.com/news/how...-in-magento-2/

    View more threads in the same category:


  2. The Following User Says Thank You to Wajid Hussain For This Useful Post:

    Caylen (16-01-2020)

  3. #2
    Junior Member
    Join Date
    Sep 2016
    Posts
    228
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    To add a custom JS component (module), take the following steps:

    Place the custom component source file in one of the following locations:
    Your theme JS files: <theme_dir>/web/js or <theme_dir>/<VendorName>_<ModuleName>/web/js. In this case the component is available in your theme and its child themes.
    Your module view JS files: <module_dir>/view/frontend/web/js. In this case the component is available in all modules and themes (if your module is enabled).
    Optionally, in the corresponding module or theme, create a requirejs-config.js configuration file, if it does not yet exist there and set path for your resource.


    Corporate Gifts Suppliers in Delhi
    Last edited by vishnu; 26-03-2019 at 10:09 AM.

  4. #3
    Junior Member denverlawyers's Avatar
    Join Date
    May 2018
    Location
    Colorado
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for sharing this with us

  5. #4
    Junior Member
    Join Date
    Aug 2018
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Another excellent information on configuring the Magento settings. Although, i have a problem, after i configured the Javascript resources on my site the elements seem to load asynchronously that makes website look offbeat for a few seconds while loading.

    First i thought its Deferred Javascript thing, but it's not.

    Can you point me in right direction here?




    ------------------------------------------------------------------------------------------
    https://www.netguru.co/services/react-js

  6. #5

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •