One page checkout

[richthegeek]

Original problem, solution posted in reply #2:

Hi,

I'm doing a site where it'd be lovely to be able to have a 1 page checkout. A static mockup is here: http://richardlyon.co.uk/uploadr/uploads/gg_cart.PNG

I've considered that the easiest way to achieve this would be to create a separate static page which posts (jQuery $.post) each section to the os000001.pl file as it's completed, checking for errors and displaying them as/when they come up.

I was just wondering if anyone has done or considered this before and thus have the following questions:
1. Has this been done before, is there a solution available?
2. Is there any documentation with regards to POST keynames and expected values?
3. Is there any interest (assuming this is the first time this has been done with Actinic) for a commercial release/service of such a system?

On a side note, I'm a CompSci student and Web Developer so there won't be any issues with technical solutions mixing JS and CGI/PHP

Latest version post: http://community.actinic.com/showthr...d=1#post304779

[bentleybloke]

http://www.teclan.net/singlecart/

I like the layout/design of your mockup :-)

It's a shame actinic doesn't have a useable variable so you can show the information in the Description field of the shipping Class Properties dialogue (it would make it easier to do the shipping class descriptions as per your mockup)

[richthegeek]

I've done it!

Solution is a mostly Javascript-based affair, with the official Actinic pages (os000001.pl or w/e) loaded in a hidden IFRAME but basically it goes like this:

1. User fills in a static form, with shipping information pulled in from a PHP file (that in itself parses the shipping info from ActinicShipping.fil)

2. User clicks "Go to payment gateway" button which calls stage1()

3. Stage1() copies address and contact information to "Checkout Page 0" page and clicks the Next> button (.click(), not manual), and waits for a reply.

4. On reply it checks for errors (shouldn't be any because of JS validation) and displays them. If no errors, it loads stage2()

5. stage2() copies shipping selection over, ticks the terms&conds box, and goes to stage 3(), checking for errors in between

6. stage3() just clicks the button basically, and then we are at stage4()

7. stage4() copies the "go to RBSWorldpay" (or whatever) form over to the parent page, and clicks the button, and the user is redirected.

I've attached as much as I can, although it's probably a little difficult for some to put in place themselves, and will be to an extent tied to my own setup. The linked file is designed to all go in /checkout/, on a PHP server.

The PHP to get the shipping options (names, id's, and prices) is only designed to work with flat shipping costs (no weight taken into account) although there is a way to reorder the stages (stage1 occurs after postcode filled, stage2 when button is clicked) and copy the postage options over to the main page. Main issue is with showing the pricing, so if you don't want to do that then it's not a huge issue, you just need to update checkout.php to reflect the dropdown and copy the selected index (eg 1st element) over to the select dropdown.

If you want any help, or wanna pay me to implement it for you, send me a PM.

Published under Creative Commons Attribution-ShareAlike 3.0 Unported Licence by Richard Lyon

[completerookie]

I've dowloaded the zip file to see how, with the aim of implementing it within actinic v8
if it "does what it says on the tin", its a very clever hack to actinic

Nice one Rich

[richthegeek]

Cool - I made it in a fresh install of v10, so if you experience issues with v8 and solve them make sure to post up the modded version!

[Duncan Rounding]

Can we see it in action online?

[richthegeek]

Yes, it's currently online at http://www.gymgirl.co.uk/

Best method is to add this product and checkout from there.

Site is currently in test mode but will be going live in a week or two so times limited folks!

Also, if the updateable sidebar cart is something new, the code is in /acatalog/main.js

[Duncan Rounding]

It seems to just hang after clicking Go Pay??

[Golf Tee Warehouse]

Looks good, the only problem I found is that that once you have clicked onto a field the field title disappears so it is easy to forget what field you were entering.

For example: If you enter an invalid email address and then click on the next field the email field turns red with a warning triangle so you select the email field again but at this point the next field turns red as it is empty and when you return to it after entering a valid email you have no idea what the next field was. It would also be useful if a warning message was shown in addition to the warning triangle.

Is this solution also likely to work with international orders or have you designed it specifically for UK only sales.

[richthegeek]

Indeed - dontcha just love it when that happens.

Seems to be because the IFRAME is set to "display: none", causing the browser to decide it's not worth the effort.

Easiest solution is to set the width/hight of the iframe to 1x1, and possibly to set it's opacity to 0 as well.

[richthegeek]

GolfTee: the field title is an issue with form design as opposed to the one-page script/hack.. but yes, it's a good point and I'll work on storing the values and restoring them if the field is empty.

With regards to international orders, it could easily work with non-UK sales by simply changing the value of the "LocationInvoiceCountry" and "LocationDeliveryCountry" inputs at stage1() (lines 98 + 99 in checkout.js) to grab from a dropdown similar to the other fields.

[richthegeek]

Attached contains:
* fixed index.php with 1x1 IFRAME
* updated checkout.js with frame labels re-showing for GolfTee