Magento 2 Front-end Developer Certification Practice Exam

Érika Giroux
Quiz by Érika Giroux, updated more than 1 year ago
Érika Giroux
Created by Érika Giroux over 1 year ago
9608
8

Description

This quiz was made using my own study notes and the study guide from https://swiftotter.com/technical/certifications/magento-2-frontend-developer-study-guide. It is by no means official and is not necessarily similar to the real Magento certification exam.

Resource summary

Question 1

Question
In which folders can themes be located? (select all that apply)
Answer
  • app/design/adminhtml/<Vendor>/<Theme>
  • app/design/frontend/<Vendor>/<Theme>
  • vendor/<path/defined/in/composer.json>
  • app/code/<Vendor>/<Theme>
  • app/design/frontend/base/<Theme>

Question 2

Question
A composer-based theme will necessarily be found in the vendor/ directory
Answer
  • True
  • False

Question 3

Question
What is the difference if a theme is installed in one or the other of the possible directories (app/design/ or vendor/)?
Answer
  • Composer-based themes are loaded from an external source and cannot be modified directly, whereas local themes are part of the project’s source code and can be modified directly
  • Themes for the Adminhtml area must be loaded through Composer whereas themes for the Frontend area must be located in app/design/.
  • Only official themes provided by Magento (Blank and Luma) can be loaded through Composer. Themes from other vendors must be installed in app/design/.

Question 4

Question
Which folders can exist within a theme? The [blank_start]etc[blank_end]/ folder usually contains only the view.xml file. The [blank_start]i18n[blank_end]/ folder contains theme translations in csv files. The [blank_start]media[blank_end]/ folder contains preview.jpg, a screenshot of the theme. The [blank_start]web/css[blank_end]/ folder contains the stylesheets for the theme. The [blank_start]web/css/source[blank_end]/ folder contains the .less files. The [blank_start]web/css/sources/lib[blank_end]/ folder contains overrides for the UI Library files found in lib/web/css/source/lib. The [blank_start]web/fonts[blank_end]/ folder contains fonts for the theme. The [blank_start]web/images[blank_end]/ folder contains images for the theme. The [blank_start]web/js[blank_end]/ folder contains javascript files for the theme. The <Vendor_Module>/[blank_start]web/css/source[blank_end]/ folder contains overrides of .less files for specific modules. The <Vendor_Module>/[blank_start]layout/override/base[blank_end]/ folder contains layouts that override the default module layouts. The <Vendor_Module>/[blank_start]layout/override[blank_end]/<parent_theme>/ folder contains layouts that override the parent theme layouts for the module. The <Vendor_Module>/[blank_start]templates[blank_end]/ folder contains theme templates which override the default module templates or parent theme templates for this module. Custom templates are also stored in this directory.
Answer
  • etc
  • i18n
  • media
  • web/css
  • web/css/source
  • web/css/source/lib
  • web/fonts
  • web/images
  • web/js
  • web/css/source
  • layout/override/base
  • layout/override
  • templates

Question 5

Question
Which folders are optional and which are required in a theme? Select all folders that are required.
Answer
  • <Vendor_Module>/
  • etc/
  • i18n/
  • media/
  • web/

Question 6

Question
Which files are required to be present in a theme? Select all that apply.
Answer
  • registration.php
  • theme.xml
  • etc/view.xml
  • composer.json
  • i18n/en_US.csv
  • media/preview.jpg

Question 7

Question
Which design areas exist?
Answer
  • frontend
  • adminhtml
  • base
  • code
  • backend

Question 8

Question
What is the difference between them, and what do design areas have in common? Select all that apply.
Answer
  • A theme is created either for the frontend OR adminhtml area. The area is defined in the registration.php file
  • A module can contain files for both frontend AND adminhtml and can also share files between the two areas by putting them in the view/base/ directory
  • Placing a file in the view/frontend/ or view/adminhtml/ folder will override a file of the same name placed in the view/base folder
  • A local theme can overrides files from both frontend AND adminhtml
  • A module is created either for the frontend OR adminhtml area. The area is defined in the registration.php file

Question 9

Question
Design areas are used for separating the admin panel functionality from the storefront
Answer
  • True
  • False

Question 10

Question
What do you need to do in order to apply an Admin theme?
Answer
  • Create a new module and specify the theme in the arguments supplied for the Magento\Theme\Model\View\Design class in the module's etc/adminhtml/di.xml.
  • Simply reload the admin panel after adding the new theme. The latest theme will be applied automatically.
  • Edit the core_config_data table manually and add the theme id as a value for the design/adminhtml/theme/theme_id path.
  • In the admin panel, go to Content > Design > Configuration and set the theme for the Admin scope. Clear all caches for the changes to take effect.

Question 11

Question
What are the differences between a parent theme and a child theme? Select all that apply.
Answer
  • The child theme inherits view configuration, templates, layouts and static files from its parent(s)
  • The child theme is the currently selected theme whereas the parent is only indirectly active (its static files, layouts and templates will be used if not overridden by the child theme)
  • Any theme can be chosen for display (whether or not it specifies a parent theme in theme.xml)
  • A parent theme is only used as a backbone for other themes to extend but it cannot be activated directly
  • A child theme can only be used for temporary design changes using the Design Schedule feature but it cannot be activated as the website's main theme
  • Only the default Blank and Luma themes can be used as parent themes. All other themes must be descendants of one of the base themes

Question 12

Question
The parent theme is declared in the child theme’s [blank_start]theme.xml[blank_end] file, in the [blank_start]<parent>[blank_end] node
Answer
  • theme.xml
  • composer.json
  • registration.php
  • parent
  • parent_theme

Question 13

Question
Describe the fallback mechanism between parent and child themes. Templates and static files are [blank_start]overridden[blank_end] in the child theme Configuration files are [blank_start]extended[blank_end] in the child theme Layout files are [blank_start]extended[blank_end] by default but can be [blank_start]overridden[blank_end] if placed in the layout/[blank_start]override[blank_end] folder
Answer
  • overridden
  • extended
  • extended
  • overridden
  • extended
  • overridden
  • overridden
  • extended
  • override
  • extend

Question 14

Question
How do the configuration settings found in the Admin UI under Content > Design > Configuration affect theme rendering? Select all that apply.
Answer
  • The configuration settings are not theme configuration but rather store design configuration
  • The configuration settings are stored in core_config_data but not found in Stores > Configuration
  • The configuration settings follow the Website > Store > Store View hierarchy
  • Each endpoint can be configured separately and inherits from its parents
  • The values are retrieved like any other store configuration value
  • The configuration settings are used to specify theme settings such as the parent theme and the theme's preview image
  • The configuration settings can be defined for each theme separately

Question 15

Question
What happens if a theme is added or removed? Themes are automatically added in the theme table in the database when accessing the Design configuration page [blank_start]True[blank_end] If a theme is removed, the default theme will automatically be used [blank_start]True[blank_end] If a theme is removed, the theme will automatically be removed from the theme table [blank_start]True[blank_end] A composer theme can always be uninstalled by running the php bin/magento theme:uninstall command [blank_start]False[blank_end]
Answer
  • True
  • False
  • True
  • False
  • True
  • False
  • True
  • False

Question 16

Question
Where would you go to add a scheduled design change?
Answer
  • In the Admin panel, under Content > Design > Schedule
  • In the Admin panel, under Content > Design > Configuration. Select the appropriate scope and navigate to the Design Schedule section
  • <start_date> and <end_date> nodes can be added in the theme's theme.xml file

Question 17

Question
What is the effect if both Contend > Design > Configuration and Contend > Design > Schedule are used at the same time? Select all that apply.
Answer
  • The theme selected in Design Schedule overrides the theme selected in Design Configuration
  • Design Configuration will be the default option if there are no scheduled design changes
  • Design Schedule applies the theme between the dates specified
  • At the end of the scheduled design change, the temporary theme will be removed and Magento will revert to the Luma theme if no other theme is specified through the Design Schedule
  • The theme must be specified in either Design Configuration OR Design Schedule. The Design Mode can be changed in Stores > Configuration > General > Design.

Question 18

Question
What attributes are required on a <container> layout element in Magento 2.1.x?
Answer
  • name
  • htmlTag
  • htmlClass
  • label
  • before
  • after
  • as
  • output
  • htmlId

Question 19

Question
How would you remove a block or container from a layout?
Answer
  • Using <referenceBlock name="[element_name]" remove="true" /> or <referenceContainer name="[element_name]" remove="true" />
  • Using <reference name="[element_name]"><action method="remove" /></reference>
  • Using <referenceBlock name="[element_name]"> or <referenceContainer name="[element_name]"> and setting an argument with the name "remove" and the value "true"
  • Using <remove name="[element_name]" />

Question 20

Question
What attributes are required on a <block> layout element in Magento 2.1.x?
Answer
  • class
  • name
  • before
  • after
  • as
  • template
  • cacheable

Question 21

Question
What attributes are required on a <move> layout instruction?
Answer
  • element
  • destination
  • as
  • before
  • after

Question 22

Question
How would you include a layout handle? <[blank_start]update[blank_end] [blank_start]handle[blank_end]="name_of_the_handle_to_include" />
Answer
  • update
  • handle

Question 23

Question
How can the page layout be specified? The page layout is specified in a layout XML file, in the root <[blank_start]page[blank_end]/> node using the [blank_start]layout[blank_end] argument.
Answer
  • page
  • layout

Question 24

Question
What is the purpose of page layouts? Select all that apply.
Answer
  • Create a structured and common set of instructions to render pages
  • The page layouts can be selected throughout the admin panel to provide a specific layout by page
  • Give layout instructions for a specific page using the module_controller_action structure

Question 25

Question
What is the main difference between the Page Layout and Page Configuration layout types?
Answer
  • Page Layouts only contain containers, unlike Page Configuration layouts, which can contain both blocks and containers
  • A Page Configuration layout is necessarily associated with a specific controller action, unlike a Page Layout, which can be used for multiple pages

Question 26

Question
How can the available layout handles for a given page be determined? Select all that apply.
Answer
  • Look at the body class. One of the classes contains the path. Exchange the dashes for underscores to get the layout handle
  • The method $block->getLayout()->getUpdate()->getHandles() can be used to get the list of handles while debugging
  • Look at the url of the page in the browser's address bar. Exchange the slashes for underscores to get the layout handle

Question 27

Question
In order to add a layout change that will be available on every page, a module should use the [blank_start]default[blank_end].xml layout handle.
Answer
  • default

Question 28

Question
Select all layout handles that can be used to customize a product page's layout.
Answer
  • default
  • catalog_product_view
  • catalog_product_view_type_[type]
  • catalog_product_view_id_[id]
  • catalog_product_view_sku_[sku]
  • catalog_product_view_name_[name]
  • catalog_product_view_category_[category]

Question 29

Question
Are the following layout elements available on Page Layouts, Page Configurations or both? html [blank_start]Page Configuration[blank_end] head [blank_start]Page Configuration[blank_end] body [blank_start]Page Configuration[blank_end] title [blank_start]Page Configuration[blank_end] meta [blank_start]Page Configuration[blank_end] link [blank_start]Page Configuration[blank_end] css [blank_start]Page Configuration[blank_end] script [blank_start]Page Configuration[blank_end] container [blank_start]Both[blank_end] referenceContainer [blank_start]Both[blank_end] block [blank_start]Page Configuration[blank_end] referenceBlock [blank_start]Page Configuration[blank_end] update [blank_start]Both[blank_end] move [blank_start]Both[blank_end]
Answer
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Page Configuration
  • Page Layout
  • Both
  • Page Configuration
  • Page Layout
  • Both
  • Page Configuration
  • Page Layout
  • Both
  • Page Configuration
  • Page Layout
  • Both
  • Page Configuration
  • Page Layout
  • Both
  • Page Configuration
  • Page Layout
  • Both
  • Both
  • Both
  • Both
  • Both
  • Both
  • Both
  • Both
  • Both

Question 30

Question
What is the default block class?
Answer
  • \Magento\Framework\View\Element\Template
  • \Magento\Cms\Block\Block
  • \Magento\Framework\View\Element\AbstractBlock

Question 31

Question
What are the differences between blocks and containers? Fill in the blanks. A [blank_start]container[blank_end] is a structure without content that holds other layout elements such as blocks and containers A [blank_start]block[blank_end] is a unit of page output that renders some distinctive content (anything visually tangible for the end-user). A [blank_start]block[blank_end] is associated with a PHP class that makes certain variables and method available to the template A [blank_start]container[blank_end] can wrap its content in an HTML tag A [blank_start]block[blank_end] is associated with a template A [blank_start]container[blank_end] renders its children automatically A [blank_start]block[blank_end] can contain other blocks, but the template is responsible for rendering them A [blank_start]container[blank_end] will not render any output if there are no children assigned to it
Answer
  • container
  • block
  • container
  • block
  • container
  • block
  • container
  • block
  • container
  • block
  • container
  • block
  • container
  • block
  • container
  • block

Question 32

Question
If you need to override a module layout, where would you put the layout file?
Answer
  • theme_dir/Vendor_Module/layout/override/base/name_of_layout.xml
  • theme_dir/Vendor_Module/layout/override/frontend/name_of_layout.xml
  • theme_dir/Vendor_Module/layout/overrides/base/name_of_layout.xml
  • theme_dir/Vendor_Module/layout/overrides/frontend/name_of_layout.xml

Question 33

Question
During layout merging, what is the order in which XML files are merged? Module files Sorted according to their module priority (array index of module's position in app/ etc/config.php). If their priorities are equal, they are sorted according to their alphabetical priority) - Module [blank_start]base[blank_end] files loaded - Module [blank_start]area[blank_end] files loaded Theme files - [blank_start]Layout[blank_end] files loaded - [blank_start]Override[blank_end] files loaded - [blank_start]Theme override[blank_end] files replaced
Answer
  • base
  • area
  • Layout
  • Override
  • Theme override

Question 34

Question
What are additive changes and what are overriding changes during layout merging? Adding a new block or setting a new argument is considered and [blank_start]additive[blank_end] change. Changing the value of an existing argument is considered and [blank_start]overriding[blank_end] change.
Answer
  • additive
  • overriding

Question 35

Question
In which element are image properties configured in etc/view.xml? <[blank_start]images[blank_end] module=“Magento_Catalog”>
Answer
  • images

Question 36

Question
What are the available image types in etc/view.xml? Select all that apply
Answer
  • image
  • small_image
  • swatch_image
  • swatch_thumb
  • thumbnail
  • large_image
  • swatch_thumbnail
  • base_image

Question 37

Question
In what order are image properties defined in etc/view.xml? [blank_start]width[blank_end] [blank_start]height[blank_end] [blank_start]constrain[blank_end] [blank_start]aspect_ratio[blank_end] [blank_start]frame[blank_end] [blank_start]transparency[blank_end] [blank_start]background[blank_end]
Answer
  • width
  • height
  • constrain
  • aspect_ratio
  • frame
  • transparency
  • background

Question 38

Question
How do you access a value from etc/view.xml in a template? $block->[blank_start]getVar[blank_end]($name, $module = null)
Answer
  • getVar

Question 39

Question
How would you set arguments on a block? <block name="my_block" template="Vendor_Module::path/to/template.phtml"> <[blank_start]arguments[blank_end]> <[blank_start]argument[blank_end] [blank_start]name[blank_end]="my_argument" [blank_start]xsi:type[blank_end]="sring" [blank_start]translate[blank_end]="true">My value</argument> <[blank_start]argument[blank_end] [blank_start]name[blank_end]="other_argument" xsi:type="array"> <[blank_start]item[blank_end] [blank_start]name[blank_end]="item1" xsi:type="number">1</item> ... </argument> </arguments> </block>
Answer
  • arguments
  • argument
  • name
  • xsi:type
  • translate
  • argument
  • item
  • name
  • name

Question 40

Question
What is the correct way to use a loop in a .phtml template according to the Magento coding standards?
Answer
  • <?php foreach ($items as $item): ?> ... <?php endforeach; ?>
  • <?php foreach ($items as $item) { ?> ... <?php } ?>
  • <?php for ($i = 0; $i < count($items); $i++) { ?> ... <?php } ?>
  • <?php for ($i = 0; $i < count($items); $i++): ?> ... <?php endfor; ?>

Question 41

Question
Name the common methods available on the $block variable: [blank_start]getRootDirectory[blank_end]() - Instantiates filesystem directory [blank_start]getMediaDirectory[blank_end]() - Get media directory [blank_start]getUrl[blank_end]($route = '', $params = []) - Generate url by route and parameters [blank_start]getBaseUrl[blank_end]() - Get base url of the application [blank_start]getChildBlock[blank_end]($alias) - Retrieve child block by name [blank_start]getChildHtml[blank_end]($alias = '', $useCache = true) - Retrieve child block HTML [blank_start]getChildChildHtml[blank_end]($alias, $childChildAlias = '', $useCache = true) - Render output of child child element [blank_start]getChildData[blank_end]($alias, $key = '') - Get a value from child block by specified key [blank_start]getBlockHtml[blank_end]($name) - Retrieve block html [blank_start]formatDate[blank_end]($date = null, $format = \IntlDateFormatter::SHORT, $showTime = false, $timezone = null) - Retrieve formatting date [blank_start]formatTime[blank_end]($time = null, $format = \IntlDateFormatter::SHORT, $showDate = false) - Retrieve formatting time [blank_start]getModuleName[blank_end]() - Retrieve module name of block [blank_start]escapeHtml[blank_end]($data, $allowedTags = null) - Escape HTML entities [blank_start]escapeJs[blank_end]($string) - Escape string for the JavaScript context [blank_start]escapeHtmlAttr[blank_end]($string, $escapingSingleQuote = true) - Escape a string for the HTML attribute context [blank_start]escapeCss[blank_end]($string) - Escape string for the CSS context [blank_start]stripTags[blank_end]($data, $allowableTags = null, $allowHtmlEntries = false) - Wrapper for standard [blank_start]strip_tags[blank_end]() function with extra functionality for html entities [blank_start]escapeUrl[blank_end]($string) - Escape URL [blank_start]getVar[blank_end]($name, $module = null) - Get variable value from view configuration
Answer
  • getRootDirectory
  • getMediaDirectory
  • getUrl
  • getBaseUrl
  • getChildBlock
  • getChildHtml
  • getChildChildHtml
  • getChildData
  • getBlockHtml
  • formatDate
  • formatTime
  • getModuleName
  • escapeHtml
  • escapeJs
  • escapeHtmlAttr
  • escapeCss
  • stripTags
  • strip_tags
  • escapeUrl
  • getVar

Question 42

Question
How can a group of child blocks be rendered in a template?
Answer
  • Using the getGroupChildNames() method and then rendering each block by name in a loop
  • Using the getGroupChildHtml() method
  • Using the getData('group_items') method in a foreach loop

Question 43

Question
Given the following code in layout XML, how would you render that value using a magic getter in a template? <block name="my_block" template="Vendor_Module::path/to/template.phtml"> <arguments> <argument name="name_of_argument" xsi:type="string">Value of argument</argument> </arguments> </block> <?= $block->[blank_start]getNameOfArgument[blank_end](); ?>
Answer
  • getNameOfArgument

Question 44

Question
What command would you use to deploy static view files for the Magento/luma theme in the fr_FR locale using the compact strategy? bin/magento [blank_start]setup:static-content:deploy[blank_end] [blank_start]fr_FR[blank_end] --[blank_start]theme[blank_end] [blank_start]Magento/luma[blank_end] -[blank_start]s[blank_end] [blank_start]compact[blank_end]
Answer
  • fr_FR
  • theme
  • s
  • compact
  • Magento/luma
  • setup:static-content:deploy

Question 45

Question
Explain the differences between the various static files deployment strategies. When the [blank_start]Standard[blank_end] strategy is used, all static view files for all packages are deployed. The [blank_start]Quick[blank_end] strategy minimizes the time required for deployment when files for more than one locale are deployed. The [blank_start]Compact[blank_end] strategy avoids file duplication by storing similar files in base subdirectories.
Answer
  • Standard
  • Quick
  • Compact

Question 46

Question
What command would you use to create symlinks to LESS files for the Magento/luma theme in the fr_FR locale? bin/magento [blank_start]dev:source-theme:deploy[blank_end] --[blank_start]locale[blank_end] fr_FR --[blank_start]theme[blank_end] Magento/luma
Answer
  • dev:source-theme:deploy
  • locale
  • theme

Question 47

Question
What are the differences between development and production mode in regards to frontend development? Select all that apply.
Answer
  • Production mode will not generate any missing static files
  • Development and default will attempt to symlink any necessary assets into the corresponding folder in pub/static
  • In developer mode, errors are rendered in the browser, while in production and default they are not shown and only written to a report file.
  • Production mode will always load merged and minified CSS and JS files
  • Developer mode will compile LESS files on demand in the browser
  • All caches need to be enabled at all times in Production mode

Question 48

Question
Which LESS compilation options are available in Magento? How are they different? 1. [blank_start]Server-side[blank_end]: less files are compiled with a PHP less library. In developer mode, PHP will generate the CSS files on the fly provided there is not one already. Running static content deploy will also compile the stylesheets 2. [blank_start]Client-side[blank_end]: less files are compiled every page load on the client-side. This results in exceptionally slow response times and horrible flash-of-unstyled-text
Answer
  • Server-side
  • Client-side

Question 49

Question
[blank_start]before="-"[blank_end] - Displays before all other elements in its parent node [blank_start]before="[element_name]"[blank_end] - Displays before the named element [blank_start]before=""[blank_end] - The element is considered non-positioned if the value of after is also empty [blank_start]after="-"[blank_end] - Displays after all other elements in its parent node [blank_start]after="[element_name]"[blank_end] - Displays after the named element [blank_start]after=""[blank_end] - The element is considered non-positioned if the value of before is also empty If both before and after are present, [blank_start]after[blank_end] takes precedence If both before and after are absent or empty, the element is considered as [blank_start]non-positioned[blank_end] If several elements have before or after set to dash (-), all elements display at the top or bottom, but the order is [blank_start]undefined[blank_end] If the before or after attribute refer to an element that is not located in the parent node, the element displays at a [blank_start]random[blank_end] location
Answer
  • before="-"
  • before="[element_name]"
  • before=""
  • after="-"
  • after="[element_name]"
  • after=""
  • after
  • before
  • non-positioned
  • undefined
  • random

Question 50

Question
How would you initialize a JS component using a data-attribute? <div [blank_start]data-mage-init[blank_end]='{"[Vendor_Module/js/path/to/file|alias]": {"[optionKey]": "[optionValue]"}}'>
Answer
  • data-mage-init

Question 51

Question
How would you initialize a JS component using the Magento script tag? <script type=“[blank_start]script/x-magento-init[blank_end]"> { “[.element-selector]”: { “[Vendor_Module/js/path/to/file|alias]”: { “[optionKey]”: “[optionValue]" } } } </script>
Answer
  • script/x-magento-init

Question 52

Question
How would you make sure that your JS component is loaded before the page is loaded? Select all that apply.
Answer
  • Include it in the head tag of the page using the <script> element in layout XML
  • Add this line in requirejs-config.js: deps: ["Vendor_Module/js/path/to/file"]
  • Insert a <script> tag at the beginning of the first template to be rendered

Question 53

Question
In RequireJS, what is the difference between the define and require methods? [blank_start]require[blank_end] executes immediately. [blank_start]define[blank_end] wraps a module that can be requested and used by other modules. It is only executed when called.
Answer
  • require
  • define

Question 54

Question
How can JavaScript on a page be configured using block arguments in layout XML? <arguments>  <argument name="[blank_start]jsLayout[blank_end]" xsi:type="array">   <item name="[blank_start]components[blank_end]" xsi:type="array">    ...   </item>  </argument> </agrument>
Answer
  • jsLayout
  • components

Question 55

Question
Which core Magento jQuery UI Widgets exist? Select all that apply.
Answer
  • Accordion
  • Collapsible
  • DropdownDialog
  • Modal
  • Navigation
  • Prompt
  • Tabs
  • Slider
  • Table
  • Form

Question 56

Question
Given the following code, how would you call the following jQuery UI widget? // Vendor_Module/js/name-of-widget.js define([jquery], function ($) {  $.widget('vendor.myWidget', {   ...  });  return $.vendor.myWidget; });
Answer
  • require(['jquery', 'Vendor_Module/js/name-of-widget'], function ($, nameOfWidget) {  $('.element-selector').myWidget({...}); });
  • require(['jquery', 'Vendor_Module/js/name-of-widget'], function ($, nameOfWidget) {  nameOfWidget(...); });
  • require(['jquery', 'Vendor_Module/js/name-of-widget'], function ($, nameOfWidget) {  $('.element-selector').nameOfWidget({...}); });
  • require(['jquery', 'Vendor_Module/js/name-of-widget'], function ($, nameOfWidget) {  myWidget(...); });

Question 57

Question
How can you call jQuery UI Widget methods?
Answer
  • $(‘.element-selector’).nameOfWidget(’nameOfMethod’);
  • $(‘.element-selector’).nameOfWidget.nameOfMethod();
  • $(‘.element-selector’).call(’nameOfMethod’);
  • nameOfWidget.nameOfMethod($('.element-selector'));

Question 58

Question
How do you add a mixin to customize a jQuery UI widget? var config = {  “[blank_start]config[blank_end]”: {   “[blank_start]mixin[blank_end]”: {    “mage/tabs”: {     'Vendor_Module/js/tabs-mixin’: [blank_start]true[blank_end]    }   }  } };
Answer
  • config
  • mixin
  • true

Question 59

Question
How do you load a file with require.js? The dependencies of a file are specified in the [blank_start]first[blank_end] argument of the define or require method. Paths start from the [blank_start]web[blank_end] directory. The file extension must be [blank_start]omitted in[blank_end] the path. The modules can be called by names defined in [blank_start]requirejs-config.js[blank_end]
Answer
  • first
  • second
  • web
  • web/js
  • omitted from
  • included in
  • requirejs-config.js
  • var/di.xml
  • etc/view.xml

Question 60

Question
Which arguments are received by the function that is returned by a JS mixin?
Answer
  • target - The original object that was returned by the component extended by the mixin
  • additionalData - Additional data passed in the requirejs-config.js file
  • data - Data passed to the original object being extended by the mixin

Question 61

Question
What options are available to configure JavaScript minification and bundling? [blank_start]Merge[blank_end] JavaScript files - Concatenate source JS files from an area together into one file. - Reduces number of JS requests - A massive JS file is downloaded [blank_start]Bundle[blank_end] JavaScript files - Groups JS files into bundles - Downloads several files - Negatively impacts performance [blank_start]Minify[blank_end] JavaScript files - Reduces the JS files' size by stripping whitespace and shortening variable names
Answer
  • Merge
  • Bundle
  • Minify

Question 62

Question
Where is JS bundling and minification configured?
Answer
  • In the Admin panel, in Store > Configuration > Advanced > Developer
  • In etc/config.php
  • In etc/env.php

Question 63

Question
Where is the core UI component module located?
Answer
  • Magento_Ui/js/core/app
  • Magento_Framework/js/ui-component
  • Magento_UI/js/ui-component
  • Magento_Framework/js/core/app

Question 64

Question
How are UI components used in the adminhtml and frontend design areas? [blank_start]Frontend[blank_end] - Configured through layout XML - The jsLayout argument is used to specify information [blank_start]Adminhtml[blank_end] - Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml]) - Included in layout XML with the uiComponent tag
Answer
  • Frontend
  • Adminhtml

Question 65

Question
What are the basic UI components (declared in page layout files)?
Answer
  • Listing
  • Form
  • Table
  • Grid

Question 66

Question
UI Components are a combination of: - [blank_start]XML[blank_end] declaration that specifies the component’s configuration settings and inner structure based on the hierarchy of child UI components - [blank_start]JS class[blank_end] inherited from one of the Magento JS framework UI components base classes (UIElement, UIClass, UICollection) - [blank_start]Related template(s)[blank_end] using [blank_start]KnockoutJS[blank_end] bindings
Answer
  • XML
  • JS class
  • Related template(s)
  • KnockoutJS

Question 67

Question
What is the server-side workflow for the initialization of UI components? [blank_start]1[blank_end]. Searches the .xml files with the declared name among all modules. Merges all files into a single configuration object [blank_start]2[blank_end]. Determines which UI components are used in this particular layout [blank_start]3[blank_end]. Translates the resulting config into JSON and adds it to the response body <script type="text/x-magento-init">{"*": {"Magento_Ui/js/core/app":{<JSON_configuration>}}}</script> [blank_start]4[blank_end]. Merges the resulting config with the configuration from the UI module definition.xml (the UI module definition.xml has the lowest priority)
Answer
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

Question 68

Question
What is the client-side workflow for the initialization of UI components? [blank_start]5[blank_end]. bootstrap.js binds the component as a Model behind the View (template) using Knockout bindings. The UI components are now displayed on the page and are fully interactive [blank_start]2[blank_end]. app.js calls layout.js and passes the UI component’s config into the layout [blank_start]4[blank_end]. The component’s HTML templates are rendered by the knockout.js template engine. bootstrap.js passes our own template engine to knockout [blank_start]3[blank_end]. layout.js creates instances of components. Each UI component’s configuration must have an explicitly declared component property. [blank_start]1[blank_end]. RequireJS requires Magento_Ui/js/core/app and pass JSON configuration as parameter
Answer
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

Question 69

Question
Layout configuration file and UI component declaration - Basic UI components are declared in the [blank_start]page-container[blank_end] node in layout XML <referenceContainer name=“[blank_start]page-container[blank_end]">  <[blank_start]uiComponent[blank_end] name=“[instance_name]"> </referenceContainer> - Nested components are declared in the basic components’ instances config files (stored in view/[area]/[blank_start]ui_component[blank_end]/[instance_name].xml), not in page layouts
Answer
  • page-container
  • uiComponent
  • page-container
  • ui_component

Question 70

Question
Basic UI component config file * The namespace of the name is global. If the file names in different modules are the same, they are [blank_start]merged[blank_end] into a single configuration * Rules to follow: * top node must have the name of one of the [blank_start]basic UI components[blank_end] * top node must contain a link to the [blank_start]XSD schema[blank_end] * Top node can have an [blank_start]<argument name=“data">[blank_end] node. Contains the config for that basic UI component. The child nodes of the <argument/> node will be the argument properties that will be passed in to the component ([blank_start]<item>[blank_end] nodes). * Top node can have nested nodes. Every nested node is regarded as a separate UI component. Nested nodes also contain the <argument/> node.
Answer
  • merged
  • basic UI components
  • XSD schema
  • <argument name=“data">
  • <item>

Question 71

Question
Define the custom KnockoutJS bindings added in Magento. [blank_start]afterRender[blank_end] - Notifies its subscriber when an associated element is inserted in the DOM [blank_start]autoselect[blank_end] - Automatically highlights the text in an input element when it gets focus [blank_start]bindHtml[blank_end]- Renders the provided string, as a collection of HTML elements, inside of the associated node. Instantiates all bindings defined for the rendered elements in the scope of the current view model [blank_start]collapsible[blank_end] - Provides methods and properties required for implementing collapsible panels. May include the following properties: as, closeOnOuter, onTarget, openClass [blank_start]date picker[blank_end] - An adapter for the mage/calendar.js widget [blank_start]fadeVisible[blank_end] - Performs the gradual change of the element’s visibility [blank_start]i18n[blank_end] - Used to translate a string according to the currently enabled locale. Creates the necessary elements for the TranslateInline jQuery widget if it’s enabled on the page [blank_start]keyboard[blank_end] - Allows setting up listeners for the keypressevent of a specific key [blank_start]mageInit[blank_end]- Adapter for the [data-mage-init]attribute used to initialize jQuery widgets on the associated element [blank_start]optgroup[blank_end] - Decorator for the standard Knockout’s options binding which adds the support of nested options, and renders them as the <optgroup> element [blank_start]outerClick[blank_end] - Allows to subscribe for the click event that happens outside of the boundaries of the associated element [blank_start]range[blank_end] - Adapter for the jQuery UI Slider widget. Implements necessary handlers to work with mobile devices [blank_start]resizable[blank_end] - Adapter for the jQuery UI Resizable widget. [blank_start]scope[blank_end]- Binding that allows evaluating descendant nodes in the scope of an object found in the UiRegistry by provided string [blank_start]staticChecked[blank_end]- Implements the behavior similar to the standard checked binding. Doesn’t change the array of the already selected elements if the value of the associated DOM element changes. [blank_start]template[blank_end]- Customization of the existing KO template binding. Used to render a template inside of the associated element. Supports synchronous loading of templates by the provided path instead of searching for them on the page. [blank_start]tooltip[blank_end] - Custom binding for displaying a tooltip. May include the following options: action, center, closeButton, closeOnScroll, delay, position, track, trigger
Answer
  • afterRender
  • autoselect
  • bindHtml
  • collapsible
  • datepicker
  • fadeVisible
  • i18n
  • keyboard
  • mageInit
  • optgroup
  • outerClick
  • range
  • resizable
  • scope
  • staticChecked
  • template
  • tooltip

Question 72

Question
Which of the following are valid Magento KnockoutJS bindings?
Answer
  • <!-- ko if: isVisible-->  <div class="someClass">   <!-- ko i18n: 'Some translatable message!'--><!-- /ko -->   <span data-bind="html: content"></span>  </div> <!-- /ko -->
  • <if args="isVisible">  <div class="someClass">   <translate args="'Some translatable message!'"/>   <span html="content"></span>  </div> </if>
  • <div class="someClass" if="isVisible">  <span translate="'Some translatable message!'"></span>  <span html="content"></span> </div>
  • <div class="someClass" data-bind="if: isVisible">  <span data-bind="translate: 'Some translatable message!'"></span>  <span html="content"></span> </div>
  • <div class="someClass" if="isVisible">  <translate args="'Some translatable message!'"/>  <html args="content"></html> </div>

Question 73

Question
Identify the base UI component classes: [blank_start]uiClass library[blank_end] - An abstract class from which all components are extended. Rarely used as a direct parent for UI components’ classes - Commonly used methods:  - extend()- Implements inheritance of UI components  - initConfig()- Processes the UI component’s configurations.  - initialize()- Called during instantiation  - _super()- Calls the parent UI component method with the same name as the _super() caller - Commonly used properties  - defaults - Declares the list of properties of a UI component’s instance. Declares communications between components if needed (imports/exports/links) [blank_start]uiElement class[blank_end] - Direct successor of uiClass library - Can be used as a direct parent - Commonly used methods:  - initLinks()- Implements component communications  - initObservable()- Allows declaration of observable variables  - observe(isTracked, listOfProperties) method is a wrapper for ko.observable() and ko.observableArray()  - isTracked- defines access usage  - listOfProperties - {String} - treated as a space-separated list of properties's names  - listOfProperties - {Array} - List of properties's names  - listOfProperties - {Object} - List of properties's names  - track(listOfProperties) - Equal to observe(true, listOfProperties)  - initModules()- Initializes external UI components’s instances and links them to local variables. Works with the modules section of the config, in which each key is the variable’s name and each value is the instance’s name.  - getTemplate()- Returns a file path to the UI component’s template  - hasTemplate() - Verifies that the template property was specified in the config [blank_start]uiCollection class[blank_end] - Should be used as a base class by any components that contain a collection of child UI components - Inherits from uiElement - Commonly used methods:  - initElement() - Add custom functionality to a child Ui component or to the current UI component at the moment when the child UI component initializes. Gets the child component instance as a parameter  - destroy() - Removes the following for the child component and itself:   - link to the component in uiRegistry   - link to the component is parent component   - event listeners  - getChild(childIndex) - Returns an element from the collection of child UI components - Commonly used properties:  - elems - Observable property that contains the collection of child components  - childDefaults - Can be used to set the children defaults - template:  - vendor/magento/module-ui/view/base/web/templates/collection.html  - Performs only one task: renders child templates if they exist [blank_start]uiLayout service object[blank_end] - JS function object used for initializing and configuring UI components - run(nodes, parent, cached, merge) method is the class entry point represented by uiLayout - nodes configuration object.  - name - The name of the property is the shortened name of the component.  - parent - If the parent component is not yet initialized, uiLayout waits for it to appear in the uiRegistry.  - template  - config  - children   - isTemplate - if true, uiLayout stores the config in a private templates variable instead of initializing the component  - nodeTemplate - use store config to create dynamic component instances during runtime by specifying the full name of the configuration  - provider
Answer
  • uiClass library
  • uiElement class
  • uiCollection class
  • uiLayout service object

Question 74

Question
Define the various ways to link properties of UI components: [blank_start]exports[blank_end] - Used to copy a local value to some external entity - Object with key (name of the internal property or method that is tracked for changes) and value (name of the property or method that receives the value) [blank_start]imports[blank_end] - Used to track changes of an external entity property - Object with key (name of the internal property or method that receives the value) and value (name of the property or method that is tracked for changes) [blank_start]links[blank_end] - Used for cross tracking property changes: both are tracked and changing one results in changing the other - Object with key (name of the internal property or method that sends an receives notifications) and value (name of the property or method that sends and receives the value) [blank_start]listens[blank_end] - Used to track the changes of a component’s property - Object with key (name of the observable property or method that is tracked for changes) and value (name of the internal property or method which listens tot he changes)
Answer
  • exports
  • imports
  • links
  • listens

Question 75

Question
How do you specify the KO template for a UI component? - For most UI components, set the [blank_start]template[blank_end] option - The template is specified as the module name, a slash, followed by the file path within the module’s view/<area>/web/[blank_start]template[blank_end] directory but without the .[blank_start]html[blank_end] suffix. E.g.: vendor/magento/module-customer/view/frontend/web/template/authentication-popup.html is specified as [blank_start]Magento_Customer/authentication-popup[blank_end]
Answer
  • template
  • template
  • html
  • Magento_Customer/authentication-popup

Question 76

Question
Tracks are specified in the UI component’s JS files in the [blank_start]tracks[blank_end] property. These convert the specified properties on the UI components into a KO observable
Answer
  • tracks
  • imports
  • exports
  • links
  • listens

Question 77

Question
How do you bind a KO view model to a section of the DOM with the scope binding? The [blank_start]scope[blank_end] binding connects a UI component that is registered in the [blank_start]uiRegistry[blank_end] with an element that has already been configured. This changes that element's KO binding scope to use the class that represents the specified UI component.
Answer
  • scope
  • uiRegistry

Question 78

Question
How do you render a ko template of a UiComponent? Specify the template in the defaults.[blank_start]template[blank_end] property The name of the template is the name of the module + slash + path to file inside view/<area>/web/[blank_start]template[blank_end] directory
Answer
  • template
  • template

Question 79

Question
Define the various types of Knockout observables: ko.[blank_start]observable[blank_end]() - Creates a basic observable with a value. Works with any data type except arrays. If the observable contains an array or an object, a regular KO observable does not trigger updates when values within the array change. ko.[blank_start]observableArray[blank_end]([]) - Should be used when working with arrays ko.[blank_start]computed[blank_end](callback) - Observable functions Use the observable’s [blank_start]subscribe[blank_end]() method to listen to changes. The real value of the observable comes out when you bind that to an element in the template.
Answer
  • observable
  • observableArray
  • computed
  • subscribe

Question 80

Question
Which of the following is a Knockout virtual element?
Answer
  • <!-- ko something: something --><!-- /ko -->
  • <div data-bind="something: something">
  • <div something="something">
  • <something args="something">

Question 81

Question
Demonstrate an understanding of ES5 string literal templates like ${$.provider}. What does $. Inside of ${ } resolve to? Inside the ${}, using $ resolves to [blank_start]this[blank_end]. As such, $.provider resolves to [blank_start]this[blank_end].provider
Answer
  • this
  • this

Question 82

Question
Which of the main css files included in the default_head_blocks.xl file in a Magento theme? Select all that apply.
Answer
  • styles-m.css
  • styles-l.css
  • print.css
  • styles-s.css
  • screen.css
  • main.css

Question 83

Question
CSS files can be added in layout using the link or css nodes
Answer
  • True
  • False

Question 84

Question
A convention is that all files that are included in a LESS file by @import constructs start with an [blank_start]underscore[blank_end] ([blank_start]_[blank_end]).
Answer
  • underscore
  • _

Question 85

Question
What is the correct way to define a mixin in LESS?
Answer
  • .my-mixin(@arguments) { ... }
  • @my-mixin($arguments) { ... }
  • =my-mixin(@arguments) { ... }
  • @mixin my-mixin($arguments) { ... }

Question 86

Question
What does the special variable @arguments do in a LESS mixin?
Answer
  • Takes the arguments that were passed into the mixin an renders them in that order
  • Defines additional arguments to be used in the mixin
  • Contains default arguments that are passed to all mixins by the framework

Question 87

Question
What is the most practical way to write this selector in LESS using selector concatenation? .block__element--modifier .[blank_start]block[blank_end] {  [blank_start]&__element[blank_end] {   [blank_start]&--modifier[blank_end] {    ...   }  } }
Answer
  • block
  • &__element
  • &--modifier

Question 88

Question
Demonstrate the process from magento-less files via php preprocessing into real LESS files with extracted @import directives. Where can the intermediate files be found? Magento’s LESS classes are found in the [blank_start]\Magento\Framework\Css[blank_end] namespace When loading the page, Magento looks for any CSS insertions into the head tag in layout XML. Any CSS file references are changed to [blank_start]less[blank_end] and the search is made for a LESS file with that name. From there mage parses the @[blank_start]imports[blank_end] and //@[blank_start]magento_import[blank_end] instructions and assembles file paths based on the fallback directories Magento’s Luma and blank themes load in 2 CSS files: [blank_start]styles-l.css and styles-m.css[blank_end]. These are the entry points into the LESS file structure. These are also the output files. All LESS files that have been imported by another LESS file are included into one of these 2 files. The intermediate files are found in the [blank_start]var/view_preprocessed[blank_end] directory. From there, they are symlinked into the [blank_start]pub/static[blank_end] directory.
Answer
  • \Magento\Framework\Css
  • less
  • imports
  • magento_import
  • var/view_preprocessed
  • pub/static
  • styles-l.css and styles-m.css
  • styles.css and print.css

Question 89

Question
What command do you need to run when you create a new LESS file? bin/magento [blank_start]dev:source-theme:deploy[blank_end]
Answer
  • dev:source-theme:deploy

Question 90

Question
What is the custom LESS directive added by Magento in order to implement a fallback system in the import mechanism?
Answer
  • //@magento_import
  • @magento_import
  • //@mage_import
  • @mage_imports

Question 91

Question
Define the primary LESS files found in most modules: [blank_start]_module.less[blank_end] is the main entry point of a module stylesheet. For a module, it can have partials of its own, if desired, and should placed them in a /module directory next to this file. For a theme, this would override the core modules primary stylesheet. As a result, this would be done in cases where a significant portion of the styles are being updated. [blank_start]_extend.less[blank_end] should mostly or entirely be empty in modules. For themes, if most of the core modules stylesheets are good and the goal is only to update a few things, the easiest way to do that is to create an _extend.less file. This file is loaded after _module.less and consequently will apply the same selectors. [blank_start]_extends.less[blank_end] contains a massive list of abstract selectors that can be extended from and mixins.
Answer
  • _module.less
  • _extend.less
  • _extends.less

Question 92

Question
Where are the CSS merging and minification options found?
Answer
  • In the Admin panel, in Stores > Configuration > Advanced > Developer > CSS Settings
  • In app/config.php
  • In app/env.php
  • In dev/tools/grunt/configs/themes.js

Question 93

Question
Where are the Magento UI library LESS files found?
Answer
  • lib/web/css/source/lib
  • Magento_Ui/web/css/source/
  • Magento_Framework/web/css/source

Question 94

Question
How are the Magento UI Library mixins imported in a LESS file?
Answer
  • @import '../../css/source/lib/[name_of_module]';
  • @import 'lib/[name_of_module]'
  • //@magento_import 'lib/[name_of_module]'

Question 95

Question
Where should overrides of existing LESS variables be added?
Answer
  • <theme_dir>/web/css/source/_theme.less
  • <theme_dir>/web/css/source/_variables.less
  • <theme_dir>/web/css/source/lib/_variables.less

Question 96

Question
How would you create an override for the core Magento UI library dropdowns in your theme?
Answer
  • <theme_dir>/web/css/source/lib/_dropdowns.less
  • <theme_dir>/web/css/source/_dropdowns.less
  • <theme_dir>/Magento_Ui/web/css/source/lib/_dropdowns.less
  • <theme_dir>/lib/web/css/source/_dropdowns.less

Question 97

Question
What is the purpose of each of the different file types in a theme? [blank_start]composer.json[blank_end] - Describe the theme’s dependencies and some meta information. The autoload.files node informs Composer about the registration.php file. [blank_start]registration.php[blank_end] - Registers the module as a theme with Magento. [blank_start]theme.xml[blank_end] - Describes the theme to Magento. Contains the following nodes: * [blank_start]title[blank_end] (required) * [blank_start]parent[blank_end] (optional) * media/preview_image (optional) [blank_start]etc/view.xml[blank_end] - This file contains images configuration for all storefront product images and thumbnails.
Answer
  • composer.json
  • registration.php
  • title
  • parent
  • etc/view.xml
  • theme.xml

Question 98

Question
What can be changed in the Design tab or a product page?
Answer
  • Theme
  • Layout
  • Display product options in
  • Layout update XML
  • Design Schedule
  • Content

Question 99

Question
What happens when a category is an "anchor"?
Answer
  • The products from the child categories are displayed
  • A link to the category is added in the main navigation
  • The category appears in the category filter in the layered navigation

Question 100

Question
How would you configure a category to inherit design settings from its parent category?
Answer
  • "Use parent category settings" option in design tab
  • A category automatically inherits design settings from its parent
  • Use the catalog_category_view_id_[id]_children.xml layout handle

Question 101

Question
How would you display a Cms block as a landing page for a category?
Answer
  • Setting Display Mode to Static Block only on the category
  • Create a Cms page with the same url key as the category and it will automatically be used instead of the category
  • Using the Layout update XML field to remove the category.products.list block and replace it with a static block

Question 102

Question
What Cms template directive would you use to output a variable in a Cms block or email template?
Answer
  • {{var [nameOfVariable]}}
  • {{getVar [nameOfVariable]}}
  • {{var name="[nameOfVariable]"}}

Question 103

Question
What Cms template directive would you use to output a URL?
Answer
  • {{store url="[path]"}}
  • {{url [path]}}
  • {{url path="[path]"}}

Question 104

Question
What Cms template directive would you use to output the url of a static view file?
Answer
  • {{view url="[path]"}}
  • {{static url="[path]"}}
  • {{view src="[path]"}}
  • {{static path="[path]"}}

Question 105

Question
What happens if you use a {{block id="my_id"}} template directive like this?
Answer
  • The Cms block with the identifier "my_id" is outputted
  • An empty block with the class \Magento\Framework\View\Element\Template and a name of "my_id" is created
  • There is an error because the block id must be numeric

Question 106

Question
How do you create a new widget in your custom module that can be used in Cms content?
Answer
  • Configure the widget in etc/widgets.xml
  • Simply create a new class that implements \Magento\Widget\Block\BlockInterface and it will be registered as a widget automatically
  • Configure the widget in view/frontend/layout/widget.xml

Question 107

Question
What does the template node do in the widgets.xml configuration file?
Answer
  • Filters which templates will be available for the widget in a specific container
  • Defines new templates for the module
  • Assign one template to a container so that template is automatically used if the widget is inside the specified container

Question 108

Question
Where would you customize customer addresses templates?
Answer
  • Stores > Configuration > Customers > Customer Configuration > Address templates
  • Stores > Configuration > General > General > Locale Options > Address templates
  • The templates are predefined for each locale and can be overridden in a customer_addresses.xml file in a custom module
  • Modify the Magento_Customer::address.phtml template

Question 109

Question
What command would you use to locate all translatable strings within a particular path? bin/magento [blank_start]i18n:collect-phrases[blank_end] path/to/module
Answer
  • i18n:collect-phrases

Question 110

Question
What command would you use to create a language pack from a csv file? bin/magento [blank_start]i18n:pack[blank_end] /absolute/path/to/file.csv [language_code]
Answer
  • i18n:pack

Question 111

Question
In what order are translations applied? [blank_start]4[blank_end]. Database translations [blank_start]2[blank_end]. Theme translations [blank_start]1[blank_end]. Module translations [blank_start]3[blank_end]. Translation packages
Answer
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

Question 112

Question
How would you translate the phrase "2 items" in a .phtml template? "2" is the variable $numItems; <?= __('[blank_start]%1 items[blank_end]', [blank_start]$numItems[blank_end]); ?>
Answer
  • %1 items
  • $numItems

Question 113

Question
How would you translate the phrase "2 items" in an email template? "2" is the variable numItems {{trans "[blank_start]%items items[blank_end]" items=[blank_start]numItems[blank_end]}}
Answer
  • %items items
  • numItems

Question 114

Question
How would you translate the phrase "Shopping Cart" in a UI Component? <span data-bind="[blank_start]i18n[blank_end]: 'Shopping Cart''></span> <[blank_start]translate[blank_end] args="'Shopping Cart'"></[blank_start]translate[blank_end]> <span [blank_start]translate[blank_end]="'Shopping Cart'">
Answer
  • i18n
  • translate
  • translate
  • translate

Question 115

Question
How would you translate the phrase "2 items" in a JS file? "2" is the variable numItems $.mage.[blank_start]__[blank_end]('[blank_start]%1 items[blank_end]').replace('%1', numItems); $[blank_start]t[blank_end]('[blank_start]%1 items[blank_end]').replace('%1', numItems);
Answer
  • __
  • %1 items
  • t
  • %1 items

Question 116

Question
What command would you use to know which caches are enabled or disabled? bin/magento [blank_start]cache:status[blank_end]
Answer
  • cache:status

Question 117

Question
What command would you use to switch to production mode? bin/magento [blank_start]deploy:mode:set[blank_end] [blank_start]production[blank_end]
Answer
  • deploy:mode:set
  • production

Question 118

Question
Identify the containers (red) and the blocks (blue) in this page
Answer
  • header.panel
  • header.links
  • product.info.media
  • product.info.main
  • catalog.topnav
  • top.search
  • product.info.details
  • footer

Question 119

Question
Identify the containers that can be used to add additional information to the checkout shipping step
Answer
  • before-form
  • address-list-additional-addresses
  • before-shipping-method-form
  • itemsBefore
  • itemsAfter

Question 120

Question
Identify the containers that can be used to add additional information to the checkout billing step
Answer
  • beforeMethods
  • afterMethods
  • totals
Show full summary Hide full summary

Similar

Retail E-Commerce Quiz
Chris McMinn
Entertainment
Freddrick Lovebe
Angular
Kingsley Bawuah
E-commerce Chapter 4 TRUE/FALSE Quiz
Sergio López
The Impact of E-Commerce on Different Stakeholders Groups
Aidan Clowes
Magento Backend Test
eddie0236
Personas for Marketplace website
Osamu Morozumi
JavaScript
Jonathan Sequeira
E-Commerce
José Luis4369
Electronic Data Interchange
Martin Ombura Jr
E-Commerce
felice franco