Onepage checkout jump back to cart in Firefox

Question

My Magento 1.9.0.1 has the issue in FireFox , when customers fill their delivery information and click on "continue" it will jump back to cart page. This problem only appears in Firefox. With debug in FireFox, it shows

   NetworkError: A network error occurred.

Anyone has the same issue, or have an idea about how to fix it?

Answer 1

according to the error reported by Chrome, it appears that it could be because you are on an https page but attempting to make an ajax request over http and that is getting blocked for security reasons. The problem, again according to the error message from Chrome seems to be with the progress URL (/checkout/onepage/progress).

It does so happen that this URL is specified in the onepage.phtml template that is located at app\design\frontend\base\default\template\checkout\onepage.phtml. The file contains this bit of code:

<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>

as you can see the "progress" URL is beeing passed to the checkout object when creating this one. Possibly for some reason at this place the progress URL which is passed is an http URL when it would need to be an https URL.

Maybe your onepage.phtml is being overwritten by your theme and done in a bad way where this URL is hardcoded (not https) or maybe $this->getUrl('checkout/onepage/progress') does not return an https URL in your case for some reason.

I think you should look into your opcheckout.js file. Higher in the onepage.phtml you have this line:

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/opcheckout.js') ?>"></script>

This adds your opcheckout.js file to the checkout page. I would look at the source code of the checkout page in a browser to see what is the exact path of your opcheckout.js file (it could be rewritten in your theme!) then look into this file. The original file is located at skin\frontend\base\default\js\opcheckout.js but your theme could also overwrite it with its own modified copy.

The start of the code in the js file looks like this:

var Checkout = Class.create();
Checkout.prototype = {
    initialize: function(accordion, urls){
        this.accordion = accordion;
        this.progressUrl = urls.progress;
        this.reviewUrl = urls.review;
        this.saveMethodUrl = urls.saveMethod;
        this.failureUrl = urls.failure;
        this.billingForm = false;
        this.shippingForm= false;
        this.syncBillingShipping = false;
        this.method = '';
        this.payment = '';
        this.loadWaiting = false;
        this.steps = ['login', 'billing', 'shipping', 'shipping_method', 'payment', 'review'];
        //We use billing as beginning step since progress bar tracks from billing
        this.currentStep = 'billing';

        this.accordion.sections.each(function(section) {
            Event.observe($(section).down('.step-title'), 'click', this._onSectionClick.bindAsEventListener(this));
        }.bind(this));

        this.accordion.disallowAccessToNextSections = true;
    },

You could add an alert in this initialize function to display the progress URL like this:

var Checkout = Class.create();
Checkout.prototype = {
    initialize: function(accordion, urls){
        this.accordion = accordion;
        this.progressUrl = urls.progress;
        alert(this.progressUrl); //alert the progress URL!!!
        this.reviewUrl = urls.review;
        this.saveMethodUrl = urls.saveMethod;
        this.failureUrl = urls.failure;
        this.billingForm = false;
        this.shippingForm= false;
        this.syncBillingShipping = false;
        this.method = '';
        this.payment = '';
        this.loadWaiting = false;
        this.steps = ['login', 'billing', 'shipping', 'shipping_method', 'payment', 'review'];
        //We use billing as beginning step since progress bar tracks from billing
        this.currentStep = 'billing';

        this.accordion.sections.each(function(section) {
            Event.observe($(section).down('.step-title'), 'click', this._onSectionClick.bindAsEventListener(this));
        }.bind(this));

        this.accordion.disallowAccessToNextSections = true;
    },

If for some reason your progress URL is http (not https) you might wanna track it down to the onepage.phtml template and see why it is providing the class with an http URL.