Adobe AD0-E720 Practice Test - Questions Answers, Page 4
List of questions
Question 31

An Adobe commerce developer wants to initialize a JavaScript component using a data attribute. Which option would initialize the JavaScript component?
Explanation:
To initialize a JavaScript component using a data attribute, the developer should use the data-mage-init attribute. This attribute allows the developer to specify the name and configuration of the component in a JSON format. For example:
<nav data-mage-init='{''Vendor_Module/js/nav'': {''option1'': ''value1'', ''option2'': ''value2''}}'></nav>
This will initialize the nav component from the Vendor_Module/js/nav file with the given options. The data-bind and data-init attributes are not valid and will not work, as they are not supported by Magento.
Reference: [JavaScript initialization], [data-mage-init]
Question 32

An Adobe Commerce developer is working on a custom knockout Ul component and they need to add the text Happy Birthday. to be translated inside an .html template.
How would the developer add the text?
Explanation:
To add the text Happy Birthday. to be translated inside an .html template, the developer should use the i18n binding. This binding allows the developer to specify the text as a string literal and translate it using the Magento translation mechanism. For example:
<span data-bind=''i18n: 'Happy Birthday.'''></span>
This will render the text as it is, or translate it if a translation file is available for the current locale. The i18n binding can also accept variables or expressions as arguments. For example:
<span data-bind=''i18n: name + ' Happy Birthday.'''></span>
This will render the text with the value of name variable, or translate it if a translation file is available for the current locale. The Mil8n and il8n bindings are not valid and will not work, as they are misspelled and do not match the knockout binding syntax.
Reference: [Knockout bindings], [i18n binding]
Question 33

An Adobe Commerce developer needs to alias URLs and third party libraries inside a require js-config.js file. Which configuration would the developer use?
A)
B)
C)
Explanation:
To alias URLs and third party libraries inside a requirejs-config.js file, the developer should use the paths configuration option. This option allows the developer to map module names to URLs or paths relative to the baseUrl. For example:
var config = { paths: { 'jquery': 'https://code.jquery.com/jquery-3.6.0.min', 'custom': 'Vendor_Module/js/custom' } };
This will map the module name 'jquery' to the URL of the jQuery library and the module name 'custom' to the path of the custom module. The developer can then use these module names in other modules or files without specifying the full URL or path.
Option A is not correct because it uses the shim configuration option, which is used to define dependencies and exports for non-AMD modules, not to alias URLs or paths. Option C is not correct because it uses the map configuration option, which is used to map module names to other module names for specific contexts, not to alias URLs or paths.
Reference: [RequireJS configuration], [RequireJS paths]
Question 34

An Adobe Commerce developer was asked to customize a JavaScript component which is written as a function. How would the developer extend the native JavaScript function?
A)
B)
C)
Explanation:
To customize a JavaScript component that is written as a function, the developer can use option A. This option will use the prototype property of the function to extend its functionality and add new methods or properties. For example:
function Component() { // Component logic }
Component.prototype.customMethod = function() { // Custom method logic };
This will create a new method called customMethod on the prototype of the Component function, which can be accessed by any instance of the Component object. The developer can also override existing methods or properties on the prototype by reassigning them with new values.
Option B is not correct because it will not extend the native JavaScript function, but create a new function that wraps the original function. This will not allow the developer to access or modify the properties or methods of the original function. Option C is not correct because it will not extend the native JavaScript function, but create a new object that inherits from the original function. This will not allow the developer to customize the original function itself, but only its instances.
Question 35

Which Ul component property is used for cross tracking property changes?
Explanation:
The listens property is used for cross tracking property changes in the UI component. The listens property defines the dependencies between the properties of different UI components. It allows one UI component to listen to the changes of another UI component's property and react accordingly. For example, the listens property can be used to update the value of a text field based on the selection of a dropdown menu
Question 36

An Adobe Commerce developer is implementing a sticky sidebar using a jQuery widget. How would the developer initialize the block in a JavaScript file?
A)
C)
Explanation:
Option C is the correct way to initialize a jQuery widget in a JavaScript file. The widget name should be prefixed with ''mage'' and the options should be passed as an object literal. Option A is incorrect because it uses a dot notation instead of a colon to separate the widget name and the options. Option B is incorrect because it uses a string instead of an object literal to pass the options.
https://experienceleague.adobe.com/docs/certification/program/technical-certifications/ac/ac-expert/ac-e-fedeveloper0623.html?lang=en
https://developer.adobe.com/commerce/docs/
Question 37

An Adobe Commerce developer wants to create a sticky widget.
How would the widget be initialized using the data-mage-init attribute?
A)
B)
C)
Question 38

An Adobe Commerce developer wants to initialize a JS component via Layout XML in custom reference block test. component. Which Layout XML instruction would be used to initialize this JS component?
A)
B)
C)
Question 39

An Adobe Commerce developer needs to apply a Knockout binding to show content under certain conditions.
Which two syntaxes would achieve this? (Choose two.)
A)
B)
C)
D)
Question 40

By creating a Custom_Module, an Adobe Commerce Developer has implemented a new Page Builder viewport for tablet devices but the viewport's tablet selector button is missing.
The button .svg has been properly added to the path: CustomJ^odule/web/css/images/switcher/switcher-tablet .svg. How the developer would implement the viewport button icon?
A)
By setting the node icon in the theme's etc/view.xml file for the respective viewport configuration data.
B)
By setting the node button-image in the theme's etc/view.xml file for the respective viewport configuration data.
C) By adding the node image in the theme's etc/viewport.xml file for the respective viewport configuration data.
D)
By adding the node image in the theme's etc/viewport.xml file for the respective viewport configuration data.
Question