Front End Development in Magento
Upcoming SlideShare
Loading in...5
×
 

Front End Development in Magento

on

  • 3,116 views

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

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

Statistics

Views

Total Views
3,116
Views on SlideShare
2,927
Embed Views
189

Actions

Likes
1
Downloads
65
Comments
0

5 Embeds 189

http://sitthichai.net 153
https://twitter.com 17
http://librosweb.es 15
https://www.linkedin.com 3
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Front End Development in Magento Front End Development in Magento Presentation Transcript

  • Front-End Development by Eric Landmann Landmann InterActive Prepared for the Madison php Conference 11/16/13
  • – Who has heard of Magento? – Who uses it? – How do you find it?
  • Topics – Quick Facts About Magento – Key Concepts – Examples - Common Front-End Modifications – Debugging Tips & Techniques
  • 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
  • Ecommerce Usage Statistics Statistics for websites using Ecommerce technologies, top 10K sites Source: http://trends.builtwith.com/shop
  • 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
  • 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
  • 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
  • Concepts Pages are built with a lot of blocks
  • Concepts Layout files are merged together to form one big layout tree catalog.xml + checkout.xml + cms.xml + customer.xml ...
  • Concepts Structural Blocks Content Blocks
  • Structural Blocks
  • CMS Page Specifies custom block output template
  • CMS Page Selects base page template
  • CMS Blocks
  • 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
  • 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)
  • Concepts Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)
  • Examples Tools & Techniques • Commercebug • Layout hinting • CSS Editor • Firebug • Logging
  • 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/
  • Examples Change the System Config Correponds to /app/design/frontend/default Correponds to /skin/frontend/default/northwest
  • Examples Installing a Purchased Design Theme Enter some CMS blocks or layout XML
  • 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
  • Example 2 Layout xml
  • Example 2 Custom Category Page (ex. 2) 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) .phtml Output Block File <div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
  • Example 2 http://www.shopsilvernest.com/design-services
  • 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
  • Example 3 Custom Category Page (ex. 3) Layout XML
  • Example 3 Custom Category Page (ex. 3) CMS block for left nav
  • Example 3 Custom Category Page (ex. 3) .phtml Output Block File
  • Example 3 http://thenorthwest.com
  • 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/
  • Front-End Development by Eric Landmann Landmann InterActive Prepared for the Madison php Conference 11/16/13 elandmann@landmanninteractive.com @iteratews