Help me develop killer One Page Checkout module

[nickon]

@datakick "enter shipping details" button should not exist. Use as little buttons as possible. Selecting a field should automatically open the next

[nickon]

@datakick One of the main problems you want to solve is the shipping cost right? What about this idea: Instead of reinventing the whole ipc why not add a button on the cart summary block with text "Calculate shipping" From the backoffice a merchant could assing the string that determens the cost (country,zip etc) On the frontoffice when a customer clicks on that button it will expand and he will add the field and it will show him the cost. Meanwhile the strings are automatically added to the address fields on the other block.

[Briljander]

@datakick Didn't mean to stress you ? I am almost always using this forum from my mobile so I have only seen the mobile version.

I do think Swedish checkouts like Klarna is really a good model to follow.

[datakick]

@nickon although I agree that there should be as few buttons as possible, 'Enter shipping details' must be there. You can select multiple options in the first section, so it doesn't make sense to automatically switch to next step when you choose payment or shipping option.

In fact, I consider this section the most important one. This is where all the customers's questions should be answered:

• how much does it cost
• how can I pay
• can I use my favourite carrier?

This is the whole point of this reverse flow. I'm trying to provide answers to these questions as soon as possible, without any unnecessary hustle. Once customer click on 'Enter shipping details', he should be decided to make purchase. He knows all the facts. He just need to fill in his shipping and billing info. There shouldn't be any surprise later in the checkout flow, therefore any churn. In theory :)

[Tomik]

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

what about autocomplete adres

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

Is this possible?

[nickon]

@datakick From my expiriance not all cusotmers want that. I don't disagree with you it just I think most customers expect personal data first and then shipping. I suggested the calculate button under the summary for those who want to know but for the rest it must not be confusing. Best case senario for is to have the normal checkout as an option in the BO

[datakick]

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

what about autocomplete adres

I'll think about it

[datakick]

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

@datakick From my expiriance not all cusotmers want that. I don't disagree with you it just I think most customers expect personal data first and then shipping. I suggested the calculate button under the summary for those who want to know but for the rest it must not be confusing. Best case senario for is to have the normal checkout as an option in the BO

Out of curiosity - what do you find confusing in the first step?

[nickon]

@datakick I have shown it to a couple of customers (told them to do a purchase (the "products" where a bit"strange" :-) ) and the first question was where do I put the email. I haven't seen any shop implementing something like this and I don't know how it will work on real shops. Eg what if I have shipping cost based on zip? Do I ask the zip from the customer without address ? What if it is based on city + state ? Why would I want the customer (that is not asking for shipping cost ) to put half of his address. And even if you fist put the shipping section first why not automatically open the personal information tab when I select deivery? Also all opc I have found have the summary box on the other side. this opc module does to many things to diffenent for us to consider buying. But this is just us.

[datakick]

thanks @nickon, I really appreciate it. And I understand your point of view. Here's my thoughts on that

1) email - I agree it's very non-standard that email is in second step. However, is this a show-stopper? I don't think so, nobody's going to leave checkout process just because there isn't email field. But many people will leave if they are required to sign in / sign up before you show them final price. I would -- when shop requires me to enter my personal info before I know the final price, I'm out of there. Simply go back to Google Shopping and click on next shop in the queue. 2) shipping cost based on zip, city, etc... - I have written it before - this module will not be the best fit for merchants that use wild cost structure. I understand that for some businesses it's necessary (ie. shipping pianos is different beast than shipping cellphones). In my experience, most merchants are actually trying to avoid wild shipping costs - the more simple/transparent shipping cost table is, the more conversions. 3) summary box position - this is trivial, it's just theme / css thing that can be styled as needed. And of course, there will be some settings for this in back-office.

[spidawebs]

@datakick I've just checked out your latest demo. Looks great, but I really think when people enter their address you need the zip code first and then use an automatic address lookup to complete the address. People make so many mistakes when typing their address manually and it also takes a lot longer which leads to higher abandonment.

If you could allow compatibility/option to use an address lookup system I think it would improve it tremendously.

I personally use https://craftyclicks.co.uk at the moment.

[Pedalman]

My holyday is ending soon I have never anticipated coming home with the exitement I am experiencing now due to the outview that there will be this nice checkout module by Datakick in a few days to implement in our shop! I was looking for alternative checkout routes for years and I never dared to buy a mostly very expensive one since I found them never 80% perfect in my eyes. And moreover I never had trust in the developers who offered them. I have 100% in the coding and support capabilities of Datakick and in the views how the developer thinks about UX and conversion rate capabilities of ecommerce sites. I am so happy that all this happens for our system.

[datakick]

Thanks @Pedalman for the support, really appreciate it. The first version of the module will be released early next week. I'm not going to offer it to the general public yet, as it will be an alpha version, and I expect some bugs and issues. So I'll be looking for couple of volunteers that would test the module. Maybe you'd like to participate?

[Pedalman]

Sure. Thank you for the possibility to help. Let's get in contact next week. I will write you via email. I wish you a nice weekend.

[led24ee]

I can try also.

[datakick]

If anyone would like to test this module, you can download the trial version here. Please keep in mind that this is still an alpha version, and that there will be some bugs and errors.

The module has sandbox feature - this will allow you to show this new checkout page only to visitors from whitelisted IP addresses. This is great for testing - you'll see the new checkout, yet your customers will continue to use your old checkout page.

The module is still not 100% completed, I will continue to work on features like:

• address autocomplete
• more customization options (order of sections, order of entry fields, ability to set fields as required/optional, etc...)
• support external modules checkboxes (blockcustomerprivacy's privacy policy, revws consent with sending email requests,...)
• custom entry fields -- you'll be able to capture more information about your customers during their registration (ie. twitter account)
• support for VAT exemption module

If you don't want to test the module on your site, you can test it on my demo account.

I'm awaiting your feedback

[nickon]

Hi, @datakick tried to use the online demo . When selecting other country (Greece I can not proceed) with czech I can Like the option in the backend to move the summary box. I still find it all confusing. In the fist box You have a title "Select Carrier" But you ask for country. In shipping optionsI would prefer to have no carrier selected by default and when selected to move to the next step removing the "Select payment method" If in the backend I have default (or only one carrier) skip the shipping option asnd move to next step. In personal data I have no option to use guest checkout. In backoffice I should be able to select which fields should be enabled (address2) or checkboxes. Also having the option to expand all would be nice.

[datakick]

@nickon - when selecting other country (Greece I can not proceed) -- That's because Greece is not allowed country in the shop. Nothing to do with the module, you would't be able to ship to Greece with standard checkout as well - You have a title “Select Carrier” but you ask for country -- that's because carriers are usually associated with countries. If I want to ship to Greece, I can't use PDP, which is czech-only service. Obviously, this might not make sense if you ship only to one country, or all your carriers can be used in all countries. - In shipping options I would prefer to have no carrier selected by default and when selected to move to the next step -- If no carrier is selected by default, then the cart summary would not show you the total price right away - your customers wouldn't see the final price immediately, but they would have to click first. That's just not good UX. Pre-selecting the best / default carrier is much better, in my opinion. BTW, automatic transition to the next step is already implemented - Removing the “Select payment method” -- how would you like to select payment method, then? - If in the backend I have default (or only one carrier) skip the shipping option and move to next step - this could be settings option. But I don't really like it -- I think even if there's only one option, customer should go through the step, and actually choose it. So he knows how will the goods be shipped. - In personal data I have no option to use guest checkout -- you have, simply do not enter password. The field actually says (optional). If you disable guest checkouts in the back office, then the field will be required. - In backoffice I should be able to select which fields should be enabled (address2) or checkboxes -- this is in backlog

[30knees]

I tested it with your demo account and have only one comment:

When I select a different carrier than the default one I am taken right away to the payment selector. That's really nice.

However, if I keep the default one I have to click "Select payment method" to be taken to the next stage. It's the same for the payment selector. Would it be possible to not have anything preselected so that the customer must make a selection and is then taken automatically to the next stage of the checkout? Otherwise the customer has to click eg "Select payment method" to be taken to the next stage. I'm not sure that's so intuitive, but I'd like to hear from others here in the forum what they think.

Apart from that, it's super nice!

[datakick]

@30knees that's the same request @nickon have. As I wrote - it would have impact on cart summary not being accurate. But maybe that's ok, I don't know. I guess it doesn't hurt to have settings option for this, so every merchant can decide / test what works best.

[vincentdenkspel]

@datakick I tried to install it but got the following error:

The following module(s) could not be installed properly: chex : Unable to install override: The method setMedia in the class OrderOpcController is already overridden by the module myparcel version 1.1.5 at 2016-05-10 16:51:47 . .

[dosbiner]

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

@datakick I tried to install it but got the following error:

The following module(s) could not be installed properly: chex : Unable to install override: The method setMedia in the class OrderOpcController is already overridden by the module myparcel version 1.1.5 at 2016-05-10 16:51:47 . .

You already have override with same method in override/class/OrderOpcController.php, to solve this you have to manually add the override to this file

[MockoB]

When I tested the demo on my iPad, I can't select the payment method. It could be a bug or related to the above mentioned by others, I don't know. Here is screenshot of my iPad:

[datakick]

@vincentdenkspel - I've just released a new version that does not depend on overrides. Please download new version and try again

@MockoB - this is actually not related to iPad, the same behaviour is on desktop as well. The reason is that there isn't any payment method defined for Hungary, so the checkout can't proceed. It's still a bug - there should be some placeholder text displayed. Hopefully in real world this situation will not happen very often

[vincentdenkspel]

@datakick thank, installation went fine. first observations: 1) i've disabled guest checkout, but with your module people are still can checkout as guest. 2) Once i've selected guest checkout, i can't 'go back' and login into my account

Suggestion: Add 'forgot password' at the 'personal details' section.