Whoops! There was a problem loading more pages. 04.Magento Extension Developers Guide v1.0.pdf. 04.Magento Extension Dev
Magento Extension Developer’s Guide
© Copyright 2012 X.commerce, Inc. All rights reserved. No part of this Guide shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from X.commerce, Inc. 06-01-2012
Table of Contents Magento Overview......................................................................................................... 1 Overview...................................................................................................................... 1 Code ............................................................................................................................ 2 Code Pools ............................................................................................................................ 2 Module code structure ......................................................................................................... 3 Magento Coding Standards ................................................................................................ 3 Design ......................................................................................................................... 3 Themes .................................................................................................................................. 4 Theme Fall-back ................................................................................................................... 4 Configuration ............................................................................................................... 5 An Example Magento Extension .................................................................................. 5 Extension overview ...................................................................................................... 5 Getting Started: Code Setup and Configuration .......................................................... 5 Selecting our code pool ....................................................................................................... 5 Creating our code structure ................................................................................................ 6 Creating our configuration files .......................................................................................... 8 Checking our module visibility .......................................................................................... 11 Getting Started: Design Setup ................................................................................... 12 Creating our template and layout structures .................................................................. 13 Auxiliary files ....................................................................................................................... 15 Development: The Front End ..................................................................................... 16 Preparing our ?>
8
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
true community
Module configuration XML Now that we have set up our initial configuration, we need to set up our module-specific configuration which will specify the structural elements (models, classes, helpers, ?> 1.0.0.0.1 Magentostudy_News_Model news_resource Magentostudy_News_Model_Resource
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
9
Magentostudy_News_Helper Magentostudy_News_Block Magentostudy_News Mage_Core_Model_Resource_Setup magentostudy_news/observer beforeNewsDisplayed standard Magentostudy_News news magentostudy_news.xml
10
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
Magentostudy_News_adminhtml magentostudy_news.xml 1 20 3
Checking our module visibility At this point, we have set up our initial and module-specific configuration settings. If we have done everything correctly, Magento should "see" our module. We can check this in the Admin panel. Enter the Admin panel and navigate to System > Configuration > Advanced > Disable Modules Output to find our module named "Magentostudy_News". Note You may not see your module because of caching. There are two ways to resolve this:
• •
Clear the cache every time you make a change. Disable caching during the development process.
To clear the cache or change its settings, enter the Admin panel, navigate to System > Cache Management and use the "Flush Magento Cache" button. To disable the cache, select all of the cache types, select the "Disable" from the dropdown, and press "Submit".
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
11
Getting Started: Design Setup Now that we have got our code structure created and our extension configured, we will focus on creating our design structure. While Magento follows the basic ideas of the MVC design pattern, the "View" component is quite different from the Zend standard. Instead of a single file that receives ?> News news News true News Page
26
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
page/2columns-right.phtml Site News News Item Page page/2columns-right.phtml
Implementing our blocks In our layout above, we add three view blocks: one for our footer link, a second for our list of news posts and, a third for our individual posts. We do not need to add anything more for our footer link block because it is a native Magento block and we are simply adding our link to it. However, we will need to create classes for our list and item blocks, Magentostudy/News/Block/List.php and Magentostudy/News/Block/Item.php.
Magentostudy_News_Block_List separator-top News general text 500 1 1 1 News View Settings text
46
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
10 1 1 1 Enable News On Frontend select adminhtml/system_config_source_yesno 10 1 1 1 News Per Page Empty value is the same as default 20. 30 1 1 1 1 Number of days since a post has been marked as recently added Empty value is the same as default 3. 50 1 1 1 1
Specifying our routes and request flow Configuring our routes Before implementing our controller, we need to configure our Admin routes in config.xml.
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
47
config.xml (specifying routes) Magentostudy_News_adminhtml
Implementing our controller According to our plan, we need the following actions for the Admin interface: • • • • •
List of news posts New news post Edit news post Save news post Delete news post
Also, we need to implement gridAction to make our extension similar to other lists in the Admin interface and the _isAllowed method to handle ACL instructions. We'll add our controller Magentostudy/News/controller/adminhtml/NewsController.php
Magentostudy_News_adminhtml_NewsController
54
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
main_sectionnews_edit_tab_main content_sectionnews_edit_tab_content image_sectionnews_edit_tab_image< /action>
Implementing our blocks As mentioned above, the Admin panel has a similar structure for all of its components. The blocks structure is also similar; they all use a grid that is connected by edit forms, each of which has different tabs. To illustrate our Admin panel blocks structure, observe the following schema (Figure 6):
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
55
Figure 6: Our Admin panel block structure
We will use the following blocks: • • •
56
adminhtml_news - grid container adminhtml_news_grid - grid adminhtml_news_edit - edit form container (the same forms are used for creating a new post and editing an existing post)
Magento Extension Developer’s Guide, v. 1.0
© 2012 X.commerce, Inc.
• • •
adminhtml_news_edit_form - edit form adminhtml_news_edit_tabs - edit form tabs adminhtml_news_edit_form_element_image - specific form element to work with images adminhtml_news_edit_tab_content - edit form content tab adminhtml_news_edit_tab_image - edit form image tab adminhtml_news_edit_tab_main - edit form main tab
• • •
Here's our Admin panel block implementation:
Magentostudy_News_Block_adminhtml_News
