Magento

How difficult is it to redo the onepage checkout page? I ask because I’ve been seeing some strange issues. Specifically, the page doesn’t advance PASS the Shipping Method. Meaning it won’t get to the portion where the customer enters payment details.

I’ve just put in standard details and checked “Same as billing” for shipping, yet. .still it Shows the UPS options, but will not advance any further. The “loading” next step appears.. then disappears.

If I wanted to have a normal 1-2 page checkout rather than the one-page option this is possible right?  Or is there edits that need to be made outside of the template files within the code?

Just curious.

Think I’ve isolated this to just the ShippingMethod.save Method?  Is there some reason it wouldn’t advance pass this point?  And more importantly.. if I wanted to re-create this form, do I need to call the same method?

Disregard this. I figured out the issue.  It has something to do with one of my additonal stylesheets, theres some sort of conflict. Working it out now.

I’m having similar issues, what specific id or class was it that messed this up?  I have been in and out of my custom.css and the boxes.css file looking for the culprit.

Thank you in advance!

Jack,
I’m not exactly sure what exact class it was, as I added alot of custom css styles. What I ended up doing was removing the reference to my stylesheet altogether and used the stock/default magento demo checkout. Once i saw that it worked, I built back in my styes bit by bit, checking to make sure it kept working. Sorta tedious.. but I’m thinking you might eventually find the bug.  It’s something with the javascript possibly conflicting I think.  I didn’t try running Firebug over the page ... that might have helped. But try removing your css getting it work from the demo and then working from there.

Yep, onepage checkout javascript uses selectors based on specific html nodes structure and css classes… Should be done more flexible later on

Can you give some more details of where I should start looking to fix this problem?  I can get to the shipping section of the checkout page but it won’t go any further. When you click the ‘Continue’ button the ‘loading next page’ appear and then then disappears but nothing else happens

Thanks

Okay, I’ve managed to fix it! Here’s how and also more information on where to look if you are having a problem with the one-page checkout.
The template that you use for the one-page checkout MUST contain the following code somewhere in it:

This DIV is updated via Javascript to show the details that have currently been added for the order details. If the DIV is not there then the page will stop ofter the Shipping details or Shipping Method sections and go no further.

Here is where to look \skin\frontend\OC\default\js\opcheckout.js.  This file controls everything on the one-page checkout.
Line 38

If you look down through this file you will see a line that says save: function() within each section. This is where the save is called when you click the continue button to go to the next section

nextStep: is the function for loading the next section to view/edit. Each of the sections has it’s own function from setBilling on line 94 to setReview on line 130 that sets the next section to go to.

Hope this helps

I must say how much I appreciate your posting this information.

Obviously I can’t take a guess at how many others have ran into this issue, but our company (as a design firm) has been stuck on this for several days now. After searching the forums and coming across this, your last post helped us greatly.

Thanks!

Dan
Can you give some more detail of where ‘col-right’ exist?thank you very much!
I can get to the shipping section of the checkout page but it won’t go any further. When you click the ‘Continue’ button the ‘loading next page’ appear and then then disappears but nothing else happens

sherrychen2008 - 24 April 2008 05:51 PM

Dan
Can you give some more detail of where ‘col-right’ exist?thank you very much!
I can get to the shipping section of the checkout page but it won’t go any further. When you click the ‘Continue’ button the ‘loading next page’ appear and then then disappears but nothing else happens

Hi sherrychen, not Dan but I think can help answer this as I got it working after seeing Dan’s post.

I can’t remember where did the “side-col” places in the original file, but here is what I got it working.

My layout for onepage checkout is ‘2column-right.phtml, and the content area is floated left and right

<div id="left’> one page checkout steps go here </div>

<div id="right">YOUR CHECKOUT PROGRESS goes here </div>

I added a new class for ‘side-col’ in the Right section like so:

<div id="right" class="side-col">YOUR CHECKOUT PROGRESS goes here </div>

I don’t have a ‘side-col’ declared in my CSS file as everything is controlled by the element of #right and its descendents.

Hope this helps!

Thank you for help.I followed what your said, but I still can not solve this problem!
so bad!

Hello,chinesedream
Thank you for your help! I have solved that problem! yesterday I didnt find where did the “side-col” places in the original file.so surprise i find it today!

Hi,

I run into the same problem and took me some time to figure how to solve it.

Here is some info that might help other people.
As the others before me said, the javascript function used to update the checkout progress is looking for an element that has the class ‘col-right’.

In the original design (page/3columns.phtml, page/2columns-right.phtml) there was a div like this: <div class="col-right side-col">

To make the checkout work, add an element that has class="col-right" in your design. There some checkout information will be displayed.
For example I added an empty <div class="col-right side-col"> </div> in my 1column.phtml template.

Hope this helps.