CheckItOut Developer Manual version 1.0.0 CheckItOut Developer Manual Page 1/13
Table Of Contents Minimal System Requirements...3 Installation...4 Magento Connect Package...4 Zip Archive...7 Overview...9 Structure...9 Module...9 Layout...10 Frontend...10 Backend...10 Templates...11 Frontend...11 Backend...11 Skin...11 JS Classes...12 CSS files...12 CheckItOut Developer Manual Page 2/13
Minimal System Requirements Make sure that your Magento installment is compatible with the extension minimal system requirements: Magento CE 1.5.x, PE 1.10.x, EE 1.10.x CheckItOut Developer Manual Page 3/13
Installation After you completed the purchase you have two installation options: MagentoConnect Manager or manually by uploading extension files on the web-server. Magento Connect Package 1. Download Magento Connect Package file from our extension shop 2. Sign in into Magento Admin Panel 3. Navigate to System Magento Connect Magento Connect Manager CheckItOut Developer Manual Page 4/13
4. Sign in with full permissions administrator account 5. Select downloaded package file in Direct package file upload Upload package file field and press Upload button 6. When the installation process will be completed press Refresh button 7. In result you will some something similar to the following: CheckItOut Developer Manual Page 5/13
8. Return to the admin panel and open System Cache Management page 9. Press Flush Magento Cache button 10.Logout and login for reloading ACL rules for the admin user, then open System Configuration page and open this configuration section Sales Check It Out Configuration 11. Enable CheckItOut extension functionality CheckItOut Developer Manual Page 6/13
12. Now extension is installed and enabled Zip Archive 1. Download ZIP Archive file from our extension shop 2. Upload it on your web-server into Magento root directory and run the following command if you have SSH access $ unzip ecomdev_checkitout.zip Or unzip archive on your local machine and upload its contents to Magento root directory. 3. Sign in into Magento Admin Panel 4. Open System Cache Management page CheckItOut Developer Manual Page 7/13
5. Press Flush Magento Cache button 6. Logout and login for reloading ACL rules for the admin user, then open System Configuration page and open this configuration section Sales Check It Out Configuration 7. Enable CheckItOut extension functionality and save configuration 8. Now extension is installed and enabled CheckItOut Developer Manual Page 8/13
Overview The extension modifies one page checkout (OPC) from standard Magento installation for getting rid of unnecessary actions during the checkout process. The main goal of the extension is minimizing changes in the blocks & templates of OPC, so it just adds a wrapper block that displays steps depending on the layout. Also it uses own JS class for whole checkout process that emulates required methods from OPC one, that makes it compatible with payment methods that depend on OPC logic. Structure Module The module EcomDev_CheckItOut is placed community code pool so you can find module files here: app/code/community/ecomdev/checkitout Here is some information about classes that are presented in the module: Blocks EcomDev_CheckItOut_Block_Checkout_Layout Helpers It is responsible for displaying the checkout layout, contains method that can be invoked from layout for placing steps into particular placeholders. EcomDev_CheckItOut_Helper_Data Models It is the main module helper and used for retrieving configuration values in controllers and templates. EcomDev_CheckItOut_Model_Config_Source_Confirm_Type It is a source model for confiruation, contains options for Confirmation Type field EcomDev_CheckItOut_Model_Quote_Item_Info It is a wrapper model, that is used for creation information about quote item for using it in JS files. EcomDev_CheckItOut_Model_Mysql4_Setup It is a setup model and extended from Mage_Sales one, because uses pseudo EAV addattribute() method for adding new columns in order and quote tables. CheckItOut Developer Manual Page 9/13
Controllers Layout EcomDev_CheckItOut_OnepageController Controller that overrides controller for OPC. All the logic related to extension functionality in Magento are placed here. The extension has two layout files one for frontend and the other one is for the admin panel Frontend app/design/frontend/base/default/layout/ecomdev/checkitout.xml Backend Contains definitions of custom layout page, defines handles for additional confirmation step. Used handles: ecomdev_checkitout_layout hande is used for creation of CheckItOut blocks and changing templates for these OPC blocks: checkout.onepage.login uses custom login step template, that shows popup window checkout.onepage.payment uses custom template for own payment form container, that is similar to standard checkout.onepage.review uses custom template for passing custom parameters to review step JS object. Also creates templates for generation Change Qty and Remove Item elements for products. ecomdev_checkitout_no_payment handle is used for fixing problems with review step for some payment methods, that adds own information, but uses getmethodinstance() when it shouldn't be invoked. checkout_onepage_steps handle is used for re-loading of particular checkout steps with a single call. Uses ecomdev_checkitout_layout as the base. checkout_onepage_review handle used for loading review step information. Add new template block with custom fields that are configured in the admin. checkout_onepage_confirm handle with additional checkout step that is loaded as overlay after pressing Place Order button. app/design/adminhtml/default/default/layout/ecomdev/checkitout.xml Shows customer comment field on the order view page CheckItOut Developer Manual Page 10/13
Templates Frontend app/design/frontend/base/default/template/ecomdev/checkitout/layout.phtml Renders custom layout for the checkout process, initializes EcomDev.CheckItOut JS class instance. app/design/frontend/base/default/template/ecomdev/checkitout/login.phtml Renders login from and creates LoginStep JS class instance app/design/frontend/base/default/template/ecomdev/checkitout/payment.phtml Renders payment forms container and creates Payment JS class instance app/design/frontend/base/default/template/ecomdev/checkitout/review.phtml Renders order container and creates Review JS class instance app/design/frontend/base/default/template/ecomdev/checkitout/review/info.phtml Renders ordered items table and displays confirm checkbox if it is enabled in configuration app/design/frontend/base/default/template/ecomdev/checkitout/review/fields.pht ml Renders additional fields that are enabled in the extension configuration, now it is Newsletter SingUp and Customer Comments fields app/design/frontend/base/default/template/ecomdev/checkitout/confirm.phtml Backend Skin Renders contents of confirmation step if it is enabled in the extension configuration app/design/adminhtml/default/default/template/ecomdev/checkitout/sales/comm ents.phtml Adds customer comment to info block on order view page via JS All the functionality related to minimization of user actions during checkout is managed by JS classes that are defined in this file: skin/frontend/base/default/js/ecomdev/checkitout.js It contains such classes that you may override via your JS file. It is not recommended to modify existing one for upgrading to new extension version without problems. Since JS gives you ability to set methods in the run-time so you easily can change method of the class just CheckItOut Developer Manual Page 11/13
by setting prototype object property. JS Classes Here is the list of the JS classes that you might be interested in: EcomDev.CheckItOut main checkout class that manages all step object and submits order details if all steps data are valid. EcomDev.CheckItOut.Step base class for all checkout steps, controls initialization, reloading, submission processes of each step. LoginStep class that manages login popup. Based on EcomDev.CheckItOut.Step. EcomDev.CheckItOut.Step.Address base class for address steps in checkout, controllers reloading of region field, fulfillment of forms from the address dropdown, showing validation errors. Based on EcomDev.CheckItOut.Step. Billing class that manages billing address form. Based on EcomDev.CheckItOut.Step.Address. Shipping class that manages shipping address form. Based on EcomDev.CheckItOut.Step.Address. ShippingMethod class that manages selection of shipping method step. Based on EcomDev.CheckItOut.Step. Payment class that manages payment details step. Based on EcomDev.CheckItOut.Step. Review class that manages review checkout step. Creates ItemAction objects. Based on EcomDev.CheckItOut.Step. ItemAction base class for classes that create user interface elements for order items, like edit qty input field or remove item button. ChangeItemQty class creates user interface for changing qty to product and submits data to the server. Based on ItemAction. RemoveItem class creates user interface for product removal from order and submits data to the server. Based on ItemAction. ConfirmPopUp class that manages confirmation overlay after placing order action. Based on EcomDev.CheckItOut.Step. CSS files This extension is comes with CSS files for standard Magento themes that are available in Community Edition. If you want to create your own style in theme, copy one of them (usually it is blank theme css file) CheckItOut Developer Manual Page 12/13
Here the list of available CSS files: skin/frontend/base/default/css/ecomdev/checkitout.css skin/frontend/default/blank/css/ecomdev/checkitout.css skin/frontend/default/default/css/ecomdev/checkitout.css skin/frontend/default/blue/css/ecomdev/checkitout.css skin/frontend/default/modern/css/ecomdev/checkitout.css Unit Tests There is also available Unit Tests for checkout process that will be delivered by the customer request after the extension purchase. For more information please send us an email to sales@ecomdev.org. For running unit tests you need to install our free community module that is available here: http://www.ecomdev.org/shop/php-unit-test-suite.html CheckItOut Developer Manual Page 13/13