My client wants to split the onepage checkout from magento into a multipage one. In his case, he wants to put the login(sign up)/shippingmethod in one page, and the billingmethod/paymentmethod/review in another one.
Is there an easy way to do this?
I'm pretty much a beginner in magento, so I have no idea if what I'm asking is completely crazy... Hope not!
Cheers! André
Changing the checkout process can be a complicated and risky task to undertake. If you plan on taking this on yourself, as a beginner, you should carefully consider risk + time involved vs reward/benefit. There could be a number of edge cases you may need to account for that you would be unfamiliar with (e.g. are you selling any digital or virtual items that don't require shipping?). Understanding Magento's layout/design structure, their use of Prototype JS framework and creating custom extensions is definitely a requirement to create something that meets your requirements and doesn't put future upgrades at risk. Not for the faint of heart or inexperienced.
Here are a few pointers that will hopefully help you understand some of the checkout process, should you chose to take on the task:
The one page checkout steps have a series of steps and templates to go with each. The layout for this area of Magento is defined in layout/checkout.xml. It is found within the <checkout_onepage_index> handle.
<reference name="content">
<block type="checkout/onepage" name="checkout.onepage" template="checkout/onepage.phtml">
<block type="checkout/onepage_login" name="checkout.onepage.login" as="login" template="checkout/onepage/login.phtml">
<block type="page/html_wrapper" name="checkout.onepage.login.before" as="login_before" translate="label">
<label>Login/Registration Before</label>
<action method="setMayBeInvisible"><value>1</value></action>
</block>
</block>
<block type="checkout/onepage_billing" name="checkout.onepage.billing" as="billing" template="checkout/onepage/billing.phtml"/>
<block type="checkout/onepage_shipping" name="checkout.onepage.shipping" as="shipping" template="checkout/onepage/shipping.phtml"/>
<block type="checkout/onepage_shipping_method" name="checkout.onepage.shipping_method" as="shipping_method" template="checkout/onepage/shipping_method.phtml">
<block type="checkout/onepage_shipping_method_available" name="checkout.onepage.shipping_method.available" as="available" template="checkout/onepage/shipping_method/available.phtml"/>
<block type="checkout/onepage_shipping_method_additional" name="checkout.onepage.shipping_method.additional" as="additional" template="checkout/onepage/shipping_method/additional.phtml"/>
</block>
<block type="checkout/onepage_payment" name="checkout.onepage.payment" as="payment" template="checkout/onepage/payment.phtml">
<block type="checkout/onepage_payment_methods" name="checkout.payment.methods" as="methods" template="checkout/onepage/payment/info.phtml">
<action method="setMethodFormTemplate"><method>purchaseorder</method><template>payment/form/purchaseorder.phtml</template></action>
</block>
</block>
<block type="checkout/onepage_review" name="checkout.onepage.review" as="review" template="checkout/onepage/review.phtml"/>
</block>
</reference>
In your custom theme you would then modify, add new blocks/templates or remove blocks via XML as necessary.
Frontend wise the one page checkout behavior is handled primarily in skin/frontend/base/default/js/opcheckout.js. Since we're dealing with javascript its usually possible to change the functionality without modifying the the opcheckout.js .
For instance, there is a property in the Checkout object called step:
this.steps = ['login', 'billing', 'shipping', 'shipping_method', 'payment', 'review'];
The checkout object in the template files is instantiated in base/default/template/checkout/onepage.phtml
var checkout = new Checkout(accordion,{
progress: '<?php echo $this->getUrl('checkout/onepage/progress') ?>',
review: '<?php echo $this->getUrl('checkout/onepage/review') ?>',
saveMethod: '<?php echo $this->getUrl('checkout/onepage/saveMethod') ?>',
failure: '<?php echo $this->getUrl('checkout/cart') ?>'}
);
It would be possible to add a new template via through a local.xml file in your custom theme to change the behavior of that instance of the Checkout javascript object.
<checkout_onepage_index>
<reference name="before_body_end">
<block type="core/template" template="checkout/onepage/custom_footer_js.phtml"/>
</reference>
</checkout_onepage_index>
Within this template it would be possible to change the instance properties/functionality.
If there is need to modify some functionality the recommended approach is to leverage Prototype JS's OOP functionality:
MyCheckout = Class.create(Checkout, {
...
//Custom functionality here
});
Then updating onepage.phtml in a custom theme to instantiate your version of the Checkout object:
var checkout = new Checkout(accordion,{
...
});
You may need a custom controller to handle the input from the shipping information, you should look at the app/code/core/Mage/Checkout/controllers/OnepageContoller.php file, mainly the saveShippingAction and saveShippingMethodAction methods. Those two methods should provide examples on how to save the shipping address and method selections to the session.
As you can see there are a number of moving parts that need to be orchestrated. The areas I listed above are just the tip of the iceberg and what I could come up in a short amount of time.
Having done this a few times I dont consider it the easiest of tasks to complete. However what you want to achieve is not overly complicated.
To start with the way that Magento checkout works is via AJAX and a single OnePageController.php with actions for each step. On the front end there is an accordion built up with each of the step headers. When each step is completed and all validation is passed the AJAX controller generates the block HTML for the next view.
The steps are built in this file: app/code/core/Mage/Checkout/Block/Onepage/Abstract.php
/**
* Get checkout steps codes
*
* @return array
*/
protected function _getStepCodes()
{
return array('login', 'billing', 'shipping', 'shipping_method', 'payment', 'review');
}
So you will want to override this method so that you can introduce a combined step.
When the possible steps are output to the front end you will now have login removed ( or however you think best to achieve this )
Next up is the controller action: app/code/core/Mage/Checkout/controllers/OnepageController.php
For the action you remove you will need to place the logic from that action into the combined step one. E.g. if you merge login to shipping you need the login action methods available in the shipping method.
Finally you will need to update the HTML markup within the template files to match what you require: app/design/frontend/base/default/template/checkout
So following the example above take the logic from login and place it within shipping or better still modify layout.xml so it can be included as a block still.
This should cover what you need to achieve but feel free to ask for more help if required.
