by Eric LandmannLandmann InterActive

Prepared for theMadison php Conference

11/16/13

Front-End Development

– Who has heard of Magento?

– Who uses it?

– How do you find it?

– Quick Facts About Magento

– Key Concepts

– Examples - Common Front-End Modifications

– Debugging Tips & Techniques

Topics

– Open-source ecommerce platform (php)

– Built on the Zend engine

– Two versions● Community (CE) – free● Enterprise (EE) – licensed

– Multi-site, multi-store view architecture

– Powers small to enterprise sites

– Large module vendor and developer ecosystem

– Certified Developer Program

– Partner Program

What is Magento?

Statistics for websites using Ecommerce technologies, top 10K sites

Ecommerce Usage Statistics

Source: http://trends.builtwith.com/shop

– Magento’s is an MVC application with a configuration-based representation level

– Codebase structure and module system

– Request flow

– Parts of a page

– CMS pages and CMS blocks– Layout controllers and html blocks– Layout xml files and how they work– .phtml block modifications

Key Concepts

Rendering

Concepts

Init

App

FrontEnd

Controller

Rendering

Output

Models DB

Init – gatherlayout config

RequestFlow

Generate page(layout xml)

Generateblocks

Executeoutputblocks

Includetemplate

Executechild block

Flushoutput

Concepts

In English that means.

LayoutXML

Block Template

Load thelayout configs

Go getthe content

Pour it intoa template

In English that means.

Layouts define blocks, blocks load data into templates

Concepts

Pages arebuilt witha lot of blocks

Concepts

Layout files are merged together to form one big layout tree

catalog.xml+

checkout.xml+

cms.xml+

customer.xml. . .

Structural Blocks Content Blocks

Concepts

StructuralBlocks

CMS Page

Specifies custom block output template

CMS Page

Selects base page template

CMS Blocks

Concepts

Codebase StructurePage templates and layout files for a theme are in app/design/frontend

Images and CSS files for a theme are in skin/frontend

base design packagedefault theme

skin directory

custom design packagedefault theme

enterprise design packagedefault theme

app/design directory

app/code directory

custom design packagedefault theme

enterprise design packagedefault theme

base design package

Concepts

Design Fallback● Allows building custom themes

by extending from the default theme

● Don’t need (or want) to copy the entire directory structure

● Add only those files that are different

● Final fallback position is base/default

theme calledin admin

base design package(final fallback)package called

in admin

Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)

Concepts

Examples

• Commercebug

• Layout hinting

• CSS Editor

• Firebug

• Logging

Tools & Techniques

CommerceBug

CommerceBug

CommerceBug

Layout Hinting

Layout Hinting

Layout Hinting

Examples

Installing a Purchased Design Theme

Copy the code files

● app/code/local/

Examples

Installing a Purchased Design Theme

Copy the design files

● app/design/frontend/base/

● app/design/frontend/yourpackage/

● app/design/frontend/yourpackage/default/

Examples

Installing a Purchased Design Theme

Copy the skin files

● skin/frontend/base/

● skin/frontend/yourpackage/

● skin/frontend/yourpackage/default/

Change the System Config

Correponds to/skin/frontend/default/northwest

Correponds to/app/design/frontend/default

Examples

Examples

Enter some CMS blocks or layout XML

Installing a Purchased Design Theme

Example 2

Interior Designer – Custom Category Page (ex. 2)

Pieces needed –

● Layout XML to call the templateadded to the Design tab for the category

● Custom template

● CMS page and blocks

● Some custom CSS

Example 2

Layout xml

Layout XML

Example 2

Custom Category Page (ex. 2)

Layout xml snippet in CMS page<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>

Example 2

Custom Category Page (ex. 2)

Example 2

.phtml Output Block File<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>

Custom Category Page (ex. 2)

Example 2

http://www.shopsilvernest.com/design-services

Example 3

Textiles – Custom Category Page (ex. 3)

Pieces needed –

● Layout XML to call the templateadded to catalog.xml(overrides for all categories)

● Layout XML to remove some blocks

● Layout XML to add other blocks

● CMS blocks for left nav

● Custom .phtml template

● Special stylesheet added to head

Example 3

Custom Category Page (ex. 3) Layout XML

Example 3

CMS block for left navCustom Category Page (ex. 3)

Example 3

Custom Category Page (ex. 3) .phtml Output Block File

Example 3

http://thenorthwest.com

Magento Codebasehttp://www.magentocommerce.com/download

Magento Docshttp://www.magentocommerce.com/design_guidehttp://www.magentocommerce.com/knowledge-base/entry/magentos-theme-heirarchyhttp://www.magentocommerce.com/knowledge-base/entry/creating-your-own-homepage

jQuery Novice to Ninjahttp://www.sitepoint.com/books/jquery1/code.php

CommerceBughttp://store.pulsestorm.net/products/commerce-bug-2#product_select

SitePointhttp://www.sitepoint.com/an-introduction-to-magento-themes/

MageBasehttp://magebase.com/category/magento-tutorials/

Example Live Siteshttp://www.shopsilvernest.com/http://thenorthwest.com/

Resources

by Eric LandmannLandmann InterActive

Prepared for theMadison php Conference

11/16/13

elandmann@landmanninteractive.com@iteratews

Front-End Development