Magento 1.8 Onepage Checkout – How to Do Onestep Checkout for Checkout Page

checkoutmagento-1.8onepage-checkoutonestepcheckout

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.

enter image description here

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?

Best Answer

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.

Related Topic