Adobe Commerce Front-End Dev Expert flashcards
Adobe Commerce Front-End Dev Expert · Build recall with a focused review session.
32 cards. Read the term and the definition here. The deck at the top of this page is optional.
- Theme parent declaration
- A child theme declares its parent in theme.xml via the <parent> element. The parent's files load as fallback, so the child only overrides files it changes.
- Layout handle order
- Handles apply in order: default, page-type (e.g. cms_page), then route/controller/action handles. Later handles override earlier ones for the same layout element.
- referenceBlock vs block
- <referenceBlock> modifies or removes an existing block by name; <block> creates a new block. Using <block> with an existing name causes a duplicate-name error.
- Container definition
- A container is a layout element that holds child blocks but has no template of its own. It renders its children via getChildHtml().
- Layout XML arguments
- Arguments pass data into blocks at instantiation. <argument name="data" xsi:type="array"> sets constructor data, while <action method="setX"> calls a setter.
- Layout cache flush
- Layout XML is cached. After editing layout files, flush the layout, block_html, and full_page cache types for changes to render.
- Template resolution order
- A block's template path resolves against the theme chain: child theme, parent theme, then module view directories. The first match wins.
- Output escaping helpers
- $block->escapeHtml(), escapeHtmlAttr(), escapeUrl(), and escapeJs() escape output for their context. __() translates strings and does not escape.
- View model injection
- A view model is a plain PHP class injected via <argument name="view_model" xsi:type="object">. It has no template and is called from the block's template.
- Child block rendering
- $block->getChildHtml('alias') renders a child block's template. getChildBlock('alias') returns the block instance for direct method calls.
- Block cache key
- getCacheKeyInfo() returns an array that forms the block's cache identity. Blocks with the same key share cached HTML.
- Template hints
- Enabled per store view under Advanced > Developer > Debug. Hints add HTML comments showing each block's name and template path.
- x-magento-init usage
- A script tag of type text/x-magento-init maps a CSS selector or * to a JS module and config. It initializes the module against matching elements.
- data-mage-init usage
- An HTML attribute containing JSON that initializes a JS module on that single element. The key is the module path, the value is its config.
- Observable types
- ko.observable() holds a single value, ko.observableArray() holds a list, and ko.computed() derives a value from other observables and updates automatically.
- UI component defaults
- A UI component extends uiComponent and declares defaults such as template, children, and imports. Defaults merge with view config XML.
- Custom binding handler
- Register with ko.bindingHandlers.name = { init, update }. The init runs once per element; update runs whenever the bound observable changes.
- Totals collector pair
- A cart total needs a PHP TotalCollector registered in sales.xml and a JS totals component in the checkout UI to render its value.
- LESS variable source
- Theme LESS variables and mixins live in lib/web/css/source/lib/ and the theme's _variables.less. _extend.less adds custom rules.
- Static content deploy
- bin/magento setup:static-content:deploy -f compiles LESS and publishes assets to pub/static. --theme and --area restrict the scope.
- Static file versioning
- dev/static/sign appends a version hash to static asset URLs. Disabling it removes the ?version= query string from asset URLs.
- View file URL helper
- $block->getViewFileUrl('Vendor_Module::path') returns a theme-aware URL for a static asset such as an image, JS, or CSS file.
- Breakpoint variables
- The blank theme defines @screen__m (768px), @screen__l (1024px), and @screen__xl (1440px) for responsive media queries in LESS.
- RequireJS config merge
- requirejs-config.js files merge across modules. A theme overrides a module's JS by placing a file at the same relative path.
- Full page cache scope
- FPC caches rendered HTML per URL and customer segment. Logged-in customers bypass it unless private content sections are used.
- Private content sections
- Dynamic data inside cached pages loads via customer-data JS. sections.xml declares the AJAX endpoint for each section.
- Cache type list
- Magento cache types include config, layout, block_html, collections, reflection, db_ddl, eav, full_page, and translate. Flush by type with cache:clean.
- Block cache lifetime
- getCacheLifetime() sets a block's cache lifetime in seconds; null means infinite. Cache tags from getCacheTags() drive invalidation.
- Production mode effects
- Production mode disables on-the-fly LESS compilation and static file materialization. Static content must be deployed before the site runs.
- Checkout step components
- Checkout is a single-page UI component with shipping, shipping method, payment, and billing steps, each implemented as a Knockout component.
- Cart item API endpoint
- Cart items are added via POST /rest/V1/carts/mine/items. Custom options and attributes are passed in the request payload.
- Checkout page handles
- checkout_cart_index controls the cart page, checkout_index_index the checkout page, and checkout_onepage_success the order success page.