Magento Expert Forum - Improve your Magento experience

Results 1 to 7 of 7

Configure JavaScript resources in Magento 2

  1. #1
    [ Contributor ] Wajid Hussain's Avatar
    Join Date
    Nov 2014
    Posts
    206
    Thanks
    3
    Thanked 11 Times in 9 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. #2
    Junior Member
    Join Date
    Aug 2016
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    APP: Mu Shu
    c ch
    mound
    ailings
    Asian
    t c
    Asian
      Related files t
    in
    i modules, templates, files tremor h
    Hey
      th
    in
    ng
     

     
    Downloader: Folders archive
      t
    Asian
    t c
    Asian
     
    Duo modules
    v c download
    Hey
      b
    Asian
    ng magentoconnect (Install module online)

     
    Errors: Mu Shu
    c ch
    mound
    a file relating t
    in
    i notices l
    in
    i.

     
    Includes: Insert the file m
    in
      r
    in
    other ng.

     
    JS: Ch
    mound
    ailings
    Asian
    t c
    Asian
      js files c
    mound
    Ah
    Hey
      th
    in
    ng

     
    LIB: Ch
    mound
    a h files
    Hey
      th
    in
    ng, zend

     
    Media: ch
    mound
    a picture file
    Asian
    nh c
    mound
    a website.

     
      pkginfor: Information package s
    Asian
    n ph
    Asian
    m

     
    SHELL: Related files t
    in
    i reindex

     
    Skins: ch
    mound
    c files css, javascript, image for template

  3. #3
    Junior Member
    Join Date
    Sep 2016
    Posts
    178
    Thanks
    0
    Thanked 2 Times in 2 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.


    Cafeteria Chairs | Student Writing Chairs | Revolving Office Chairs

  4. #4

  5. #5
    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. #6
    Junior Member
    Join Date
    Sep 2018
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Configure JavaScript resources in Magento 2

    To merge CSS files in Magento 2
    To merge JavaScript files in Magento 2

    To merge CSS files in Magento 2

    On the Admin panel, click Stores. In the Settings section, select Configuration.
    Select Developer under Advanced in the panel on the left
    Open the CSS Settings section, and continue with following:
    Name:  a4uXRkg.png
Views: 3
Size:  70.3 KB

    In the Merge CSS Files field, select Yes
    When complete, click Save Config.

    To merge JavaScript files in Magento 2

    On the Admin panel, click Stores. In the Settings section, select Configuration.
    Select Developer under Advanced in the panel on the left
    Open the JavaScript Settings section, and continue with following:
    Name:  85fMSFG.png
Views: 3
Size:  88.8 KB

    In the Merge JavaScript Files field, select Yes
    When complete, click Save Config.

  7. #7
    Junior Member
    Join Date
    Sep 2018
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    JavaScript resources in Magento 2

    RequireJS improves the perceived page load, time because it allows JavaScript to load in the background; in particular, because it enables asynchronous JavaScript loading.

    Explore JavaScript resources

    JS resources location

    In Magento, you can find the JS components on the following levels:

    Library level (lib/web). Resources located here are available in any place in Magento.

    Module level (<module_dir>/view/<areaname>/web). If the module is enabled, resources added here are available in other modules and themes.

    Theme level, for a particular module (<theme_dir>/<VendorName>_<ModuleName>/web). Resources added here are available for [inheriting] themes.

    Theme level (<theme_dir>/web). Resources added here are available for [inheriting] themes.

    Library level can only contain core Magento resources. Do not put custom JS files in the `lib/web` directory.

    Specifying JS

    We recommend specifying JavaScript resources in the templates rather than in the layout updates, to ensure processing of the resources in body of a page.

    Dependencies between JavaScript resources

    To build a dependency on the third-party plugin, specify a [shim] in the following configuration files:

    requirejs-config.js

    var config = {
    "shim": {
    "3-rd-party-plugin": ["jquery"]
    }
    };
    <third-party-plugin>.js

    !(function($){
    // plugin code
    // where $ == jQuery
    })(jQuery);

    RequireJS library

    Including RequireJS

    To be available for the entire Magento instance, RequireJS library is included in the following layout files:


    For the adminhtml area:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framewo rk:View/Layout/etc/page_configuration.xsd">
    <head>
    <title>Magento Admin</title>
    <meta name="viewport" content="width=1024"/>
    <meta name="format-detection" content="telephone=no"/>
    <!-- Here's the library included -->
    <link src="requirejs/require.js"/>
    <css src="extjs/resources/css/ext-all.css"/>
    <css src="extjs/resources/css/ytheme-magento.css"/>
    </head>
    <body>
    <attribute name="id" value="html-body"/>
    <!-- Here's the basic configuration file require_js.phtml specified -->
    <block name="require.js" class="Magento\Backend\Block\Page\RequireJs" template="Magento_Backend:age/js/require_js.phtml"/>
    <referenceContainer name="global.notices">
    <block class="Magento\Backend\Block\Page\Notices" name="global_notices" as="global_notices" template="page/notices.phtml"/>
    </referenceContainer>
    <referenceContainer name="header">
    ...
    </referenceContainer>
    <referenceContainer name="after.body.start">
    <!-- Here's the main configuration file requirejs-config.js specified -->
    <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
    <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
    <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
    <block class="Magento\Framework\View\Element\Js\Component s" name="head.components" as="components" template="Magento_Backend:age/js/components.phtml"/>
    <block class="Magento\Framework\View\Element\Html\Calenda r" name="head.calendar" as="calendar" template="Magento_Backend:age/js/calendar.phtml"/>
    </referenceContainer>
    </body>
    </page>



    Mapping JS resources

    To make the configurations more precise and specific for different modules/themes, requirejs-config.js files can be placed in different locations depending on your needs.

    All configurations are collected and executed in the following order:

    Library configurations.

    Configurations at the module level.

    Configurations at the theme module level for the ancestor themes.

    Configurations at the theme module level for a current theme.

    Configurations at the theme level for the ancestor themes.

    Configurations at the theme level for the current theme.

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
  •