Magento – Onepage checkout progress not working anymore

checkoutjavascriptonepage-checkoutupgrade

I've recently (yesterday) upgraded from magento v1.7.7 to 1.9.2.2 . The problem is now that my onepage checkout progress doesn't work anymore. The 4 steps are shown but not the progress of them.

When I'm going the steps he shows in my Network:

enter image description here

But normally he should show something like this:

enter image description here

As you can see there's a difference with prevStep and toStep. Also the progress response isn't empty in the second case … .

What could be the problem of this?

Best Answer

The problem here is that the current Magento theme is not fully compatible with the upgraded version of Magento. There are 2 things that needs to be taken care of:

1) New set of handles for the checkout progress section. you will need to add it to the checkout.xml file(layout\checkout.xml). This is for the ajax responses.

<!-- Individual blocks for Progress steps begins -->
<checkout_onepage_progress_billing>
    <!-- Mage_Checkout -->
    <remove name="right"/>
    <remove name="left"/>

    <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress/billing.phtml">
        <action method="setInfoTemplate"><method></method><template></template></action>
    </block>
</checkout_onepage_progress_billing>


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

    <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress/shipping.phtml">
        <action method="setInfoTemplate"><method></method><template></template></action>
    </block>
</checkout_onepage_progress_shipping>


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

    <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress/shipping_method.phtml">
        <action method="setInfoTemplate"><method></method><template></template></action>
    </block>
</checkout_onepage_progress_shipping_method>

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

    <block type="checkout/onepage_progress" name="root" output="toHtml" template="checkout/onepage/progress/payment.phtml">
        <block type="checkout/onepage_payment_info" name="payment_info">
            <action method="setInfoTemplate"><method></method><template></template></action>
        </block>
        <action method="setInfoTemplate"><method></method><template></template></action>
    </block>
</checkout_onepage_progress_payment>

<!-- end individual progress blocks -->


2) Add the new element ids in the progress.phtml file(template\checkout\onepage\progress.phtml) so that the ajax request results will be updated to the elements. The new version has added these ids and my older theme didn't had these ids. Check this diff.

Just in case the diff expired in future: enter image description here

The screenshot show only 2 instances and there are 4 similar instances that needs update.

In this particular case step #1 seems to be taken care of

Related Topic