Front End Development in Magento

10,649 views

Published on

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

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
  • Thanks for sharing nice presentation. I would like to suggest one more Magento 2 multipurpose and responsive theme Kosmic. I have puchaged and installed just before a few days. I like the most in this theme is that have many features & premium extenions free, easy customization & well written code. http://goo.gl/fj4BZ9
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Good relationing controllers with blocks in xml files
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,649
On SlideShare
0
From Embeds
0
Number of Embeds
882
Actions
Shares
0
Downloads
240
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Front End Development in Magento

  1. 1. Front-End Development by Eric Landmann Landmann InterActive Prepared for the Madison php Conference 11/16/13
  2. 2. – Who has heard of Magento? – Who uses it? – How do you find it?
  3. 3. Topics – Quick Facts About Magento – Key Concepts – Examples - Common Front-End Modifications – Debugging Tips & Techniques
  4. 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. 5. Ecommerce Usage Statistics Statistics for websites using Ecommerce technologies, top 10K sites Source: http://trends.builtwith.com/shop
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. Concepts Pages are built with a lot of blocks
  10. 10. Concepts Layout files are merged together to form one big layout tree catalog.xml + checkout.xml + cms.xml + customer.xml ...
  11. 11. Concepts Structural Blocks Content Blocks
  12. 12. Structural Blocks
  13. 13. CMS Page Specifies custom block output template
  14. 14. CMS Page Selects base page template
  15. 15. CMS Blocks
  16. 16. 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
  17. 17. 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)
  18. 18. Concepts Using page layout update xml (CMS–>Pages–>homepage–>Design–>Layout Update XML)
  19. 19. Examples Tools & Techniques • Commercebug • Layout hinting • CSS Editor • Firebug • Logging
  20. 20. CommerceBug
  21. 21. CommerceBug
  22. 22. CommerceBug
  23. 23. Layout Hinting
  24. 24. Layout Hinting
  25. 25. Layout Hinting
  26. 26. Examples Installing a Purchased Design Theme Copy the code files ● app/code/local/
  27. 27. Examples Installing a Purchased Design Theme Copy the design files ● app/design/frontend/base/ ● app/design/frontend/yourpackage/ ● app/design/frontend/yourpackage/default/
  28. 28. Examples Installing a Purchased Design Theme Copy the skin files ● skin/frontend/base/ ● skin/frontend/yourpackage/ ● skin/frontend/yourpackage/default/
  29. 29. Examples Change the System Config Correponds to /app/design/frontend/default Correponds to /skin/frontend/default/northwest
  30. 30. Examples Installing a Purchased Design Theme Enter some CMS blocks or layout XML
  31. 31. 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
  32. 32. Example 2 Layout xml
  33. 33. Example 2 Custom Category Page (ex. 2) Layout XML
  34. 34. Example 2 Custom Category Page (ex. 2) Layout xml snippet in CMS page <div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
  35. 35. Example 2 Custom Category Page (ex. 2) .phtml Output Block File <div>{{block type="core/template" template="cms/default/lookslidehome.phtml"}}</div>
  36. 36. Example 2 http://www.shopsilvernest.com/design-services
  37. 37. 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
  38. 38. Example 3 Custom Category Page (ex. 3) Layout XML
  39. 39. Example 3 Custom Category Page (ex. 3) CMS block for left nav
  40. 40. Example 3 Custom Category Page (ex. 3) .phtml Output Block File
  41. 41. Example 3 http://thenorthwest.com
  42. 42. 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/
  43. 43. Front-End Development by Eric Landmann Landmann InterActive Prepared for the Madison php Conference 11/16/13 elandmann@landmanninteractive.com @iteratews

×