Multipage Checkout

Contrib type: 
Module
Status: 
Work in progress
Moderation: 
Failed code review

Downloads

Compatibility: 
Ubercart 1.x

Here's my initial shot at a multipage cart module (actually it's my second, but my first was a complete custom rewrite, doesn't use the panes system and is quite separate from ubercart).

Basically what I've done is used the form_alter hook to render the checkout form, but depending on the page you are on, only a subset of the panes are visible.
This way, all Javascript used in the panes still works, and hopefully the majority of panes won't even realise that they're in a multipage checkout.

The checkout is constructed by specifying pages which have panes on them. I've sort of started doing an admin interface for this, using drag and drop. But I figured it's more important to have the multipage checkout actual be complete-able, rather than having a shiney backend.

The main problem I have had is that the current checkout form only allowed the referrers 'cart' and 'cart/checkout/review' (a few lines into uc_cart_checkout_form() )
This was a problem, as the multipage checkout has urls like 'cart/checkout/billing_details' etc, and I didn't really want to have the current page determined by session or post variables or anything.
So I've included a patch that basically defines a hook that allows other modules to extend the set of valid referrers for the checkout. I'm not really familiar with the contribution process for ubercart (or any OpenSource projects, I've previously been a bit of a lurker Smiling ), so if someone could review it and let me know how I can submit it for inclusion that'd be great.

This module is by no means complete, but I thought I'd just get it out there for review and comments.

In particular I'd like comments on the need for the patch, as well as ways of making sure that the 'cart_order' session variable is persisted throughout the checkout process, as many panes have a freakin' annoying habit of messing with it in their processing function.

Cheers,
Toby

** UPDATE **

v.1 was broken I believe.

v.2 works for me, in that I can get through a checkout successfully. I've started work on a version of the quotes and payment panes that work with this multipage approach, because the default ubercart ones are so heavily reliant on JS that they don't really work in the multipage way.
The old JS from the checkout page is doing a bunch of request in the background too. They need to be weeded out somehow.

v.3 Implemented the current page via session rather than URL, so patch is no longer necessary. Seems to work well. Problems with Paypal doing queries in the background. I anticipate that a few of those payment modules will need to be dealt with, as they seem to be doing so much crazy JS stuff.

v.4 Works fine for me now, needs testing though. Created nice AJAX GUI for messing around with pages and panes at: admin/store/settings/checkout/edit/pages

Related threads: 

PreviewAttachmentSize
uc_multipage_checkout_v.1.zip15.11 KB
uc_multipage_checkout_v.2.zip18.47 KB
uc_multipage_checkout_v.3.zip17.46 KB
uc_multipage_checkout_v.4.zip20.55 KB
uc_multipage_checkout_v.5.zip20.71 KB
zmove's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.Internationalizationizer
Joined: 08/13/2007
Juice: 1193
Hi, Awesome works,

Hi,

Awesome works, congratulation. I'was not sure about the possibilites to do that without tweaking core... very nice.

half_brick's picture
Offline
Joined: 02/04/2008
Juice: 82
Re: Multipage Checkout

I'd say this is almost feature complete (the main things work). I'll be doing testing from now on.
If anyone wants to test that'd be great.
The latest version has a drag and drop interface for changing page and pane order (try it out, it's shiney Smiling )

ad4m's picture
Offline
Joined: 07/14/2008
Juice: 2
Module dependancies

Hello!

I was about to try your module, but I've found that it dependes on free_order module. I can not find anywhere the module called free_order... The only one I've found thath matches is uc_free_order, is this the one you meant?

Additionaly I'm getting some javascript error while trying to use your module. Some sugestions on how I can got it works?

Regards,
Adam

mortendk's picture
Offline
Internationalizationizer
Joined: 04/07/2008
Juice: 32
Re: Module dependancies

the module is locatede here http://www.ubercart.org/forum/announcements/4091/new_module_0_orders
and you have to go in and rename the dependency to "uc_free_order"

/morten.dk

half_brick's picture
Offline
Joined: 02/04/2008
Juice: 82
Re: Re: Module dependancies

Yep, mortendk's got it. That'll be fixed in the next release. I'm just integrating this module into a production site at the moment, once that goes live and is tested I'll take this module out of alpha/beta.
But for now, what can I say "shrug" Smiling "shrug" It's a work in progress.

mortendk's picture
Offline
Internationalizationizer
Joined: 04/07/2008
Juice: 32
detecting stage?

To give the user an idea of where hes at in the checkout process i modified the THEME_uc_cart_checkout_form() and used
$form['#submit']['uc_multipage_checkout_checkout_page_submit']['0']
Is that the "correct" way to detect a stage - or is there somewhere a $var that I havent seen?

<?php
THEME_uc_cart_checkout_form
(){
 
//1
 
if($form['#submit']['uc_multipage_checkout_checkout_page_submit']['0']=="billing_details"){}
 
//2
 
if($form['#submit']['uc_multipage_checkout_checkout_page_submit']['0']=="shipping"){}
 
//3
 
if($form['#submit']['uc_multipage_checkout_checkout_page_submit']['0']=="payment_details"){
 
//4 checks the previous
 
if($form['#submit']['uc_multipage_checkout_checkout_page_submit']['1']=="shipping"){}
?>

- it would be cool with some kind of generic $form[#stage] though Eye-wink

/morten.dk

primo411's picture
Offline
Joined: 07/22/2008
Juice: 23
Error...

Hi! I'm trying to use to use this module, first thanks a lot ! I needed that feature. But I can't have it working fine... I always get "Invalid option selected. Recalculate shipping quotes to continue." and then "You must select a shipping option before continuing."
When I try to use the special panes provided by the module ("Shipping Method" and "Payment Method"), the shipping method is well calculated, by the radio button is disabled !

I'm confused and do not see where the issue comes from...

I'm running ubercart 1.3 on Drupal 5.9.

half_brick's picture
Offline
Joined: 02/04/2008
Juice: 82
Re: detecting stage?

You could actually just query the session variable "multipage_cart_page" or similar, I can't remember off the top of my head and don't have the source in front of me.
You could also grab the variable that holds the cart pages and get the actual cart title from there (again, I can't remember it off the top of my head)

half_brick's picture
Offline
Joined: 02/04/2008
Juice: 82
Re: Error...

Hi primo, I think I may have fixed that problem recently, I'll do an upload tomorrow when I get to work.
I probably wouldn't be using this on production (unless you can debug it yourself) until I've used on our next production site and uploaded a non beta version.

Cheers,
Toby

primo411's picture
Offline
Joined: 07/22/2008
Juice: 23
Thanks !

Thanks a lot, that corrected the bug ! I will still make a few changes and submit it here:
- In the Shipping pane, when there is only one option, it still appears as an unchecked radio button. I will transform it into a simple display.
- In the Payment method pane, I see the fieldsets for each payment method uncollapsed by default. I will try to make it look the most like the default übercart pane.
Thanks again Smiling

primo411's picture
Offline
Joined: 07/22/2008
Juice: 23
Re: Thanks !

Well, I don't understand how to make each payment method fieldset collapsed by default without breaking the whole thing...

fALk's picture
Offline
Joined: 06/07/2008
Juice: 26
Re: Multipage Checkout

Thanks a lot - works great so far on a test site... can check out multiple times no problem.

The only problem I encountered is that if when I forgot to set the Zone on the shipping adress - then after getting an error correcting it and then trying to go to the next page I got an error - after a page reload it worked again. Only happened once and I can´t reproduce it.. Again Thanks a lot... I do think Multipage Checkouts are much more user friendly (speaking for myself here)...

fALk's picture
Offline
Joined: 06/07/2008
Juice: 26
Re: Multipage Checkout

A small comment on the admin page for this module. As for usability its not that good that you can have the panes for rearanging pages and the panes next to each other as this might not flow in some layouts - it wouldn´t be a problem but the functionality breaks if you take away the floats in the css.

I would suggest either to put the panes section after the pages section. Another - and usibility wise better solution would be to put a small button next to the pages that says "edit panes".

At the moment if I want to drag a page before the other the panes edit pops open and I can´t drag stuff around anymore. Otherwise I like the jquery integration - seems very well done.

BTW I have narrowed the error I mentioned yesterday. If you leave any field open in the shipping adress (I have only shipping adress no billing adress defined to make it less confusing to the customers) that is required it goes - rightly so - back to the page and asks you to fill in the missing information - thats alright. But then if you fill in the missing information and want to continue you get the following error:

"An illegal choice has been detected. Please contact the site administrator."

clicking on "next" again gets you to the next page and everything works as expected. Couldn´t figure out yet why it throws you the error.

fALk's picture
Offline
Joined: 06/07/2008
Juice: 26
Re: Detecting Stage

"You could actually just query the session variable "multipage_cart_page" or similar, I can't remember off the top of my head and don't have the source in front of me."

The session variables are as follows:

[multipage_current_page]
[multipage_farthest_page]

I have not found out how to "grab the variables" directly - any hint?

fALk's picture
Offline
Joined: 06/07/2008
Juice: 26
Renaming Pages/Buttons

i have a small feature request. I would really like to rename pages - or at least the buttons for the pages as the current "Next: Payment Details" is way to long for a button (for my taste). So where you reorder the pages a double click and rename them would be great Eye-wink

fALk's picture
Offline
Joined: 06/07/2008
Juice: 26
Re: Renaming Pages/Buttons

Dumb me - you can of course delete the pages and create new ones with names you like and then the buttons reflect the new names. Works quite well - so I was not able to save the page order afterward and had to create the new buttons in the right order.
I liked that when you delete all pages you get the default pages back in Smiling

Oh and if you do that the session variables change to the new names too so you might need to adjust the sessvar code if you are detecting stages.

chico's picture
Offline
Joined: 10/07/2008
Juice: 10
hi. nice project! need help.

hi. nice project!
need help. how can i make these custom checkout pages:
1) selecting shipping method
2) selecting payment method, delivery address (fields must be dependent on selected shipping method), etc.

thank you for writing these! hope someone can help me Smiling

Daman's picture
Offline
Joined: 10/08/2008
Juice: 82
Guide?

Any instructions for install and setup? =)

Dan

SuperDuperDan

jpdaut's picture
Offline
Joined: 02/25/2009
Juice: 70
multipage checkout for Ubercart 2.x / Drupal 6

Hi

This is a great module but how about UC 2.x /Drupal 6? Will you and /or Ubercart be continuing this project?

deruitern's picture
Offline
Joined: 10/12/2010
Juice: 3
Multipage Checkout Payment Bug

I cant seem to submit any credit cards with Javascript enabled while using this module. The credit card data does not show up in the POST data and it keeps telling me that no credit card number or CVV number was entered. There is some jQuery in uc_payment, line 134 of uc_payment.js

$('#payment_details').empty().append(details);

that is the problem. I was able to resolve this issue by changing line 75 of uc_multipage_checkout_payment.module, by changing the following line from:

'#value' => '<div>' . $payment_details . '</div>',

to

'#value' => '<div id="payment_details">' . $payment_details . '</div>',

and adding an id for the payment details pane. I can submit a patch, but not sure where to post it. Thank you for contributing this module.