Cert Magento Frontend AD0-E710 - Javascript - Part 1

You are Explore JavaScript resources JS resources location. Where you can find the JS components of "Theme level, for a particular module" ?

• _{(<theme_dir>/<VendorName>_<ModuleName>/web). Resources added here are available for [inheriting] themes}

• _{(lib/web). Resources located here are available in any place in Magento.}

• _{(<theme_dir>/web). Resources added here are available for [inheriting] themes.}

•  _{(<module_dir>/view/<areaname>/web). If the module is enabled, resources added here are available in other modules and themes.yy}

An Adobe Commerce developer needs to alias URLs and third party libraries inside a requirejs-config.js file. Which configuration would the developer use ?

• _{^{paths: {}}    

  _{^{‘thirdpartylib’: ‘library/file’,}}

  _{^{‘thirdpartyurl’: ‘https://somelibrary.com/file’}}

  _^}

•  _{alias: {}    

  _{‘thirdpartylib’: ‘library/file’,}

      _{‘thirdpartyurl’:‘https://somelibrary.com/file’}

  _}

• _{^{map: {}}    

  _{^{‘thirdpartylib’: ‘library/file’,}}

      _{^{‘thirdpartyurl’: ‘https://somelibrary.com/file’}}

  _^}

•  _{^{shim: {}}    

  _{^{‘thirdpartylib’: ‘library/file’,}}

      _{^{‘thirdpartyurl’: ‘https://somelibrary.com/file’}}

  _^}

You are Accessing JS resources, JS resources are accessed using relative paths actual location: lib/web/jquery.js File published to pub/static: pub/static/<area>/Magento/<theme>/<locale>/jquery.js How to Called this script?

• _{^{require(["jquery"], function($){ });}}

• _{^{require(["jquery.js"], function($){ });}}

• _{^{require(["lib/web/jquery.js"], function($){ });}}

• _{require(["web/jquery.js"], function($){ });}

You are Accessing JS resources JS resources are accessed using relative paths.

File actual location: app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

File published to pub/static: pub/static/frontend/Magento/<theme>/<locale>/Magento_ConfigurableProduct/js/configurable.js.

Here <theme> and <locale> are the currently applied in your instance theme and locale. How to Called in script?

• _{require([“js/configurable"], function(){ });}

• _^require([

  _{^{"Magento_ConfigurableProduct::js/configurable"}}

  _{^{], function(Configurable){ });}}

• require(["configurable"], function($){ });

• _^require([

  _{^{"Magento_ConfigurableProduct/js/configurable"}}

  _{^{], function(Configurable){ });}}

You are creating 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"] } };

What is content example of <third-party-plugin>.js ?

• _{!(function($){}

  _{// plugin code}

  _{// where $ == jQuery}

  _})(jQuery);

• (function($){

  // plugin code

  // where $ == jQuery

  })(jQuery);

• (function($shim){

  // plugin code

  // where $ == jQuery

  })(jQuery);

• (function(shim){

  // plugin code

  // where $ == jQuery

  })($);

You are Explore JavaScript resources JS resources location. Where you can find the JS components of "Module level" ?

•  ^{(<theme_dir>/<VendorName>_<ModuleName>/web). Resources added here are available for [inheriting] themes}

• ^{(lib/web). Resources located here are available in any place in Magento.}

• ^{(<theme_dir>/web). Resources added here are available for [inheriting] themes.}

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

By default, the Magento application uses the --- and ---to optimize the time of loading pages with included JavaScript files, and to manage dependencies of JavaScript resources. (Select one or more of the following:)

• module loader

•  AngularJS

• VueJs

• RequireJS

You Create a RequireJS configuration file requirejs-config.js, having specified the following: var config = { "map": { "*": { "<default_component><custom_component>" } } };

What do you meaning <default_component> and <custom_component> ? (select 2)

• <default_component>: the name of the custom component

• <custom_component>: the name of the custom component

• <custom_component>: the name of the default component you replace

•  <default_component>: the name of the default component you replace

You are working on a site that extends a 3rd-party theme. You need to completely change how the breadcrumb component renders (originally in Magento_Catalog/js/product/breadcrumbs.js). However, the 3rd-party theme already modifies this. You are building a module, SwiftOtter_Catalog, that contains similar updates. Keeping upgradeability and maintainability in mind, what two ways that you can make these updates? (Select 2)

• _{^{Delete app/design/frontend/3rd-party/Theme/Magento_Catalog/web/js/product/breadcrumbs.js and create a new file in app/code/SwiftOtter/Catalog/view/frontend/web/web/js/product/breadcrumbs.js}}

• _{^{Edit app/design/frontend/3rd-party/Theme/Magento_Catalog/web/js/product/breadcrumbs.js to include the necessary changes.}}

• _{^{Copy app/design/frontend/3rd-party/Theme/Magento_Catalog/web/js/product/breadcrumbs.js to app/design/frontend/merchant/Theme/Magento_Catalog/web/js/product/breadcrumbs.js.}}

• _{^{Create a mixin in SwiftOtter_Catalog’s requirejs-config.js and override all applicable methods.}}

You need to Replace a default JS component, To use a custom implementation of an existing Magento JS component: Place the custom component source file in one of the --------- locations: (Select 2)

• _{Module view JS files:<module_dir>/view/frontend/web/js}

• _{Theme JS files:}

  _{/view/frontend/web/js}

• _{Module view JS files: <module_dir>/web/js}

• _{Theme JS files:}

  _/web/js