Table Of Contents
Minimal System Requirements...3
Installation...4
Magento Connect Package...4
Minimal System Requirements
Make sure that your Magento installment is compatible with the extension minimal system requirements:
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
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
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”
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.
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
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
It is responsible for displaying the checkout layout, contains method that can be invoked from layout for placing steps into particular placeholders.
• Helpers
◦ EcomDev_CheckItOut_Helper_Data
It is the main module helper and used for retrieving configuration values in controllers and templates.
• Models
◦ EcomDev_CheckItOut_Model_Config_Source_Confirm_Type
• Controllers
◦ EcomDev_CheckItOut_OnepageController
Controller that overrides controller for OPC. All the logic related to extension functionality in Magento are placed here.
Layout
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
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.
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
Renders contents of confirmation step if it is enabled in the extension configuration
Backend
• app/design/adminhtml/default/default/template/ecomdev/checkitout/sales/comm ents.phtml
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.
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
For running unit tests you need to install our free community module that is available here:
