Frontend System

The frontend system handles customer-facing storefront functionality. It comprises the theme architecture (layout XML, blocks, templates), product display, shopping cart/checkout, reviews, JavaScript interactivity, and responsive CSS.

Related pages: Admin Interface for backend, Catalog Module for product data models, Layout System for layout XML details.

---

Request Flow and Page Rendering

The frontend request processing pipeline follows a standard dispatch sequence that initializes the layout and renders blocks recursively into HTML.

Frontend Request Processing Pipeline

Sources: app/code/core/Mage/Checkout/controllers/CartController.php159-164 app/code/core/Mage/Checkout/controllers/CartController.php111-166

Controller Action Flow

Controllers extend Mage_Core_Controller_Front_Action (or specialized subclasses like Mage_Checkout_Controller_Action) and follow this pattern:

1. preDispatch(): Validates form keys, checks customer authentication, and disables flat collections where necessary (e.g., during checkout to ensure data freshness). app/code/core/Mage/Checkout/controllers/CartController.php100-106 app/code/core/Mage/Checkout/controllers/OnepageController.php37-52
2. {action}Action(): The main entry point for a route (e.g., indexAction(), addAction()). app/code/core/Mage/Checkout/controllers/CartController.php111-166 app/code/core/Mage/Checkout/controllers/OnepageController.php162-210
3. loadLayout(): Initializes the Mage_Core_Model_Layout and builds the block tree based on XML handles. app/code/core/Mage/Checkout/controllers/CartController.php160
4. renderLayout(): Triggers the recursive rendering of the block tree into HTML. app/code/core/Mage/Checkout/controllers/CartController.php164

Sources: app/code/core/Mage/Checkout/controllers/CartController.php13-75 app/code/core/Mage/Checkout/controllers/OnepageController.php13-52

---

Block Architecture

Blocks are PHP classes that prepare data for templates. They form a tree structure where parent blocks can contain child blocks, enabling modular page composition.

Sources: app/design/frontend/base/default/template/catalog/product/view.phtml12 app/design/frontend/base/default/template/catalog/product/view/media.phtml12

Block Tree and Child Management

The block tree is managed by Mage_Core_Block_Abstract. The getChildHtml() method is the primary mechanism in templates to render nested content by alias.

Method	Purpose
getChildHtml($name)	Renders a specific child block's HTML output. app/design/frontend/base/default/template/catalog/product/view.phtml36
getChildChildHtml($name)	Renders a child of a child block, often used for container-based layouts. app/design/frontend/base/default/template/catalog/product/view.phtml66
getBlockHtml($name)	Renders a block by its name in the layout, regardless of hierarchy (e.g., formkey). app/design/frontend/base/default/template/catalog/product/view.phtml26

Sources: app/design/frontend/base/default/template/catalog/product/view.phtml26-96

For more details on layout XML and blocks, see Layout XML and Blocks.

---

Template Layer

Templates are .phtml files containing PHP and HTML. They receive data from their associated block via $this. Layout templates define the structural skeleton (e.g., 1-column or 3-column layouts).

Product View Template Flow

The product view template coordinates several child blocks to render the full product page.

Sources: app/design/frontend/base/default/template/catalog/product/view.phtml15-136

Key Template Methods

Method	Purpose
$this->helper($name)	Accesses helper instances for logic (e.g., catalog/image). app/design/frontend/base/default/template/catalog/product/view/media.phtml16
$this->escapeHtml($text)	Sanitizes output for XSS protection. app/design/frontend/base/default/template/catalog/product/view/media.phtml23
$this->getSubmitUrlCustom()	Generates optimized URLs for form actions. app/design/frontend/base/default/template/catalog/product/view.phtml22
$this->__($text)	Translates strings using CSV locale files. app/design/frontend/base/default/template/catalog/product/view/media.phtml18 app/locale/en_US/Mage_Page.csv1-70

Sources: app/design/frontend/base/default/template/catalog/product/view.phtml1-167 app/design/frontend/base/default/template/catalog/product/view/media.phtml1-67

---

Product Display System

The product display system handles rendering of single products and lists, including images and sorting logic.

• Images and Gallery: Managed by Mage_Catalog_Block_Product_View_Media. It uses the catalog/image helper to initialize, resize, and serve images with appropriate srcset for high-DPI displays. app/design/frontend/base/default/template/catalog/product/view/media.phtml16-58
• Page Layouts: Maho provides several structural layouts such as 3columns.phtml, 2columns-left.phtml, and 1column.phtml which define the main content areas and sidebars. app/design/frontend/base/default/template/page/3columns.phtml26-45 app/design/frontend/base/default/template/page/2columns-left.phtml26-40

For details, see Product Display.

---

Shopping Cart and Checkout

AJAX Add to Cart

Maho uses a modern mahoFetch implementation to handle "Add to Cart" requests asynchronously. The productAddToCartForm JS object intercepts submissions, performs validation via VarienForm, and updates the minicart component upon success. app/design/frontend/base/default/template/catalog/product/view.phtml100-136

Checkout Flow

The checkout system supports both a standard multi-step flow and a one-step checkout configuration via Mage_Checkout_OnepageController. app/code/core/Mage/Checkout/controllers/OnepageController.php195-200

For details, see Shopping Cart and Checkout.

---

Frontend JavaScript and Interactivity

Maho prioritizes modern JavaScript patterns while maintaining compatibility with legacy components.

• mahoFetch: A centralized wrapper for the Fetch API that handles security headers (form_key) and UI loaders. app/design/frontend/base/default/template/catalog/product/view.phtml114
• PointerManager: Provides an abstraction for touch vs. mouse detection to optimize UI interactions based on device capabilities. public/skin/frontend/base/default/js/app.js49-145
• Minicart: A class-based implementation for managing the off-canvas cart and header count updates. public/skin/frontend/base/default/js/minicart.js11-38

For details, see Frontend JavaScript and Interactivity.

---

Responsive Design and CSS Architecture

Maho utilizes modern CSS features, including Custom Properties (variables) and a mobile-first responsive grid.

CSS Custom Properties

The global theme state is defined in the :root selector in styles.css, allowing for rapid customization of primary colors, status colors, and component styling. public/skin/frontend/base/default/css/styles.css11-55

Responsive Breakpoints

Breakpoints are synchronized between CSS and JS (app.js) to ensure consistent behavior across devices. public/skin/frontend/base/default/js/app.js15-21

Breakpoint	Value
xsmall	479px
small	599px
medium	770px
large	979px
xlarge	1199px

For details, see Responsive Design and CSS Architecture.

---

Detailed Guides

For in-depth technical details on specific frontend subsystems, see the following child pages:

• Theme Architecture — Explain theme fallback system, base/rwd themes, package structure, and theme customization.
• Layout XML and Blocks — Detail layout handles, block hierarchy, template rendering, caching, and child blocks.
• Product Display — Cover product list/grid views, toolbar, pagination, sorting, and configurable swatches.
• Shopping Cart and Checkout — Explain cart functionality, checkout flow, PayPal Express integration, and payment processing.
• Product Reviews and Ratings — Detail review display, rating system, submission forms, and review moderation.
• Frontend JavaScript and Interactivity — Cover frontend JS architecture, mahoFetch usage, AJAX patterns, and interactive components.
• Responsive Design and CSS Architecture — Explain RWD implementation, CSS custom properties, mobile breakpoints, and grid systems.