One page checkout was working properly about a week ago and now its not. I am no doubt at fault, because I was still having an issue related to the admin backend, and I probably fouled this up somehow in the process of working on that.

In any case, what happens is that when a (logged in, registered) user clicks on the "Continue" button in the Billing Information step of the one page checkout, its as if the button was not clicked. It doesn't proceed to the next step. And the error console (in Firefox) reports "TypeError: checkout is undefined", and it shows line 303 in opcheckout.js.

This problem is very similar to another one posted on SO but (a) that one isn't really answered and (b) I don't have a high enough score to ment (or add to to the question there).

While a solution would be wonderful, I am also really trying to learn how to debug this myself. I have already applied many magento solutions that I've found by googling (for other problems) and, though they work and that's the main thing, I am starting to want to be able to solve my own problems. And maybe even be able to help others eventually...

So, in this case, given that "checkout in undefined", how might I find where it should get defined?

One page checkout was working properly about a week ago and now its not. I am no doubt at fault, because I was still having an issue related to the admin backend, and I probably fouled this up somehow in the process of working on that.

In any case, what happens is that when a (logged in, registered) user clicks on the "Continue" button in the Billing Information step of the one page checkout, its as if the button was not clicked. It doesn't proceed to the next step. And the error console (in Firefox) reports "TypeError: checkout is undefined", and it shows line 303 in opcheckout.js.

This problem is very similar to another one posted on SO but (a) that one isn't really answered and (b) I don't have a high enough score to ment (or add to to the question there).

While a solution would be wonderful, I am also really trying to learn how to debug this myself. I have already applied many magento solutions that I've found by googling (for other problems) and, though they work and that's the main thing, I am starting to want to be able to solve my own problems. And maybe even be able to help others eventually...

So, in this case, given that "checkout in undefined", how might I find where it should get defined?

• javascript
• jquery
• magento
• checkout

• When I switch to the default theme, this problem is gone. – Ben Dugan Commented Feb 26, 2013 at 21:36
• But that doesn't mean my problem is solved, it just narrows it down a bit: if the base package is used things work. But of course I want my customised package to work (as it used to). – Ben Dugan Commented Feb 26, 2013 at 21:54
• Try doing a diff on the /skin/frontend/base/default/js/opcheckout.js and the /skin/frontend/[yourpackage]/[yourtheme]/js/opcheckout.js files (if the latter exists). – pspahn Commented Feb 26, 2013 at 22:30
• Thanks: that is an excellent idea. Unfortunately, they match exactly. But I think I can use that line of attack in a few places. I'll let you know if I find anything. – Ben Dugan Commented Feb 27, 2013 at 0:12
• I am finding that there is a prior error, and maybe its causing this one. When I click on "Proceed To Checkout" from the shopping cart, it produces the error "TypeError: registry is undefined" and a link is shown to prototype.js. I didn't notice this before because I land on the Billing Information page as intended even though there's an error. – Ben Dugan Commented Feb 27, 2013 at 0:42

2 Answers 2

In my case, the /skin/frontend/base/default/js/opcheckout.js file did not match the one in /skin/frontend/[yourpackage]/[yourtheme]/js/opcheckout.js as pspahn suggested. The .js file in my theme was pletely blank. Copying the contents over fixed everything up. Commenting here for visibility for others who might be searching.

The solution here was to

1. Correct two bad class references in onepage.phtml, and
2. Rename some css classes to match what the stock magento checkout code wants.

The specific css classes needed were:

• step-title
• step
• number

Here is an excerpt of the corrected onepage.html file:

<ol id="checkoutSteps" class="one-page-checkout">`<?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['plete'])?'saved':'' ?>">
        <div class="step-title">
            <h3><span class="step-count"><?php echo $i ?></span> &nbsp;<?php echo $_stepInfo['label'] ?></h3><a href="#"><?php echo $this->__('Edit') ?></a>
        </div>
        <div id="checkout-step-<?php echo $_stepId ?>" class="step <?php if($_stepId=='shipping_method'): ?>-no-padding<?php endif; ?> a-item"  style="display:none;">
            <?php echo $this->getChildHtml($_stepId) ?>
        </div>
    </li>
<?php endforeach ?>
</ol>

And here is an example of copying one of my existing css classes to one of the new required ones (from the file boxes.css):

.one-page-checkout .box { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
.one-page-checkout .step { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }

I had called this "box", but it needs to be "step" as far as Magento is concerned. Since your css classes are likely to have been different, you will need to copy

I hope this helps someone.

By the way, here is how I figured this out:

1. Observe problem with my theme
2. Test with stock theme: confirm that works
3. Go back to my theme, and disable files selectively to figure out which ones make a difference,
4. Narrowed it down to one file: onepage.phtml, examine it carefully, pare to stock
5. Found css class names that my theme didn't have
6. Add them, debug

This is long and tedious, but it seems to work.