Onepage Checkout - Displaying Billing/Shipping Address (Outside Progress Sidebar)

Question

What is the best way to display customer-entered information such as billing, shipping, and payment info into the checkout process?

The following is an example to demonstrate what I mean.

The first step is the customer has to enter their billing information:

The customer proceeds with shipping information, shipping method, and payment information before reviewing the order:

I would like to display previously entered information under each section where the "Edit" links are, once the customer is past each step. Is there a way to do this?

---

Some additional information:

The progress sidebar is hidden via /theme/skin/frontend/[package]/default/css/styles.css:

#checkout-progress-wrapper {display:none;}

Here is my /app/design/frontend/[package]/default/template/checkout/onepage.phtml:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<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>

<input type="hidden" name="checkout_method" id="login:guest" checked="checked" value="guest"/>

<script type="text/javascript">
//<![CDATA[
    var accordion = new Accordion('checkoutSteps', '.head', true);
    <?php if($this->getActiveStep()): ?>
    accordion.openSection('opc-billing');
    <?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') ?>'}
    );

    //IE fix
    var cb = $("login:guest");
    cb.checked = true;

    checkout.setMethod();
//]]>
</script>

Thanks for any help or suggestions!

Answer 1

I'm not an expert of Prototype.js, but it seems like the progress sidebar is modified by the reloadStep function of the skin/frontend/base/default/js/opcheckout.js script.

reloadStep: function(prevStep) {
    var updater = new Ajax.Updater(prevStep + '-progress-opcheckout', this.progressUrl, {
        method:'get',
        onFailure:this.ajaxFailure.bind(this),
        onComplete: function(){
            this.checkout.resetPreviousSteps();
        },
        parameters:prevStep ? { prevStep:prevStep } : null
    });
},

Where prevStep + '-progress-opcheckout' (prevStep could be billing, payment etc.) determines which block has to be edited.

One solution, but clearly not the best way, would be to add the code below just after the step-title div.

<div id="<?php echo $_stepId ?>-progress-opcheckout"></div>

As an id has to be unique, you would have to disable completely the progress sidebar, so not only hiding it.