Adobe Commerce Front-End Developer Expert AD0-E720 Exam Practice Test

Page: 1 / 14
Total 50 questions
Question 1

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



Answer : C

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]


Question 2

An Adobe Commerce developer wants to add a custom widget that extends the default Calendar Widget. What would the contents of this file look like?

A)

B)

C)



Answer : B

To add a custom widget that extends the default Calendar Widget, the contents of the file would look like option B. This is because option B follows the correct syntax and structure for defining a jQuery widget in Magento. The code does the following steps:

Defines a module with the name ''Vendor_Module/js/calendar-widget'' that depends on the ''jquery/ui'' and ''Magento_Ui/js/lib/knockout/bindings/datepicker'' modules.

Returns a function that creates a new widget with the name ''vendor.calendarWidget'' that extends the base calendar widget class.

Overrides the init function of the base calendar widget class to add custom logic or functionality to the widget.

Option A is not correct because it does not use the correct syntax for defining a jQuery widget. It uses a script tag instead of a define function, which is not valid for creating a module. It also uses an incorrect name for the widget, which should use a dot instead of a slash. Option C is not correct because it does not use the correct syntax for extending a widget. It uses an extend function instead of a widget function, which is not valid for creating a new widget. It also does not return anything from the module, which will cause an error. Reference: [jQuery widgets], [Calendar Widget]


Question 3

An Adobe Commerce developer needs to add a conditional static note depending on whether the order type is virtual or not. Which option would the developer use to add the conditional text in the email template?

A)

B)

C)



Answer : B

Option B is the correct way to add a conditional static note depending on whether the order type is virtual or not in the email template. Option B uses the {{trans}} directive to translate the text and the {{depend}} directive to check the value of the order.is_virtual variable. If the order is virtual, the text ''Shipping not required.'' will be displayed. Option A and Option C are incorrect because they use the wrong syntax for the {{trans}} and {{depend}} directives. Option A uses curly braces instead of parentheses for the {{trans}} directive and does not use quotes for the text. Option C uses parentheses instead of curly braces for the {{depend}} directive and does not use a dot to access the order.is_virtual variable.


Question 4

An Adobe Commerce developer has been asked to implement a custom font specifically for emails. The Adobe Commerce developer has already added their font into the file system.

Keeping best practice in mind, which two files would need to be implemented to show the custom font in the email?



Answer : A, B

To implement a custom font specifically for emails, the developer needs to do the following steps:

Add the custom font file to the web/fonts directory of the custom theme.

Use the @import font function with the url of the custom font from the theme in the /Vendor/Theme/web/css/source/_extend.less file. This will import the custom font and make it available for use in other LESS files. For example:

@import font('custom-font', '@{baseDir}fonts/custom-font.ttf', 'truetype');

Add in the styles to target the elements that require being changed in the /Vendor/Theme/web/css/source/_email.less file. This file is used to define the styles for email templates. The developer can use the .lib-font-face() mixin to apply the custom font to specific selectors. For example:

.lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal );

h1 { .lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal ); }

The /vendor/Theme/web/css/source/_typography.less file is not suitable for implementing a custom font for emails, as it is used for defining global typography styles for web pages. The <head></head> tag is not used for adding fonts in email templates, as it is not supported by most email clients. Reference: [Custom fonts], [Email templates overview]


Question 5

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)



Answer : C

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 6

When using Grunt, which CLI command is used to track changes in the source files and recompiles CSS files?



Answer : B

The grunt watch command is used to track changes in the source files and recompiles CSS files automatically. This command is useful for frontend development as it allows the developer to see the changes in real time without manually running other commands. The grunt watch command can be run with or without parameters to specify the theme and locale. For example, to track changes for the Vendor/Orange theme and the en_US locale, the developer can use:

grunt watch --theme=Vendor/Orange --locale=en_US

The other two options are incorrect because they do not track changes in the source files. The grunt start command is used to register themes and clear caches before running other commands. The grunt less command is used to compile LESS files to CSS files for a specific theme and locale. Reference:Adobe Commerce Developer Documentation,Adobe Inc.


Question 7

An Adobe Commerce developer created a new CMS page and set the page title as "My Custom Page". The page must be accessible at the URL /custom_page.

Which CMS page configuration do they set to make the page accessible at /custom_page?



Answer : B

The URL Key field under the Search Engine Optimization section is used to specify the URL suffix for the CMS page. The developer can set it as ''custom_page'' to make the page accessible at /custom_page. The Path field under the Content section is used to specify the path to the template file that renders the CMS page content. The URL field under the Page in Websites section does not exist as a valid configuration option for CMS pages. Reference: [Adobe Commerce Developer Documentation], [Adobe Inc.]


Page:    1 / 14   
Total 50 questions