Materials from my presentation on front-end development for Magento delivered at the 2013 Madison php Conference, Madison, WI, November 16, 2013.

1. Front-End Development
by Eric Landmann
Landmann InterActive
Prepared for the
Madison php Conference
11/16/13

2. – Who has heard of Magento?
– Who uses it?
– How do you find it?

3. Topics
– Quick Facts About Magento
– Key Concepts
– Examples - Common Front-End Modifications
– Debugging Tips & Techniques

4. What is Magento?
– 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

5. Ecommerce Usage Statistics
Statistics for websites using Ecommerce technologies, top 10K sites
Source: http://trends.builtwith.com/shop

7. Key Concepts
– 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

8. Concepts
Request
Flow
Rendering
Init
Generate page
(layout xml)
App
Generate
blocks
FrontEnd
Execute
output
blocks
Controller
Models
Rendering
Output
Init – gather
layout config
DB
Include
template
Execute
child block
Flush
output

9. Concepts
In English that means.
Layout
XML
Block
Template
Load the
layout configs
Go get
the content
Pour it into
a template
Layouts define blocks, blocks load data into templates

10. Concepts
Pages are
built with
a lot of blocks

11. Concepts
Layout files are merged together to form one big layout tree
catalog.xml
+
checkout.xml
+
cms.xml
+
customer.xml
...

12. Concepts
Structural Blocks
Content Blocks

13. Structural
Blocks

14. CMS Page
Specifies custom block output template

15. CMS Page
Selects base page template

16. CMS Blocks

17. Concepts
Codebase Structure
Page templates and layout files for a theme are in
app/design/frontend
Images and CSS files for a theme are in
skin/frontend
skin directory
app/code directory
base design package
default theme
app/design directory
base design package
enterprise design package
default theme
custom design package
default theme
enterprise design package
default theme
custom design package
default theme

18. 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
package called
in admin
theme called
in admin
base design package
(final fallback)

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

20. Examples
Tools & Techniques
• Commercebug
• Layout hinting
• CSS Editor
• Firebug
• Logging

21. CommerceBug

22. CommerceBug

23. CommerceBug

24. Layout Hinting

25. Layout Hinting

26. Layout Hinting

27. Examples
Installing a Purchased Design Theme
Copy the code files
●
app/code/local/

28. Examples
Installing a Purchased Design Theme
Copy the design files
●
app/design/frontend/base/
●
app/design/frontend/yourpackage/
●
app/design/frontend/yourpackage/default/

29. Examples
Installing a Purchased Design Theme
Copy the skin files
●
skin/frontend/base/
●
skin/frontend/yourpackage/
●
skin/frontend/yourpackage/default/

30. Examples
Change the System Config
Correponds to
/app/design/frontend/default
Correponds to
/skin/frontend/default/northwest

31. Examples
Installing a Purchased Design Theme
Enter some CMS blocks or layout XML

32. Example 2
Interior Designer – Custom Category Page (ex. 2)
Pieces needed –
●
Layout XML to call the template
added to the Design tab for the
category
●
Custom template
●
CMS page and blocks
●
Some custom CSS

33. Example 2
Layout
xml

34. Example 2
Custom Category Page (ex. 2)
Layout XML

35. Example 2
Custom Category Page (ex. 2)
Layout xml snippet in CMS page
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>

36. Example 2
Custom Category Page (ex. 2)
.phtml Output Block File
<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>

37. Example 2
http://www.shopsilvernest.com/design-services

38. Example 3
Textiles – Custom Category Page (ex. 3)
Pieces needed –
●
Layout XML to call the template
added 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

39. Example 3
Custom Category Page (ex. 3)
Layout XML

40. Example 3
Custom Category Page (ex. 3)
CMS block for left nav

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

42. Example 3
http://thenorthwest.com

43. Resources
Magento Codebase
http://www.magentocommerce.com/download
Magento Docs
http://www.magentocommerce.com/design_guide
http://www.magentocommerce.com/knowledge-base/entry/magentos-theme-heirarchy
http://www.magentocommerce.com/knowledge-base/entry/creating-your-own-homepage
jQuery Novice to Ninja
http://www.sitepoint.com/books/jquery1/code.php
CommerceBug
http://store.pulsestorm.net/products/commerce-bug-2#product_select
SitePoint
http://www.sitepoint.com/an-introduction-to-magento-themes/
MageBase
http://magebase.com/category/magento-tutorials/
Example Live Sites
http://www.shopsilvernest.com/
http://thenorthwest.com/

44. Front-End Development
by Eric Landmann
Landmann InterActive
Prepared for the
Madison php Conference
11/16/13
elandmann@landmanninteractive.com
@iteratews