Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

[TIP] one page checkout breaks if right-column div class names are changed
 
Ross
Guru
 
Avatar
Total Posts:  336
Joined:  2007-08-31
Scarborough, North Yorkshire, UK
 

Just a tip for anyone creating a custom theme…

If you customise the main page .pthml files (in this case: 2columns-right.phtml) and you change the class names for the right column it seems to break the one page checkout (It won’t progress from the Shipping Method to the Payment Information with the accordian).

My guess is that the ajax used on the one page checkout references the

<div class="col-right side-col">
when it updates the address information etc. in the right column.

It would be good if there wasn’t a dependency here, but that’s how it is at the moment.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
Ross - 19 March 2008 03:44 AM

Just a tip for anyone creating a custom theme…

If you customise the main page .pthml files (in this case: 2columns-right.phtml) and you change the class names for the right column it seems to break the one page checkout (It won’t progress from the Shipping Method to the Payment Information with the accordian).

My guess is that the ajax used on the one page checkout references the

<div class="col-right side-col">
when it updates the address information etc. in the right column.

Ross. thanks for the heads up. I ‘d been struggling with this page since beta 1, and had ignored the issue until now, still, I can’t get passed the #5 - payment information as guest or login user. Also, if I click ‘back’ at #4 - shipping method back to #3 - Shipping information, it won’t allow me to go to #4.  No errors message is prompted for #5 and #4.

There was a thread mentioned about updating to the latest js files in Skin folder, thought I didn’t modify anything there and have always had the updated version, but thought that might be my hope. No luck!

It would be good if there wasn’t a dependency here, but that’s how it is at the moment.

In the Onepage checkout, I noticed the Accordion script rely on ‘checkoutSteps’, ‘.head’ and ‘opc-’; I made sure I have these classes in place, still, it doesn’t solve my problem.

I think it would be very considerate of Magento team to release a Magento’s IDs and Classes cheat sheet so that we know what should not be removed in our custom themes.

My theme has no ‘col-right and side-col’, will bring them back and see how it goes.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
chinesedream - 19 March 2008 04:05 AM

My theme has no ‘col-right and side-col’, will bring them back and see how it goes.

Vola! THANK YOU! Hug you!  LOL  :

 
Magento Community Magento Community
Magento Community
Magento Community
 
atlasit
Member
 
Avatar
Total Posts:  40
Joined:  2008-06-03
Los Angeles, CA
 

Ross!  Thanks for documenting this AND looking out on the discussion boards for ppl that have issues.  I never would have caught this dependency!  Good job on your sites!  you’re definitely ahead of the curve.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ewald
Jr. Member
 
Total Posts:  18
Joined:  2008-02-01
 

Great !!! Thanks for this advice !!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
gideonvalor
Jr. Member
 
Avatar
Total Posts:  4
Joined:  2008-10-15
Cumberland, RI
 
Ross - 19 March 2008 03:44 AM

Just a tip for anyone creating a custom theme…

If you customise the main page .pthml files (in this case: 2columns-right.phtml) and you change the class names for the right column it seems to break the one page checkout (It won’t progress from the Shipping Method to the Payment Information with the accordian).

My guess is that the ajax used on the one page checkout references the

<div class="col-right side-col">
when it updates the address information etc. in the right column.

It would be good if there wasn’t a dependency here, but that’s how it is at the moment.

Shear genius, saved me a ton of time, probably would have taken me a whole day to figure that out.  Good man!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ross
Guru
 
Avatar
Total Posts:  336
Joined:  2007-08-31
Scarborough, North Yorkshire, UK
 

I’m glad the tip has been helpful ! smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
redvinny
Member
 
Total Posts:  48
Joined:  2008-11-22
 

Nice one Ross.  That had me stumped for about 2 days - lost some hair over it!

I see that you’re also based in the UK.  How are you finding payment modules?  I’ve read on the forums here that it’s a bit of pain if you’re not using paypal!  I can’t see that most of my clients will want to use paypal - people always say to me “i’m not using ebay!!” I have a customer who is going to be using PROTX.  Have you any experience setting these modules up?

Thanks
Vinny

 
Magento Community Magento Community
Magento Community
Magento Community
 
mollon
Jr. Member
 
Total Posts:  8
Joined:  2008-09-03
Mexico City
 

I´m still in problems, when I clic on continue after fill all the Billing Information section nothing happens, I review the 2columns-right.phtml file and the class is correct:

<!-- [start] right -->
<div class="col-right side-col">
<?php echo $this->getChildHtml('right') ?>
 
</div>
<!-- [end] right -->

HELP PLEASE!!!!

The site is: http://www.101-mobile.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
redvinny
Member
 
Total Posts:  48
Joined:  2008-11-22
 

all I did was make sure that my CSS ref was identical to theirs given that ajax uses it.  This was the post that put me on the right lines:
http://www.magentocommerce.com/boards/viewthread/7439/

Also, a good thing to do is get your 2-columnsright.phtml up against theirs and make sure your naming is correct etc.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Maveck
Jr. Member
 
Total Posts:  22
Joined:  2008-08-21
 
Ross - 19 March 2008 03:44 AM

Just a tip for anyone creating a custom theme…


My guess is that the ajax used on the one page checkout references the

<div class="col-right side-col">
when it updates the address information etc. in the right column.

It would be good if there wasn’t a dependency here, but that’s how it is at the moment.

Thanks for this ! Thanks a lot !

 
Magento Community Magento Community
Magento Community
Magento Community
 
matthewstroh
Jr. Member
 
Total Posts:  7
Joined:  2008-12-06
 

Is there a way to get my cart to use a specific theme (which is more like the default Magento theme) and use a highly customized theme for my front end? I’m having trouble with this silly right-col dependency and I can’t seem to figure out how to get my cart to use <div class="col-right side-col"> while the entire rest of my site uses 2columns-left.phtml for its display.

Also, where do I edit the Ajax to simply tell the system to update a CSS identifier of my choosing rather than relying on “col-right side-col”? Also, if I were to change the Ajax would it be over-written when I do my next upgrade?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
matthewstroh
Jr. Member
 
Total Posts:  7
Joined:  2008-12-06
 

Figured out the answer to my own question...

To get the cart to use the 2columns-right.phtml on my CHECKOUT PAGE ONLY I simply went to app/design/frontend/default/mytheme/layout/checkout.xml and changed this:

<action method="setTemplate"><template>page/2columns-left.phtml</template></action>

to this:

<action method="setTemplate"><template>page/2columns-right.phtml</template></action>

Now, my shopping cart works with the Ajax (that I didn’t want to change) that updates the right-column.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Meanbee
Sr. Member
 
Avatar
Total Posts:  100
Joined:  2007-09-14
Bath, UK
 

The Javascript that controls the checkout is not found in the /js directory but is held in your skin dir as js/opcheckout.js.  I’m confident that you can make changes to that file, especially when it’s only a reference to an element.  I removed $$(’.col-right’)[0] in favour of $(’progress’), a div wrapper around everything in template/checkout/onepage/progress.phtml.  Makes the progress bar portable.

 
Magento Community Magento Community
Magento Community
Magento Community
 
worlob
Jr. Member
 
Total Posts:  7
Joined:  2009-04-27
 
Meanbee - 27 July 2009 01:03 PM

The Javascript that controls the checkout is not found in the /js directory but is held in your skin dir as js/opcheckout.js.  I’m confident that you can make changes to that file, especially when it’s only a reference to an element.  I removed $$(’.col-right’)[0] in favour of $(’progress’), a div wrapper around everything in template/checkout/onepage/progress.phtml.  Makes the progress bar portable.

Hi, thanks for the information.

I had a similar problem with the checkout stalling at the payment section. Your fix worked for me in IE but not FF. Did you have to make any other alterations?

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
agustincl
Jr. Member
 
Total Posts:  3
Joined:  2010-08-06
 

Check if you don’t have any jquery/prototype conflict.

When working with new modules, or themes, soon or late you will find some jquery. And then start the conflict!!!!

Use this to stop conflicts. Just add in the body

<script type="text/javascript">
//<![CDATA[
$.noConflict();
//]]>
</script>
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top