How to do onestep checkout for the checkout page?

Question

How can show all the checkout forms (such as billing address, shipping method, payment method, additional information, and checkout review) on one page without going through the step by step from 1 to 5?

By Magento checkout default, you have to go through the step of 'Checkout as a Guest or Register' before you can see the form of billing address, and so on. I want to avoid too many clicks on the checkout page, so I want to display all of these forms when you click 'Proceed to checkout' and land on this check out page. Is it possible?

This is done by this website https://www.millesima.co.uk/firecheckout/ and this is the screen shot of its checkout page where you see all the forms are displayed on this single page.

I assume that it is onepage.phtml (frontend\mystore\default\template\checkout/onepage.phtml) that I should edit,

<div class="page-title">
    <h1><?php echo $this->__('Checkout') ?></h1>
</div>

<script type="text/javascript" src="<?php echo $this->getJsUrl('varien/accordion.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/opcheckout.js') ?>"></script>
<ol class="opc" id="checkoutSteps">
<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
    <li id="opc-<?php echo $_stepId ?>" class="section<?php echo !empty($_stepInfo['allow'])?' allow':'' ?><?php echo !empty($_stepInfo['complete'])?' saved':'' ?>">
        <div class="step-title">
            <span class="number"><?php echo $i ?></span>
            <h2><?php echo $_stepInfo['label'] ?></h2>
            <a href="#"><?php echo $this->__('Edit') ?></a>
        </div>
        <div id="checkout-step-<?php echo $_stepId ?>" class="step a-item" style="display:none;">
            <?php echo $this->getChildHtml($_stepId) ?>
        </div>
    </li>
<?php endforeach ?>
</ol>
<script type="text/javascript">
//<![CDATA[
    var accordion = new Accordion('checkoutSteps', '.step-title', true);
    <?php if($this->getActiveStep()): ?>
    accordion.openSection('opc-<?php echo $this->getActiveStep() ?>');
    <?php endif ?>
    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') ?>'}
    );
//]]>
</script>

So I replace the code above with,

<?php echo $this->getChildHtml('billing') ?>
<?php echo $this->getChildHtml('shipping') ?>
<?php echo $this->getChildHtml('shippingmethod') ?>
<?php echo $this->getChildHtml('payment') ?>

But what about the forms for ADDITIONAL INFORMATION and CHECKOUT REVIEW?

Also this line <?php echo $this->getChildHtml('shippingmethod') ?> does not pull the shipping methods that I have configured in Magento's backoffice at all. Any idea why?

Answer 1

The billing and shipping step can be directly included via the layout XML but contents for shipping, payment and review step need to be loaded with javascript.

Basically you will need to write a javascript function that tries to get the shipment and payment methods whenever the address fields are changed (at least country, region and postcode).

Then you will need to create your own extension that handles the AJAX call from your javascript to retrieve all possible shipping/payment methods based on the address data entered by the user.

Honestly it will probably be cheaper to buy a solution like Firecheckout than to build it yourself. It can be quite complicated.

Answer 2

I just finished writing an extension to handle all of this on Magento 2. I'll walk you through the process.

• Create a new extension, this is going to take a lot of code
• Create a new wrapper .phtml file that will contain all of your sections
• Use the Layout XMLs to include all sections into your wrapper.phtml
• You'll need a controller to accept the ajax posts from the page sections
• After the shipping address you'll want to post an ajax update. this will allow magento to calculate shipping rates. You'll receive a return of the tax totals and a return of the shipping methods.
• After the user selects their shipping method you'll need to update the totals.
• When the order is placed you'll have to run validation on the quote and return any errors or notices to the customer.

You can demo the final ext here M2 One Step Checkout