Inserting an Additional Step Into Checkout

There are several things that need to be considered in implementing an additional step. Here the basics that may be useful to now. As always this will be stepped through by implementing a new module.

config.xml:

<?xml version="1.0"?>
<config>

    <modules>
        <Howto_Customcheckout>
            <version>0.1.0</version>
        </Howto_Customcheckout>
    </modules>

    <admin>
        <routers>
            <customcheckout>
                <use>admin</use>
                <args>
                    <module>Howto_Customcheckout</module>
                    <frontName>customcheckout</frontName>
                </args>
            </customcheckout>
        </routers>
    </admin>

    <frontend>
        <layout>
            <updates>
                <customcheckout module="customcheckout">
                    <file>howto_customcheckout.xml</file>
                </customcheckout>
            </updates>
        </layout>
    </frontend>

    <global>
        <rewrite>
            <customcheckout_controller_rewrite> <!--This can be any unique id -->
                <from><![CDATA[#^/checkout/onepage/#]]></from>
                <!-- the URL which to override-->
                <to>/customcheckout/onepage/</to>
                <!-- destination url -->
            </customcheckout_controller_rewrite>
        </rewrite>

        <blocks>
            <customcheckout>
                <class>Howto_Customcheckout_Block</class>
            </customcheckout>
            <checkout>
                <rewrite>
                    <onepage>Howto_Customcheckout_Block_Checkout_Onepage</onepage>
                    <onepage_progress>Howto_Customcheckout_Block_Checkout_Onepage_Progress</onepage_progress>
                </rewrite>
            </checkout>
        </blocks>

        <helpers>
            <customcheckout>
                <class>Howto_Customcheckout_Helper</class>
            </customcheckout>
        </helpers>

        <models>
            <checkout>
                <rewrite>
                    <type_onepage>Howto_Customcheckout_Model_Checkout_Type_Onepage</type_onepage>
                </rewrite>
            </checkout>

            <customcheckout>
                <class>Howto_Customcheckout_Model</class>
            </customcheckout>

        </models>

    <global>

</config>

FILL IN OTHER DETAILS HERE….

An important part of the process in relation to the display of the new step goes to the layout aspect.

/app/design/frontend/default//layout/howto_customcheckout.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<layout version="0.1.0">
    <checkout_onepage_index> <!-- Adding our new step to onepage block  -->
        <reference name='checkout.onepage'>
            <action method='setTemplate'><template>checkout/onepage.phtml</template></action>

            <block type="customcheckout/checkout_onepage_customcheckout" name="checkout.onepage.customcheckout" as="customcheckout" template="checkout/onepage/customcheckout.phtml">
                <block type="customcheckout/checkout_onepage_customcheckout" name="checkout.onepage.customcheckout.child" as="customcheckout_child" template="checkout/onepage/customcheckout/customcheckout_child.phtml" />
            </block>

        </reference>
        
        <reference name='checkout.progress'> <!-- Change the template of progress block -->
            <action method='setTemplate'><template>checkout/onepage/progress.phtml</template></action>
        </reference> <!-- Here we change the template of the progress block to our custom template created -->
    </checkout_onepage_index>

    <checkout_onepage_customcheckout>
        <!-- Mage_Checkout -->
        <remove name="right"/>
        <remove name="left"/>

        <block type="customcheckout/checkout_onepage_customcheckout" name="root" output="toHtml" template="checkout/onepage/customcheckout/customcheckout_child.phtml"/>
    </checkout_onepage_customcheckout>

    <checkout_onepage_progress>  <!-- Change the template of progress block -->
        <reference name='root'>
            <action method='setTemplate'><template>checkout/onepage/progress.phtml</template></action>
        </reference>
    </checkout_onepage_progress>
</layout>

/app/code/local/Howto/Customcheckout/Block/Checkout/Onepage.php

<?php

class Webholism_DeliveryTimes_Block_Checkout_Onepage extends Mage_Checkout_Block_Onepage
{
	/**
	 * Get checkout steps codes
	 *
	 * @return array
	 */
	protected function _getStepCodes()
	{
		return array('billing', 'shipping', 'additionaltest', 'deliverytimes', 'payment', 'review');
	}

    public function getSteps()
    {
        $steps = array();

        if (!$this->isCustomerLoggedIn()) {
            $steps['login'] = $this->getCheckout()->getStepData('login');
        }

        // Adding new deliverytimes step, and remove shipping_method as this is to be automatically specified
        $stepCodes = array('billing', 'shipping', 'customcheckout', 'shipping-method', 'payment', 'review');

        foreach ($stepCodes as $step) {
            $steps[$step] = $this->getCheckout()->getStepData($step);
        }
        return $steps;
    }

/app/design/frontend/default//template/checkout/onepage/customcheckout.phtml

<?php ?>
<form  action="" id="co-customcheckout-form">
    <fieldset>
        <ul class="form-list">
            <li id="checkout-customcheckout-load">
                <?php echo ($this->getChildHtml('customcheckout_child')); ?>
            </li>
        </ul>

        <div class="buttons-set" id="customcheckout-buttons-container">
            <p class="back-link"><a href="#" onclick="checkout.back(); return false;"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
            <button type="button" title="<?php echo $this->__('Continue') ?>" class="button" onclick="customcheckout.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>
            <span class="please-wait" id="customcheckout-please-wait" style="display:none;">
                <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo $this->__('Loading next step...') ?>" title="<?php echo $this->__('Loading next step...') ?>" class="v-middle" /> <?php echo $this->__('Loading next step...') ?>
            </span>
        </div>
    </fieldset>
</form>
<script type="text/javascript">
    //<![CDATA[
    var customcheckout = new CustomcheckoutMethod('co-customcheckout-form','<?php echo $this->getUrl('customcheckout/onepage/saveCustomcheckout') ?>');
    var customcheckoutForm = new VarienForm('co-customcheckout-form');
    //]]>
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *