Limited-Time Offer: Enjoy 50% Savings! Ends in 00h 00m 00s Coupon code: 50OFF
Skip to content

Free Adobe Commerce Front-End Developer Expert Exam AD0-E720 Exam Questions

Page: 1 / 9 Total 50 questions

Want more questions? Get Premium Access.

Question 1

An Adobe Commerce developer has created a system configuration field:

Using Layout XML, how can the visibility of a block be controlled by a system configuration?

Correct Answer: A. <block name='block.name' template='Vendor_Module::template.phtml='' ifconfig='vendor/general/enable' />
Explanation:

To control the visibility of a block using a system configuration, the developer should use the ifconfig attribute in the <block> tag. The ifconfig attribute should specify the path to the system configuration field that determines whether the block is visible or not. For example:

<block name=''block.name'' template=''Vendor_Module::template.phtml'' ifconfig=''vendor/general/enable'' />

This will render the block only if the vendor/general/enable system configuration field is set to true. The module/general/enable and general/module/enable paths are not valid and will not work, as they do not match the system configuration field defined in the image. Reference: [Layout instructions], [System configuration]


Question 2

An Adobe Commerce developer has been asked to add text to an email template that supports translations. Which two options would they use during their implementation? (Choose two.)

Correct Answer: B. {{translations '%items items' items='numltems'}}; D. {{trans '%items items' items='numltems'}}
Explanation:

To add text to an email template that supports translations, the developer should use the {{trans}} directive with the text enclosed in double quotes. For example:

{{trans ''Lorem Ipsum is simply dummy text of the printing''}}

This will render the text as it is, or translate it if a translation file is available for the current locale. If the text contains a variable, the developer should use a placeholder with a percent sign and pass the variable name as an argument. For example:

{{trans ''%items items'' items=''numItems''}}

This will render the text with the value of numItems replacing the %items placeholder, or translate it if a translation file is available for the current locale. The {{translations}} directive is not valid and will not work. Reference: [Translate email templates], [Email template syntax]


Question 3

An Adobe Commerce developer wants to create symlinks for the frontend theme named Vendor/Orange using a CSS file: /pub/static/frontend/Vendor/Orange/en_US/css/styles-l.css during development.

Which CLI command would the developer use to create symlinks for the en_US locale?

Correct Answer: B. bin/magento dev:source-theme:deploy --type=Mless' --locale='en_US' --theme='Vendor/Orange' css/styles-1
Explanation:

The bin/magento dev:source-theme:deploy command is used to create symlinks for frontend theme files during development. This command allows the developer to modify source files without running static content deployment every time. The developer can use parameters to specify the type, locale, theme, and file names for creating symlinks. For example, to create symlinks for a CSS file named styles-l.css for the Vendor/Orange theme and the en_US locale, the developer can use:

bin/magento dev:source-theme:deploy --type=less --locale=en_US --theme=Vendor/Orange css/styles-l

The other two options are incorrect because they do not create symlinks for frontend theme files. The bin/magento dev:theme:deploy command is used to register themes with Magento and clear caches. The bin/magento deploy:mode:set command is used to change the application mode. Reference:Adobe Commerce Developer Documentation,Adobe Inc.


Question 4

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)

Correct Answer: B. Option B
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 5

An Adobe Commerce developer needs to modify the width and height of all product images inside the theme Vendor/theme. What file inside the theme is responsible for these changes?

Correct Answer: B. Vendor/theme/etc/view.xml
Explanation:

To modify the width and height of all product images inside a theme, the developer needs to edit the view.xml file inside the etc directory of the theme. The view.xml file contains the configuration for the theme's images, fonts, and layout. The images.xml file does not exist by default and is not used for configuring images. The theme.xml file is used for specifying the parent theme and other metadata of the theme. Reference: [view.xml], [theme.xml]


Question 6

An Adobe Commerce developer wants to completely overwrite _module. less of Orange_Checkout module, in their theme. Where would the developer place the file?

Correct Answer: C. Custom/theme/Orange_Checkout/web/css/source/_module.less
Explanation:

To completely overwrite _module.less of Orange_Checkout module in a custom theme, the developer should place the file in the Custom/theme/Orange_Checkout/web/css/source directory. This will override the default _module.less file from the Orange_Checkout module and apply the custom styles to the theme. The Custom/theme/Orange_Checkout/frontend/web/css/_module.less and Custom/theme/web/css/source/Orange_Checkout/_module.less paths are not valid and will not work, as they do not follow the theme structure or the module naming convention. Reference: [Theme structure], [Module naming convention]