Help me develop killer One Page Checkout module

[nickon]

Hey @datakick

Funny that you posted this module as I am looking for a opc checkout module for a client of mine:-) What I like: The sticky product summary. The fact that you don't have seperate login and new account option What I don't like: The "next" button after choosing shipping. It should not be neccesary The fact that you put the shipping first may be a bit confusing for many. What I would do: In the backoffice have option to put the summary left or right and putting the shipping on top or second Have the option to disable customer registration and use only guest checkout Have the opiton to complete the order without email (in that case use an demo email in the backoffice.

[MockoB]

Beautiful, like all your work @datakick I agree with @nickon about the repositioning of the blocks. I like it, but some may decide to follow the regular flow. You should check also that presteamshop's module, there are very good ideas in their module.

[dosbiner]

@datakick wow great design, clean and simple as always. the reverse flow that's interesting, I like this approach. Customer can get quick summary plus shipping price before they input full personal details. same as nickon I'm looking for OPC module, I need solid, fast, and simple OPC. will buy this module if works great. one question, is this module use default method to display shippings and payments? I'm having problem with other OPC module because they overrides default method. (I hope you understand what I mean)

=== edit === I think would be good to open new thread for this module :slightlysmilingface:

[spidawebs]

@datakick Love it. I think having the shipping options first is brilliant.

[datakick]

Hi guys,

I'm creating my very own paid OPC module. It's still work in progress, there is at least one week of work left.

However, significant part of the module is already done, and I'd really like to hear your opinions. Both on checkout flow / design / etc.

What's different in this OPC: - I tried to reverse the flow a bit -- I want to give the customer the option to choose shipping and payment option first, before the personal information. - I've incorporated login into the flow directly -- if you enter the email that already exists, you'll be prompted for password and log in immediately. If email does not exists yet, you'll continue with guest checkout

So, if you have a minute, please have a look at demo account and try it out. Just remember - it's still work in progress -- you can't actually complete the order, and checkout for logged-in customer doesn't work at all.

Download

You can download this module here. Remember that it's still an alpha version

Screenshot

[datakick]

Thanks everyone

I know that having shipping and payment options first is strange, but I really think this is what customers actually want.

When customer visits checkout page, he wants to know the final price as soon as possible. I think they find it very annoying if shop forces them to fill in their personal information before they see the final price. In my opinion, this is the primary reason behind abandoned carts.

When we move shipping to the top, this will be fixed. Customers will immediately see what are the options. Any question or doubts he might have will be answered immediately.

It would be very easy to swap the blocks, and I'll probably add a switch for this to the settings.

This module will not support all shipping and payment options.

Any shipping module that adds some additional fields to checkout form will not be supported out of the box. I'll be adding support for the on per-module basis. Right now, I'd love to know how many such modules are you using, and what additional data they collect, so I could prepare the framework for data entry.

For payment modules - only modules that supports Advanced EU OPC checkout (hook displayPaymentEU) will be supported. I think that's most of them, but I'm not sure. If you have any payment module that does not implement this hook, please let me know.

I'll be away for one week, so I apologise in advance for late replies :)

[Baarssen]

its nice to see your work. I am interested. Also wish you a good time/holiday

[DaoKakao]

Brilliant! The shipping and payment method in the very begin of module is great idea: it increases a customer's involvement and reduces time for doubts.

[CoffeeGuy]

When can I install it? :)

[Beeta]

"Next" (and "Back"?) need to become a more specific phrase like: "Deliver to this address", or "Pay with this payment method" so the customer with the "click/tap" confirm what want to do and is taken to the next step.

[30knees]

Beautiful and elegant as always!

Some comments:

1. I pressed 'enter' after entering my email address so the other personal data fields appeared. I think this could be non-intuitive for some users. Is there a way to change this?
2. Can we support the VAT field? @mdekker has a VAT module for B2B.
3. The 'secure payment' button doesn't lead anywhere for me / doesn't work in Opera, latest version.

[nickon]

One thing I notest is that if you complete the first section and push next. It's not clear how to get back to the first section

[W.Kara]

Not sure how it should work but at the moment if a customer have an account with an address set in a country but choose another country in the "Shipping to" field it looks like he would be billed the wrong amount.

You should also be able to choose the invoice address and choose between your account's multiple addresses I guess.

Looking very good, keep up the very good work.

[nickon]

@datakick I understand what you are trying to do but I think things can get complicated the way you propose. Eg the shipping cost may depend on multiple values eg postcode + country. As I said before the customer should put as less of data at the checkout and use his thinking brain as less a possible. For calculation cost it is much prefert to use a solution like https://addons.prestashop.com/en/shipping-costs/24457-estimate-shipping-cost.html instead of the checkout.

[dosbiner]

@datakick said in Help me develop killer One Page Checkout module:

This module will not support all shipping an Any shipping module that adds some additional fields to checkout form will not be supported out of the box. I'll be adding support for the on per-module basis. Right now, I'd love to know how many such modules are you using, and what additional data they collect, so I could prepare the framework for data entry.

We can start from here. I'm using module for carriers and shipping price. This module have an API to provide carriers and shipping price using 3 level parameters: country > district > subdistrict. I've tried knowband superheckout OPC and integrate it to my module but always ending buggy OPC. I find hard to integrate my module even my module developer. So here is it my experience with OPC module.

[datakick]

Thanks everyone for your feedback. I'm back from my vacation, and ready to finish this.

@foolab

"Next" (and "Back"?) need to become a more specific phrase like: "Deliver to this address", or "Pay with this payment method" so the customer with the "click/tap" confirm what want to do and is taken to the next step.

It's definitely good idea, and I'll add some more engaging text there. But in the end, everyone have an option to translate these strings to whatever they want

@30knees

1. I pressed 'enter' after entering my email address so the other personal data fields appeared. I think this could be non-intuitive for some users. Is there a way to change this?

I could display some please wait text when user press enter, is that's what you ask?

1. Can we support the VAT field? @mdekker has a VAT module for B2B.

Sure, I'll add support for this. But it will be probably hidden by default and you'll need to enable it in settings

1. The 'secure payment' button doesn't lead anywhere for me / doesn't work in Opera, latest version.

Nope, that's just my work in progress :)

@nickon

One thing I notest is that if you complete the first section and push next. It's not clear how to get back to the first section

Sure, I'll add some edit button to the collapsed section, so it's more clear how to do it

I understand what you are trying to do but I think things can get complicated the way you propose. Eg the shipping cost may depend on multiple values eg postcode + country. As I said before the customer should put as less of data at the checkout and use his thinking brain as less a possible.

Well, this module is not going to support all possible scenarios. Your example wouldn't be supported for sure. I want to keep it simple, even if that means that some merchants won't be able to use it.

@w-kara

Not sure how it should work but at the moment if a customer have an account with an address set in a country but choose another country in the "Shipping to" field it looks like he would be billed the wrong amount. You should also be able to choose the invoice address and choose between your account's multiple addresses I guess.

That's gonna be covered. If a customer has an account, only addresses from the shipping to country will be displayed for selection

@dosbiner

I'm using module for carriers and shipping price. This module have an API to provide carriers and shipping price using 3 level parameters: country > district > subdistrict. I've tried knowband superheckout OPC and integrate it to my module but always ending buggy OPC. I find hard to integrate my module even my module developer. So here is it my experience with OPC module.

Thanks for the info. Can you tell me what module is this? But I think this is one of those modules that won't be compatible with my module as well.

[30knees]

@datakick said in Help me develop killer One Page Checkout module:

@30knees

1. I pressed 'enter' after entering my email address so the other personal data fields appeared. I think this could be non-intuitive for some users. Is there a way to change this?

I could display some please wait text when user press enter, is that's what you ask?

I meant more that I would not have thought one needs to press enter. Normally, when I fill in fields, I use tab to jump from field to field and then at the very end I expect a submit button. Because of that, I'd expect here either a submit button or that the email address is automatically captured without the need to press enter. What do you think?

[datakick]

@30knees said in Help me develop killer One Page Checkout module:

or that the email address is automatically captured without the need to press enter.

This is what's already happening. You don't really need to press enter, once you enter valid email address the form will expand itself. The only problem I can see is the delay (my server is quite slow), which can cause confusion.

[Tomik]

what about autocomplete adres

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

[nickon]

@datakick keep in mind the the opc should stay simple. Your approach is quite unique and I don;t realy know how ppl are going to recieve it. For me (and some clients of mine are are three problems with the 1.6 checkout 1. that I must save the address to show the rest of the page. 2. that I must select a carrier to view payments 3. that AFTER I have done the above I have to go to a second page to confirm my order

So If I had the skills I would fix those issues instead of going to something different. I haven't seen the final product yet. but please include an option to have the "standard" wasy as well

[datakick]

@nickon I'm afraid that these problems can't be really fixed because of the dependency graph. To reliably calculate final price, we need to know complete delivery (or billing) address and customer group.

Because build-in checkout flow must support all use cases, we are stuck with current situation for a very long time. That's one of the reason I'm building this new module. It can't be used in all scenarios. For example, if you have different prices for guests and for logged-in customers, my approach is not ideal (although you can still use it). Or if your delivery costs is different for every city / postcode.

But many merchants have quite simple pricing schema when prices don't really change, and this module is targeted to these merchants.

[datakick]

I've just uploaded a new version of module to my demo account. Beside guest checkout, it can now handle checkout flow for logged in customer, or authenticate customer during checkout. Logged in customer can select existing shipping / billing address, create new address, etc...

You can test it here. And as always, I'd love to hear your thoughts

[Briljander]

You should check it in mobiles. The layout is messed up when using mobile. I think its that overlay that follows when scrolling that destroys the layout.

[datakick]

@briljander sure, mobile version will come next, once I finish the desktop version

[MockoB]

You should add option to register account once personal information is entered, just need to expand fields for password. Some fields check (I can enter letters in phone number and post code) but I suppose it's on the to do list. Acceptance of privacy policy (optional) and terms and conditions. Merchant to decide which fields to be mandatory, to be able to reorder the fields. That's it for now :)