Font size
WorksheetsMagento thi that
Total questions: 40
Worksheet time: 22mins
An Adobe Commerce developer has implemented custom theme Vendor/Theme which inherits from Magento/luma. Which two options are parts of the theme fallback logic? (Choose two.)
Magento/blank
Magento/default
Magento/base
Magento/luma
An Adobe Commerce developer needs to pass JSON data to a javaScript component while keeping xSS prevention strategies in mind. Which two options would the developer use? {Choose two.)
<div data-bin='settings: <?= $escaper->escapeHtmlAttr($myJson) ?>'></div>
<script>
let settings = <?= $myJson ?>
</script>
<script>
let settings = <?= escapeHtmlAttr($myJson) ?>
</script>
<div data-bin='settings: <?= $myJson ?>'></div>
An Adobe Commerce developer has been asked to add orange_view_index layout handle in the email template which is placed at. Vendor_Orange/view/frontend/layout/orange_view_index.xml as:
Which option would the developer use to add the layout handle in the email templates:
{{template area=”frontend” handle=”orange_view_index” }}
{{block area=”frontend” handle=”orange_view_index” }}
{{layout area=”frontend” handle=”orange_view_index” }}
An Adobe Commerce developer has to set a specific CMS page to appear when a 404 Page Not Found error occurs. Where can the CMS No Route Page be configured in the Admin Panel?
In the Default Pages section under Stores > Settings > Configuration > Design > Web
In the Default Pages section under Stores > Settings > Configuration > General > Web
In the Default Pages section under Stores > Settings > Configuration > Advanced > Web
An Adobe Commerce developer is using a 3rd party module called Nomespace_Module which has a base layout ( < module_dir >/view/frontend/layout/layout1.xml ). How would an Adobe Commerce developer override the base layout?
<theme_dir>/Nomespace_Module/layout/override/base/layout1.xml
<theme_dir>/Nomespace_Module/override/layout/base/layout1.xml
<theme_dir>/Nomespace_Module/frontend/layout/layout1.xml
An Adobe Commerce developer wants to enhance security on the storefront using Google reCAPTCHA. Which step would the Adobe Commerce developer take to enable Google reCAPT CHA through the admin?
Configure Google reCAPTCHA in Stores > Settings > Configuration > General > Web > Google reCAPTCHA Storefront.
Configure Google reCAPTCHA in Stores > Settings > Configuration > Security > Google reCAPTCHA Storefront
Configure Google reCAPTCHA in Stores > Settings > Configuration > Advanced > Developer > Google reCAPTCHA Storefront
An Adobe Commerce developer needs to create translations for the Orange/custom theme. Which directory would the developer place the translations?
Orange/custom/i18n
Orange/custom/etc
Orange/custom/translations
An Adobe Commerce developer has been asked to add a block that will be available on every page. In which layout should the block be added?
cms_index_index.xml
default.xml
default_blocks.xml
An Adobe Commerce developer needs to add a static variable note in email templates. The custom variable is added in the Admin panel under System > Other Settings > Custom Variables. Which option would the developer use to add the variable in the email template content?
{{customVar code=note}}
{{var note}}
{{config path="system/variables/note"}}
When using Grunt. which CLI command is used to track changes in the source files and recompiles CSS files?
grunt watch
grunt less
grunt start
An Adobe Commerce developer wants to create a sticky widget. How would the widget be initialized using the data-mage-init attribute?
<div class="block-bundle-summary"
data-mage-init='{"sticky":{"container": ".product-add-form"}}'>
[...]
</div>
$('.sticky-element').sticky({
container: '.sticky-parent'
});
in which folder can a custom theme favicon be added?
< your_theme_dir >/Magento_Theme/web/
< your_theme_dir >/assets/images
< your_theme_dir >/web/
An Adobe Commerce developer needs to install a new module that loads static files. To avoid issues with static files, which mode would the developer need to be in?
product
default
developer
An Adobe Commerce developer needs to customize the look and feel of the ThirdParty/widget module to match the design of the project. The module is a generic module shared across several projects and was added manually in app/code. Keeping maintainability in mind, where would the developer add the styles?
app/code/ThiroParty/Widget/web/css/
app/design/frontend/[Verdor]/themename/ThirdParty_Widget/web/css/
app/code/ThirdParty/Widget/view/frontend/web/css/
An Adobe Commerce developer needs to update several default variables used to style emails. Which file would be used to change the LESS variables for email templates in a theme?
<Theme_Directory>/web/css/source/_email-variables.less
<Theme_Directory>/web/css/source/_email-variable.less
<Theme_Directory>/web/css/source/email/_email-variables.less
An Adobe Commerce developer wants to minify and merge the CSS for frontend optimization. Where would they need to configure the minification and merging of CSS?
In Admin panel, Stores > Configuration > Advanced > CSS > CSS Settings
In Admin panel, Stores > Configuration > Advanced > System > CSS Settings
In Admin panel, Stores > Configuration > Advanced >Developer > CSS Settings
An Adobe Commerce developer needs to add an icon to the "Add to cart' button within a custom theme. The custom theme is child theme of the Magento/blank theme.
What is the purpose of using file in a custom theme?
It is used to remove duplicated styling code located in a LESS file in both parent and child theme.
It is used to override any styling code located in a LESS file in parent theme with any styling code located in 3 LESS file in a child theme
It is used to merge any styling code Located in a LESS file in parent theme with code in file in a child theme.
An Adobe Commerce developer wants to customize the styles for a module called Orange_Product. The only .less file that is in the Orange_Product module. is Orange/Product/view/frontend/web/css/source/module.less.
What file would the developer change in the theme to add more styles while keeping the existing styles from the module?
< Vendor >/< theme>/Orange_Product/web/css/source/_extend.less
< Vendor >/< theme>/Orange_Product/web/css/source/module.less
< Vendor >/< theme >Orange_Product/web/css/source/_extends.less
An Adobe Commerce developer wants to use LESS variables to make the default color of the text links match the default color of the body text. While keeping upgradability in mind, how would the developer make this modification?
Create in custom theme
app/design/frontend/custom/theme/web/css/source/_themes.less and add
a {color: @link_color;}
app/design/frontend/custom/theme/web/css/source/_extends.less and add
a {color: @primary_color;}
app/design/frontend/custom/theme/web/css/source/_theme.less and add
@link_color: @primary_color;
An Adobe Commerce developer has just installed an extension via composer. When running, bin/magento module:status Vendor_Module, the status is returned Module is disabled. Which two CU commands need to be run to make the extension work property? (Choose two.)
bin/magento setup:upgrade
composer install
composer update vendor/module
bin/magento module:enable Vendor Module --clear-static-content
An Adobe Commerce developer has been asked to customize a product page layout. What are two valid layout handles? (Choose two
catalog_product_view_type_[product name]
catalog_product_view_name _[product name]
catalog_product_view
catalog_product_view_id_[id]
An Adobe Commerce developer needs to add a custom JavaScript component in a custom .phtml. What would be two ways for a developer to add the custom component? (Choose two.)
Using the data-mage-init attribute.
Include the file path directly in the template phtml with < script href=”...”>.
Using the < script type=text/x-magento-init" > < /script > tag
Using the data-xs-mage-init attribute
An Adobe Commerce developer is extending a theme from Magento/blank and wants to override parent styles. Which file does the developer need to change to override the parent theme styles?
web/css/source/_extends.less
web/css/source/extend.less
web/css/source/theme.less
An Adobe Commerce developer needs to display a URL in the template. Now would the variable $url be securely output in the template?
<?php echo $escaper->escapeLink($url)?>
<?php echo $escaper->escapeHtml($url)?>
<?php echo $escaper->escapeUrl($url) ?>
In which mode would the stylesheet customizations display immediately after you reload a page in a browser?
less-side compilation mode
client-side compilation mode
server-side compilation mode
An Adobe Commerce developer has to set a specific CMS page to appear when a 404 Page Not Found error Occurs
Where can the CMS No Route Page be configured in the Admin Panel?
In the Default Pages section under Stores > Settings > Configuration > General > Web
In the Default Pages section under Stores > Settings > Configuration > Design > Web
In the Default Pages section under Stores > Settings > Configuration > Advanced > Web
A third party module 'Vendor_Module' contains a LESS file that modifies variables originally created in lib/web/css/source/lib/_buttons.less. Where would an Adobe Commerce developer overwrite the LESS file modifications?
app/design/frontend/custom/theme/Vendor_Module/web/css/source/ extend.less
app/code/Vendor/module/view/frontend/web/css/source/extend.less
app/design/frontend/custom/theme/Vendor_Module/web/css/source/lib/_button.less
An Adobe Commerce developer needs to add the color scheme of a partner company, which is being promoted only in transactional emails. What file would the developer use to add email variables?
source/email-variables.less
source_email-variables.less
source/ variables.less
An Adobe Commerce developer wants to create several abstract LESS classes used across the entire theme. Which LESS file would be used to add those classes?
web/css/source/ extend.less
web/css/source/ extends.less
web/css/source/ theme,less
An Adobe Commerce developer is working on a custom knockout UI component and they need to add the text Happy Birthday, to be translated inside an .html template. How would the developer add the text?
<span data-bind=”i18n: ‘Happy Birthday.’”></span>
<!-- ko i18n = ‘Happy Birthday –’><!-- ko –>
<span data-bind=”i18n: Happy Birthday.”></span>
An Adobe Commerce developer has been asked to move a block called country from the container sidebar to the container content, the block has to be the last child on the content container. Which layout instruction would be used to move the block?
<move element="courtry-element" destination="content-element"/>
<move element="country" destination="content" after="-">
<move element="country" destination="content" after="last-child"/>
An Adobe Commerce developer has created a custom .phtml template, and added it to the Layout XML
<referenceBlock name="product_data_block"> <block name=custom_block" template=’Custom_module::custem-template.html”></referenceBlock>
Which two options can be used to ensure that custom-template.phtml is rendered? (Choose two.)
$block->getHtml('custom_block’)
$block->getChildHtml('custom_block’)
$block->gethtml()
$block->getChildHtml()
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://some-library.com/file',
}
alias: {
'thirdpartylib' : 'library/file',
'thirdpartyurl' : 'https://some-library.com/file',
}
map: {
'thirdpartylib' : 'library/file',
'thirdpartyurl' : 'https://some-library.com/file',
}
An Adobe Commerce developer is implementing a sticky sidebar using a jQuery widget. How would the developer initialize the block in a JavaScript file?
$('.sticky-sidebar').stickyWidget({
container: '.sticky-parent'
});
$('.sticky-sidebar').sticky({
container: '.sticky-parent'
});
$.mage.widget({
sticky: '.sticky-sidebar'
});
An Adobe Commerce developer wants to apply a knockout binding to a < div > to run a function, onClick(), when it's clicked. Which two solutions would the developer use to achieve this? (Choose two.)
<div data-bind="click: onClick"></div>
<div data-bind="click: onClick()"></div>
<div click="onClick"></div>
<div><!-- ko click: 'onClick' --> <!-- /ko --></div>
Which UI component property is used for cross tracking property changes?
listens
links
exports
An Adobe Commerce developer has been asked to override the registration email template. What pattern would they use to override the registration email template in a custom theme?
/_/email
< theme dir >/email
< theme dir>/< ModuleVendorName >_< ModuleName >/emails
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?
<referenceBlock name="test.component">
<argument>
<argument name="components" xsi:type="array">
<!-- Your code custom -->
....
</argument>
</arguments>
</referenceBlock>
<referenceBlock name="test.component">
<argument>
<argument name="jsLayout" xsi:type="array">
<!-- Your code custom -->
....
</argument>
</arguments>
</referenceBlock>
<referenceBlock name="test.component">
<argument>
<argument name="jsComponents" xsi:type="array">
<!-- Your code custom -->
....
</argument>
</arguments>
</referenceBlock>
An Adobe Commerce developer wants to create a single content area in < div id=’element’ >. < /div > with multiple panels, and only the active panel's content is visible. The first panel's content should show by default. How would a developer achieve the desired result using a jQuery Widget?
$("#element").collapsible();
$("#ement").collapsible("tab": {"active" : 0});
$("#element").tabs();
An Adobe Commerce developer is building a feature using Knockout.js. Which binding is used to find the children nodes within the object in the UiRegistry by provided name?
template
scope
mageInit
