AD0-E726 — Adobe Commerce Front-End Developer Professional

Theme Structure and Hierarchy

• Themes reside in app/design/frontend/<Vendor>/<theme>/ directory
• theme.xml declares theme metadata including parent theme reference
• registration.php is required to register a theme with Magento's component system
• Child themes inherit all parent theme files via fallback mechanism
• Luma is the default reference theme; Blank is the base minimal theme recommended for custom theme parents
• composer.json is required for themes distributed as Composer packages

Theme Inheritance and Fallback

• File fallback order: current theme → parent theme → module view files → lib/web
• To override a module file, mirror the path under <theme>/<Vendor_Module>/
• web/css, web/js, web/images, web/fonts are standard static file directories within a theme
• Use <parent> node in theme.xml to define the parent theme for inheritance
• Magento merges layout XML instructions across theme hierarchy — does not simply override
• Static files in pub/static are generated/deployed and should not be edited directly

Theme Configuration

• etc/view.xml defines image roles, sizes, and other theme-level visual settings
• Image types (e.g., category_page_grid, product_page_image_small) are declared in view.xml
• Stores > Configuration > Design > Theme allows assigning themes per store view in Admin
• Design configuration supports scheduling theme changes for specific date ranges
• preview_image field in theme.xml points to a thumbnail shown in the Admin theme selector

Layout XML Fundamentals

• Layout files live in <theme>/<Vendor_Module>/layout/ or <module>/view/frontend/layout/
• Three layout file types: page layout (defines structural HTML columns), page configuration (customizes specific pages), generic layout (used for AJAX/component scenarios)
• Page layout files are in <module>/view/frontend/page_layout/ and define body structure (e.g., 1column, 2columns-left)
• <referenceContainer> and <referenceBlock> are used to modify existing containers and blocks
• <move> instruction repositions a block or container to a different parent
• <remove> instruction permanently removes a block; <block> with display=false only hides it

Blocks and Containers

• Containers are structural wrappers; blocks are PHP-class-backed renderable units
• block class attribute maps to a PHP Block class extending \Magento\Framework\View\Element\AbstractBlock
• template attribute on a block points to a .phtml file relative to the module's templates directory
• Blocks can have child blocks; use getChildHtml('block.name') in templates to render children
• cachedChildHtml caches child block output for performance
• Block names must be unique within a page; duplicate names cause override/conflict

Layout Overrides and Extensions

• To override a layout file completely, place it in <theme>/<Vendor_Module>/layout/override/base/ or override/theme/<Vendor>/<theme>/
• Extending a layout (default behavior) merges XML instructions on top of existing layout
• default.xml applies layout instructions to all pages; use sparingly to avoid unintended side effects
• catalog_product_view.xml controls the product detail page layout
• cms_index_index.xml controls the CMS homepage layout
• <update handle='handle_name'/> includes another layout handle's instructions on the current page

LESS Compilation and Structure

• Magento uses LESS as its CSS preprocessor; compiled via server-side PHP or Grunt
• Main entry point for theme styles is web/css/styles-m.less (mobile) and web/css/styles-l.less (desktop)
• _theme.less is the recommended file for theme-specific variable overrides
• lib/web/css/source/lib/ contains the Magento UI library LESS source files
• Variable overrides must be declared before @import of the library file to take effect
• Use Grunt tasks (grunt less, grunt watch) for local LESS compilation during development

Magento UI Library

• Magento UI library provides reusable mixins for typography, buttons, forms, navigation, and more
• All library variables have defaults in lib/web/css/source/lib/variables/
• Override variables in <theme>/web/css/source/_theme.less to customize without modifying core
• .lib-font-size(), .lib-line-height(), .lib-css() are examples of commonly used mixins
• Responsive breakpoints are defined via @screen__xs, @screen__s, @screen__m, @screen__l, @screen__xl variables

CSS Deployment and Debugging

• In developer mode, LESS is compiled on-the-fly per request; in production mode, deploy:static-content must be run
• bin/magento setup:static-content:deploy compiles and deploys static assets including CSS
• pub/static/frontend/<Vendor>/<theme>/<locale>/ is where compiled static files are served from
• Clearing pub/static and var/cache is required after theme changes in non-developer mode
• Browser DevTools + source maps help trace compiled CSS back to original LESS source files

RequireJS Configuration

• Magento uses RequireJS for AMD-based JavaScript module loading
• requirejs-config.js in theme or module defines paths, maps, shim, and mixins
• Multiple requirejs-config.js files are merged; theme-level configs override module-level configs
• map config redirects one module path to another, useful for overriding core JS components
• mixins config allows augmenting existing JS components without full replacement
• deps array in requirejs-config.js auto-loads scripts on every page

Magento JavaScript Components

• Magento JS components are jQuery widgets or plain AMD modules stored in web/js/
• jQuery widgets follow the jquery-ui widget factory pattern and are namespaced under $.mage.*
• data-mage-init attribute on HTML elements initializes JS components declaratively
• <script type='text/x-magento-init'> initializes components without requiring a DOM element anchor
• Knockout.js is used for UI components; data-bind attributes connect ViewModel to DOM
• uiComponent and uiElement are base classes for Knockout-based UI components

Extending and Overriding JavaScript

• To override a JS file, create a matching path in <theme>/web/js/ and map it via requirejs-config.js
• Use mixins in requirejs-config.js to extend JS component behavior without replacing the original
• A mixin function receives the original component and returns a modified version
• Avoid editing files in pub/static or vendor/; changes are overwritten on deployment
• Use bin/magento dev:js:compile or Grunt for bundling/minification during performance testing

UI Components

• UI components are declared in XML files under <module>/view/frontend/ui_component/
• Each UI component XML maps to a PHP DataProvider class that supplies data to the frontend
• UI components use Knockout.js for two-way data binding on the frontend
• listing and form are the two primary UI component types in Magento Admin; storefront uses custom components
• The uiRegistry service allows retrieving and interacting with component instances on the page

Templates and .phtml Files

• Templates are .phtml files mixing PHP and HTML; located in <module>/view/frontend/templates/
• To override a template, mirror its path under <theme>/<Vendor_Module>/templates/
• $block variable inside a .phtml refers to the associated Block class instance
• escapeHtml(), escapeUrl(), escapeJs() methods on $block should be used to prevent XSS
• getChildHtml() renders child block output within a parent template
• Template hints (Admin > Stores > Config > Advanced > Developer) show block and template paths

Widgets and CMS

• Widgets allow non-technical users to insert dynamic content blocks into CMS pages and static blocks
• Custom widgets are defined by a PHP class implementing \Magento\Widget\Model\Widget\InstanceInterface and a widget.xml declaration
• CMS Static Blocks are reusable content snippets insertable via {{block id='identifier'}} directive
• Widget instances are stored in the database and rendered via the widget directive {{widget type='...'}}
• Page Builder (in Commerce editions) provides drag-and-drop CMS content editing with component-based architecture

Translation and Localization

• i18n/en_US.csv files in themes or modules provide translation key-value pairs
• bin/magento i18n:collect-phrases and i18n:pack commands manage translation files
• __() function in PHP and $.mage.__() in JavaScript are used for string translation
• Theme translations override module translations for the same locale
• Inline translation tool (Admin > Stores > Config > Advanced > Developer > Translate Inline) allows on-page string editing