Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A Successful Magento Project From Design to Deployment

7,150 views

Published on

Magento is a complex open source eCommerce platform. It’s open source nature and welcoming community means anyone can pick it up, learn it and launch it. After working on over 300 different Magento sites in the past 6 years, however, I’ve learned that many of the misconceptions about Magento - it’s slow, hard to work with, buggy or unstable come from projects that were built by first-timers who weren’t aware of Magento best practices. In this tutorial, I walk you through the entire process of creating, testing and deploying a high-performing, fast Magento-based eCommerce website.

Published in: Technology
  • 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

A Successful Magento Project From Design to Deployment

  1. 1. magento tutorial presented by joshua warren @joshuaSWarren
  2. 2. introductions
  3. 3. About me magento developer 5000+ hours magento dev work would take 2.5 work years of 8 hours/day
  4. 4. About me founder of creatuity, magento agency mentor magento developers
  5. 5. About this tutorial creating, testing, deploying a magento site
  6. 6. About this tutorial focused on real-world experience saving you some trial and error pain
  7. 7. About this tutorial can’t cover everything in 3.5 hours give you a foundation point you in the right direction
  8. 8. About this tutorial roughly split into 3 one-hour sessions 10 minute breaks after hour 1 & 2
  9. 9. About this tutorial 10 minute Q&A at the end
  10. 10. About this tutorial let’s interact
  11. 11. About YOU php experience? magento experience? what do you want to learn today?
  12. 12. About magento magento isn’t slow magento isn’t buggy
  13. 13. About magento bad implementations of magento are slow and buggy
  14. 14. About magento based on zend framework v1 model view controller pattern event observer pattern many others
  15. 15. About magento built by a development agency in 2007 response to poorly designed systems of time
  16. 16. pre-development preparation
  17. 17. do your homework before you write a line of code, plan
  18. 18. know magento’s features don’t reinvent the wheel
  19. 19. know magento’s features user’s guide designer’s guide
  20. 20. know magento’s features know the differences between community and enterprise editions
  21. 21. know magento’s features enable layered navigation for categories don’t implement product reviews - they’re already there
  22. 22. know what to buy vs build pre-made themes pre-made extensions
  23. 23. finding quality extensions magento connect
  24. 24. finding quality extensions judge.nr-apps.com www.magekarma.com magento.stackexchange.com @joshuaswarren / @ benmarks
  25. 25. finding quality extensions avoid encrypted extensions avoid cheap knock-offs
  26. 26. buy or build theme? build a fully custom theme customize a purchased theme purchase a theme
  27. 27. building a theme build on top of the magento 1.9 rwd base sass and other front-end best practices
  28. 28. building a theme get or make mockups mockups should be made by a designer with magento knowledge
  29. 29. customizing a theme most purchased themes don’t use sass most purchased themes don’t support ee
  30. 30. know your objectives budget? timeline? features?
  31. 31. know your tools enable dev mode in magento - index.php turn on logging in admin panel disable caching in admin panel
  32. 32. know your tools - frontend work enable template path hints in admin panel
  33. 33. know your tools - backend work magerun commercebug magicento plugin for phpstorm
  34. 34. know the ground rules never, ever modify app/code/core/* don’t modify app/design/frontend/base/ default/*
  35. 35. know the ground rules follow the magento patterns - they are there for your benefit
  36. 36. getting started
  37. 37. setup your development environment download magento install it
  38. 38. getting fancier with your dev environment install virtualbox www.virtualbox.org/wiki/Downloads install vagrant www.vagrantup.com/downloads.html
  39. 39. getting fancier with your dev environment cd <project directory> git clone https://github.com/joshuaswarren/ simple-magento-vagrant
  40. 40. getting fancier with your dev environment vagrant up
  41. 41. getting fancier with your dev environment frontend: http://127.0.0.1:8080 backend: http://127.0.0.1:8080/admin User: admin Password: password123123
  42. 42. getting fancier with your dev environment to ssh in: vagrant ssh to shut down vm: vagrant halt
  43. 43. first up - install extensions and theme install purchased extension install purchased theme
  44. 44. installing paid extensions follow provided instructions usually involves unzipping an archive
  45. 45. installing open source extensions modman: modman clone git@github.com:GordonLesti/ Lesti_Fpc.git
  46. 46. check for extension conflicts when two extensions rewrite same code
  47. 47. check for extension conflicts one extension wins other extension may or may not work
  48. 48. check for extension conflicts mr dev:module:rewrite:conflicts
  49. 49. check for extension conflicts
  50. 50. Resolving extension conflicts easy way - ask extension author for help or make one extension dependent on other or merge the code into a new extension
  51. 51. begin development work if working with a team, split up the work easiest split is theme work vs backend work
  52. 52. begin development work even if working alone, use git
  53. 53. looking for the perfect dev workflow? check out “rock solid magento development” presented by Fabrizio Branca 3PM, Ash Grove c, Thursday
  54. 54. theming magento
  55. 55. two ways - old way and the right way both start with a similar foundation app/design - XML, html skin - css, javascript
  56. 56. app/design/frontend theme folders base/<theme-name> rwd/default
  57. 57. theme folder contents etc - theme config file layout template
  58. 58. layout folder contents xml files xml controls what blocks appear
  59. 59. template folder contents phtml files html and php code making up your views
  60. 60. skin/frontend similar set of theme folders base/<theme-name> rwd/default
  61. 61. skin base/<theme-name> css images js lib
  62. 62. skin rwd/default css images js scss
  63. 63. homework manuals.gravitydept.com/platforms/magento alanstorm.com/ magento_infinite_fallback_theme_xml
  64. 64. checkpoint
  65. 65. modifying magento
  66. 66. just a reminder…
  67. 67. all joking aside… core mods make magento projects harder to maintain harder to update harder to support
  68. 68. how do we modify magento, then? extensions
  69. 69. extensions modify core behavior via class rewrites events/observers
  70. 70. class rewrites module’s config.xml specifies item to be overridden
  71. 71. class rewrites module’s config.xml specifies item to be overridden requests to the core class is then rewritten to your module
  72. 72. class rewrites before every call, magento checks if there is a rewrite for the class replaces the core class with your class
  73. 73. class rewrites - example from codegento.com example - display “loves magento” after the customer’s name
  74. 74. class rewrites - example class class Super_Awesome_Model_Customer extends Mage_Customer_Model_Customer { public function getName() { $name = parent::getName(); $name = $name . ' loves Magento'; return $name; } }
  75. 75. class rewrites - example config.xml <global> <models> <customer> <rewrite> <customer>Super_Awesome_Model_Customer</customer> </rewrite> </customer> </models> </global>
  76. 76. class rewrites - example that’s it! see, no need to modify core
  77. 77. class rewrites - drawback rewrite conflicts know how to solve them ideally, avoid them with…
  78. 78. observers magento allows you to attach observers to events
  79. 79. observers & events there’s many, many events www.nicksays.co.uk/magento-events-cheat-sheet- 1-8/
  80. 80. events checkout_cart_product_add_after checkout_cart_update_items_before checkout_cart_update_items_after checkout_cart_save_before checkout_cart_save_after checkout_cart_product_update_after custom_quote_process checkout_quote_init load_customer_quote_before checkout_quote_destroy checkout_type_multishipping_set_shipping_items
  81. 81. events wishlist_add_product wishlist_update_item wishlist_share wishlist_items_renewed wishlist_item_collection_products_after_load wishlist_item_add_after wishlist_add_item wishlist_product_add_after review_controller_product_init_before review_controller_product_init
  82. 82. events that was 20 out of over 400 events find an event that matches your needs
  83. 83. observer example from stackoverflow Every time someone purchases a product I need Magento to deduct that quantity from certain child skus behind the scenes
  84. 84. observer example - config.xml <?xml version="1.0"?> <config> <modules> <YourCmpany_YourModule> <version>1.0.0</version> </YourCmpany_YourModule> </modules>
  85. 85. observer example - config.xml, continued <frontend> <events> <checkout_type_onepage_save_order_after> <observers> <yourmodule_save_order_observer> <class>YourCompany_YourModule_Model_Observer</class> <method>checkout_type_onepage_save_order_after</method> </yourmodule_save_order_observer> </observers> </checkout_type_onepage_save_order_after> </events> </frontend>
  86. 86. observer example - config.xml, continued <global> <models> <yourmodule> <class>YourCompany_YourModule_Model</class> </yourmodule> </models> </global> </config>
  87. 87. observer example - class class YourCompany_YourModule_Model_Observer { public function checkout_type_onepage_save_order_after(Varien_Event_Observer $observer) { $order = $observer->getEvent()->getOrder(); /** * Grab all product ids from the order */ $productIds = array(); foreach ($order->getItemsCollection() as $item) { $productIds[] = $item->getProductId(); }
  88. 88. observer example - class, continued foreach ($productIds as $productId) { $product = Mage::getModel('catalog/product') ->setStoreId(Mage::app()->getStore()->getId()) ->load($productId); if (! $product->isConfigurable()) { continue; }
  89. 89. observer example - class, continued /** * Grab all of the associated simple products */ $childProducts = Mage::getModel('catalog/product_type_configurable') ->getUsedProducts(null, $product); foreach($childProducts as $childProduct) {
  90. 90. observer example - class, continued /** * in_array check below, makes sure to exclude the simple product actually * being sold as we dont want its stock level decreased twice :) */ if (! in_array($childProduct->getId(), $productIds)) { /** * Finally, load up the stock item and decrease its qty by 1 */ $stockItem = Mage::getModel('cataloginventory/stock_item') ->loadByProduct($childProduct) ->subtractQty(1) ->save()
  91. 91. observer example - class, continued /** * Finally, load up the stock item and decrease its qty by 1 */ $stockItem = Mage::getModel('cataloginventory/stock_item') ->loadByProduct($childProduct) ->subtractQty(1) ->save() ; } } } } }
  92. 92. events & observers why doesn’t everyone use them? lack of knowledge seeking shortcuts lack of event matching their needs
  93. 93. config.xml with both rewrites and observers, config.xml is important
  94. 94. config.xml magento merges all config.xml files into one xml document at runtime
  95. 95. config.xml dependencies you can use dependencies in config.xml to control the order your xml is merged
  96. 96. config.xml - dependency example <!-- File: app/etc/modules/Mage_Bundle.xml --> <config> <modules> <Mage_Bundle> <active>true</active> <codePool>core</codePool> <depends> <Mage_Catalog /> </depends> </Mage_Bundle> </modules> </config>
  97. 97. config.xml dependencies without proper dependencies you may see unexpected results
  98. 98. config.xml homework alanstorm.com/magento_config_tutorial alanstorm.com/ magento_config_declared_modules_tutorial
  99. 99. walkthrough of a real-life example goal: require users to login before viewing products or categories
  100. 100. walkthrough of a real-life example github.com/Vinai/loginonlycatalog
  101. 101. checkpoint
  102. 102. testing magento
  103. 103. see my testing talk on thursday thursday morning, 10AM, this room
  104. 104. in the meantime… github.com/MageTest watch the magento fireside chats on testing
  105. 105. a brief overview of testing magento a good start: manual QA review
  106. 106. a brief overview of testing magento even better: automated Functional testing
  107. 107. a brief overview of testing magento best: test/behavior driven development
  108. 108. conducting manual qa check the basics - core mods, code smell complete user acceptance testing basic regression testing
  109. 109. conducting more advanced QA come to my testing talk on thursday in the meantime, if you install & use vagrant, you have behat, behatmage, phpspec, magespec, phpunit
  110. 110. deploying magento
  111. 111. now the fun begins deploying a magento site - easier than rails, harder than wordpress
  112. 112. first things first place the production server in maintenance mode avoid multiple hits to the site before deployment is complete
  113. 113. multiple approaches tar, transfer, untar git deployhq, etc
  114. 114. one result files and database are present on production server
  115. 115. next step run any setup/upgrade scripts magerun: sys:setup:run sys:setup:incremental --stop-on-error
  116. 116. test test the functionality of the site
  117. 117. TEST - admin functionality changes to admin functionality may require logging out and logging back in when in doubt, clear the cache
  118. 118. go live! disable maintenance mode watch var/report and var/log folders did you disable maintenance mode?
  119. 119. magento performance
  120. 120. we’re live, now what? make sure it’s fast in ecommerce, speed = money
  121. 121. check the basics $5/month hosting probably won’t cut it enable all the caches disable developer mode
  122. 122. caching is important use a full page cache - included in ee for ce, use lesti fpc gordonlesti.com/lestifpc/
  123. 123. caching is important make sure your php instance has an opcode cache - apc, etc check your local.xml and configure for redis caching and sessions
  124. 124. some options can be risky magento compiler
  125. 125. learn much, much more wednesday, 3PM, potomac room “Making magento go fast” presented by Thijs Feryn
  126. 126. community advice
  127. 127. Some advice from the community clear the cache
  128. 128. Some advice from the community clear the cache don’t hesitate to ask for help
  129. 129. what about magento 2?
  130. 130. magento 2 - see for yourself github.com/magento/magento2
  131. 131. magento 2 talk wednesday morning, ash grove b, 10AM tobias zander presents what’s new in magento 2?
  132. 132. magento 2 release dates dev beta next month (december 2014) dev RC First half 2015 merchant beta mid-2015 general release end 2015
  133. 133. magento 2 similar to magento 1, but different
  134. 134. magento 2 - similarities same inspiration - apply best design patterns to the problem of ecommerce
  135. 135. magento 2 - differences composer service layer even more modular and easier to adapt
  136. 136. magento 2 - differences testing built in from the start
  137. 137. magento 2 - differences documentation! for more technical details: alankent.wordpress.com/
  138. 138. magento 2 - timelines magento 1 will be around for a long time magento 2 won’t be a popular choice for new sites until 2016
  139. 139. magento 2 - next steps for devs learn magento 2 give feedback to the magento 2 team
  140. 140. your next steps
  141. 141. read alanstorm.com/category/magento grokking magento: shop.vinaikopp.com/grokking-magento/
  142. 142. read magento-quickies.alanstorm.com store.pulsestorm.net/products/no-frills-magento- layout
  143. 143. watch magento u fundamentals of magento development 40 hours of magento dev goodness
  144. 144. participate twitter - #realmagento @benmarks @joshuaswarren
  145. 145. participate reddit - r/magento web - mageunity.com
  146. 146. participate stack exchange - magento.stackexchange.com
  147. 147. attend magento imagine - april 2015, vegas imagine2015.magento.com local meet magento events www.meet-magento.com
  148. 148. questions?
  149. 149. thank you! joshuawarren.com @joshuaswarren josh@creatuity.com

×