front end development in magento
DESCRIPTION
Materials from my presentation on front-end development for Magento delivered at the 2013 Madison php Conference, Madison, WI, November 16, 2013.TRANSCRIPT
![Page 1: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/1.jpg)
by Eric LandmannLandmann InterActive
Prepared for theMadison php Conference
11/16/13
Front-End Development
![Page 2: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/2.jpg)
– Who has heard of Magento?
– Who uses it?
– How do you find it?
![Page 3: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/3.jpg)
– Quick Facts About Magento
– Key Concepts
– Examples - Common Front-End Modifications
– Debugging Tips & Techniques
Topics
![Page 4: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/4.jpg)
– 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?
![Page 5: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/5.jpg)
Statistics for websites using Ecommerce technologies, top 10K sites
Ecommerce Usage Statistics
Source: http://trends.builtwith.com/shop
![Page 6: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/6.jpg)
![Page 7: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/7.jpg)
– 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
![Page 8: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/8.jpg)
Rendering
Concepts
Init
App
FrontEnd
Controller
Rendering
Output
Models DB
Init – gatherlayout config
RequestFlow
Generate page(layout xml)
Generateblocks
Executeoutputblocks
Includetemplate
Executechild block
Flushoutput
![Page 9: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/9.jpg)
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
![Page 10: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/10.jpg)
Concepts
Pages arebuilt witha lot of blocks
![Page 11: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/11.jpg)
Concepts
Layout files are merged together to form one big layout tree
catalog.xml+
checkout.xml+
cms.xml+
customer.xml. . .
![Page 12: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/12.jpg)
Structural Blocks Content Blocks
Concepts
![Page 13: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/13.jpg)
StructuralBlocks
![Page 14: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/14.jpg)
CMS Page
Specifies custom block output template
![Page 15: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/15.jpg)
CMS Page
Selects base page template
![Page 16: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/16.jpg)
CMS Blocks
![Page 17: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/17.jpg)
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
![Page 18: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/18.jpg)
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
![Page 19: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/19.jpg)
Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)
Concepts
![Page 20: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/20.jpg)
Examples
• Commercebug
• Layout hinting
• CSS Editor
• Firebug
• Logging
Tools & Techniques
![Page 21: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/21.jpg)
CommerceBug
![Page 22: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/22.jpg)
CommerceBug
![Page 23: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/23.jpg)
CommerceBug
![Page 24: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/24.jpg)
Layout Hinting
![Page 25: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/25.jpg)
Layout Hinting
![Page 26: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/26.jpg)
Layout Hinting
![Page 27: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/27.jpg)
Examples
Installing a Purchased Design Theme
Copy the code files
● app/code/local/
![Page 28: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/28.jpg)
Examples
Installing a Purchased Design Theme
Copy the design files
● app/design/frontend/base/
● app/design/frontend/yourpackage/
● app/design/frontend/yourpackage/default/
![Page 29: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/29.jpg)
Examples
Installing a Purchased Design Theme
Copy the skin files
● skin/frontend/base/
● skin/frontend/yourpackage/
● skin/frontend/yourpackage/default/
![Page 30: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/30.jpg)
Change the System Config
Correponds to/skin/frontend/default/northwest
Correponds to/app/design/frontend/default
Examples
![Page 31: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/31.jpg)
Examples
Enter some CMS blocks or layout XML
Installing a Purchased Design Theme
![Page 32: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/32.jpg)
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
![Page 33: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/33.jpg)
Example 2
Layout xml
![Page 34: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/34.jpg)
Layout XML
Example 2
Custom Category Page (ex. 2)
![Page 35: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/35.jpg)
Layout xml snippet in CMS page<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
Example 2
Custom Category Page (ex. 2)
![Page 36: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/36.jpg)
Example 2
.phtml Output Block File<div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
Custom Category Page (ex. 2)
![Page 37: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/37.jpg)
Example 2
http://www.shopsilvernest.com/design-services
![Page 38: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/38.jpg)
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
![Page 39: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/39.jpg)
Example 3
Custom Category Page (ex. 3) Layout XML
![Page 40: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/40.jpg)
Example 3
CMS block for left navCustom Category Page (ex. 3)
![Page 41: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/41.jpg)
Example 3
Custom Category Page (ex. 3) .phtml Output Block File
![Page 42: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/42.jpg)
Example 3
http://thenorthwest.com
![Page 43: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/43.jpg)
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
![Page 44: Front End Development in Magento](https://reader033.vdocuments.site/reader033/viewer/2022052821/5549f00eb4c90518488b52c6/html5/thumbnails/44.jpg)
by Eric LandmannLandmann InterActive
Prepared for theMadison php Conference
11/16/13
[email protected]@iteratews
Front-End Development