Help me develop killer One Page Checkout module

[dynambee]

11 hours ago, datakick said:

This is not governed by chex module. I can refer you to this article about mobile zoom 

I stumbled across an example that better illustrates what I was suggesting for mobile list selection, at least on iOS (I don't have a modern Android phone to test with, unfortunately).

When clicking on the country list in Chex it presents a desktop-style drop-down list, like this:

 

 

However the default (again on iOS) for list selection is this, as shown from the "products per page" selector:

 

I don't know how difficult a change this is but it would definitely make the checkout experience on mobile to be a more mobile-like experience.

 

[dynambee]

I've been looking at the state selection issue and guest checkout process in a bit more detail, and I think there is a problem here.

The way Chex is set up currently, only countries that have states defined in the TB system (in the tb_state table, to be specific) have the option to select a state, and the state is supposed to be chosen to get a shipping estimate.

There are two issues with this, IMO:

1. As I wrote about previously, there are going to be quite a few situations where the state is not necessary to get a shipping estimate. This is true for most people who ship internationally, and it would be true even for domestic shippers who offer flat rating shipping. It would be nice to allow the shop owner to decide if the State field appears together with the Country field at the start of the checkout process.
    
2. On the flip side, if the customer is going through Guest Checkout and manually entering their address, there is no State field in the address area. There are many countries that have states, provinces, or similar that do not have listings in the TB database. Malaysia is one. South Korea is another (though it is not always used that way). In Switzerland a canton is sometimes used in addresses, but not always. Basically the State field should always be shown in the Guest address creation area. For countries that have states defined it should be a drop-down list, and for countries that do not have states defined it should be an optional text entry field. This is the same way TB treats address creation for Guest Checkout, and the same way users with accounts create addresses.

I'd also add that for some users it will be confusing to not have a Country option when they are creating a Guest Checkout address. As shop owners and developers we understand what is going on intuitively but to a shopper who is perhaps not all that technically oriented they are going to expect to see a Country field when creating their shipping address. Ideally the Country field (and the State field in case of a drop-down) should default to whatever they chose earlier in the checkout process but from a UI / UX perspective they should both be shown, in my opinion.

[datakick]

8 hours ago, dynambee said:

As I wrote about previously, there are going to be quite a few situations where the state is not necessary to get a shipping estimate. This is true for most people who ship internationally, and it would be true even for domestic shippers who offer flat rating shipping. It would be nice to allow the shop owner to decide if the State field appears together with the Country field at the start of the checkout process.

This is quite complicated area. Basically, the ideal solution would be to request only those information that actually participate on shipping costs. In standard thirtybees, this is country+state. But some of my clients have custom modules that modifies this -- for example, one of them has different shipping rates per postcode. And as you noticed, you can configure your thirtybees as you wish - some merchants might have flat rate for the whole country, and some even offer flat rate worldwide. In these case we don't really need to ask for shipping country / state at all...

My module can't decide this automatically. So, the ultimate solution will be to allow merchants decide which info are necessary to be entered upfront in order to calculate shipping. I have this in my backlog. But due to the complexity of this task don't expect it anytime soon

8 hours ago, dynambee said:

for some users it will be confusing to not have a Country option when they are creating a Guest Checkout address. 

Again, this is already in my backlog. It's not particularly hard to implement, I just need to figure out a proper way to do this. My initial plan for this module was to show the final price as soon as possible (in the first step of the checkout), and this price would not change in subsequent form filling. But this ability to enter country/state will change that. But it's probably not a big deal -- if the country/state will be prepopulated, most customers will not change it.

[dynambee]

Thanks for taking the time to reply and explain. Very much appreciated. I really like the module and I really want to use it on multiple sites. (Bought for one, will buy for more.)

 

51 minutes ago, datakick said:

Again, this is already in my backlog. It's not particularly hard to implement, I just need to figure out a proper way to do this. My initial plan for this module was to show the final price as soon as possible (in the first step of the checkout), and this price would not change in subsequent form filling. But this ability to enter country/state will change that.

I think a State field needs to be shown if it isn't already in the "shipping and payment" section as a drop-down list. There are countries where states exist but TB doesn't have data for them, and that's fine, as long as the user can type in their shipping address completely.

If something (country and/or state) has been shown & set in the "shipping and payment" section then the selected choices could be shown as a non-editable field in the address creation area. A small note below that could say that these are set in the "shipping & payment" section and that the customer must change them in "shipping & payment" if they want to ship to a different country and/or state. This would avoid customer confusion without also having to write code to update the country and/or state from multiple areas.

I keep testing the module and coming up with more ideas to suggest but I think a good number of my ideas may have been suggested before. Is there a list of ideas in the queue that can be reviewed so we don't keep suggesting the same things to you? With 8 pages in this thread now it's hard to keep up with everything already here.

That said, I have a few more suggestions (which someone has probably already suggested, but I'll throw them out there anyway...)

• If no user is logged in there should be a "login now" option directly on the checkout screen, same as in the standard TB checkout.
   
• When users are logged in the default in the address section(s) should be the list of saved addresses with an option to create a new one. For quite a while I actually thought that Chex didn't offer the ability to select a saved address because the link to swap from "create new address" to "select existing address" is quite faint and my eyes skipped right over it. I suspect most repeat customers will use a saved address so offering that to them as the first choice seems like it would save people a step & some potential for confusion. The "create new address" option could be within the same sort of address card currently displayed for saved shipping addresses.
   
• If a user is logged in and the country they chose for shipping calculation doesn't match the country of any saved address, there should be an error displayed about this in the address section(s). Right now there is just no option to choose a saved address, only an option to create a new address. Combine this with no state & country being shown in the address section and a customer could end up creating an address with the wrong state and/or country selected.

 

[AndyC]

Please can I ask a general  question ... I've got the full module installed TB 1.1.0 Chex 0.5.0 

If I log in with my facebook account (that has my address registered under account) if I then checkout I am asked to fill out my address again ... If I do this on my Knowband website it doesn't ask me to fill out my address again..

Although if I make a account (via log in) it seems to work fine

[dynambee]

Could you open the "Shipping and billing address" section and post another screenshot? You can blank out your address details, but since that's where the situation is happening it would be good to see that part of the screen.

[AndyC]

Do you mean at checkout ..It's just blank ..Hop you can see it as I had to make it quite small to fit into 1 screenshot

 

[dynambee]

1 minute ago, AndyC said:

Do you mean at checkout ..It's just blank ..

I've been doing a LOT of testing with Chex recently as I really want to use it on my upcoming sites.

Looking at your screenshot it looks like you have selected "East Sussex" as the destination country? Have you redefined countries to be something besides countries to make Chex work better for your situation?

My testing experience has been that if the saved address' country does not match the country you have selected in Chex's drop-down list to get a shipping price then the saved address will not be presented as a shipping option.

So my best guess would be that the saved address has United Kingdom (or some other country) set as the country but the drop-down list of countries has East Sussex selected.

Is that correct?

[AndyC]

Oh bugger .. I see your point .. I am East Sussex with facebook .. I had West Sussex as my county .. So they didn't match .. Now that I have corrected on my account it is fine at checkout ...oops me at fault again

[dynambee]

I love Chex, it is very similar to what I would have developed myself if I had the ability to make a one page checkout myself (which I don't, although I am a programmer.)

However I don't think this is really your fault. The module should give an error in the "shipping & billing address" section when there are saved addresses available but they don't match the country selected for shipping. Something like, "Selected shipping destination does not match any currently saved addresses." This sort of mismatch is certainly possible to happen and customers may not notice what is going on. Personally during my testing I didn't notice what was going on, and during your testing you didn't notice what was going on. It was only by chance that I figured it out, and only yesterday!

During the address creation process there is no place to select State or Country, and no display of which State or Country has been chosen. If a customer has been trying different destinations out of curiosity to see what different shipping costs would be (and this is totally something I would do myself...) they could end up leaving it on the wrong country and then creating a shipping address to the wrong country.

Chex works differently to most other checkout modules, and that is what makes it so awesome. On the flip side though it also means that it works differently to what customers are used to using, and because of that it needs to be extra clear about what is going on to avoid mistakes & confusion. That's my opinion, anyway.

[AndyC]

I too actually like Chex , sadly I bought Knowband checkout first as Datakick had only just started developing it..

But yes it does need a error message then if even just a line in red if something is amiss.. But thanks for managing to point me in the right direction..

I've only just upgraded tonight... Am loving the way you can change details and add new items

Edited October 10, 2019 by AndyC

[datakick]

@AndyC / @dynambee 

Here's a (pre-release) version that should somehow fix this address selection / creation issues. Could you please test and let me know if it works for you:

chex-0_5_1.zip

I must say I'm not 100% happy about the possibility to change delivery country/state in the address section(s). It can impact shipping cost, and even available payment options. And that can surprise customers -- they will need to go back to step 1 to ensure everything is still OK. It can disrupt the unidirectional flow I'm trying to achieve by this module. But, hopefully, not many customers will change country/state here

 

 

 

[datakick]

I have just officially released new version 0.6.0:

New functionality

• Added option to choose shipping address even from not selected country
• We can now create new address in different county / state than currently selected one
• New settings option to select product image type
• New Leave a message entry field in confirmation section allows your customers to leave a message associated with order
• New settings option to choose whether country selector should display all countries, or active only
• Entry fields now have html IDs so you can more easily target them in your CSS rules

Bugfixes

• Fixed problem with displaying wrong total when cart rule with free shipping was applied

[x97wehner]

4 hours ago, datakick said:

@AndyC / @dynambee 

Here's a (pre-release) version that should somehow fix this address selection / creation issues. Could you please test and let me know if it works for you:

chex-0_5_1.zip 546.44 kB · 2 downloads

I must say I'm not 100% happy about the possibility to change delivery country/state in the address section(s). It can impact shipping cost, and even available payment options. And that can surprise customers -- they will need to go back to step 1 to ensure everything is still OK. It can disrupt the unidirectional flow I'm trying to achieve by this module. But, hopefully, not many customers will change country/state here

 

 

 

@datakick Just tested this. feedback follows:

1) In shipping address section, the country should be displayed, but it should be read only and not changeable. Should only be changeable from top "choose shipping and billing method." In the billing section, when selected different from shipping address, the country field should be changeable in case sending to another country.

2) The address format/arrangement of fields doesn't follow the TB country setting for it and should. In the example above, I assume the system would be set to display the address for the US as City, State, Country, Zip/Postal code.

2) No fix for the tax calculation issue yet? It's still adding tax to my products in the cart summary card, when it should only be shown on the tax line, be as I noted previously.

[datakick]

12 minutes ago, x97wehner said:

@datakick Just tested this. feedback follows:

1) In shipping address section, the country should be displayed, but it should be read only and not changeable. Should only be changeable from top "choose shipping and billing method." In the billing section, when selected different from shipping address, the country field should be changeable in case sending to another country.

I both agree and disagree 🙂 . I will probably add some settings for individual merchants to decide

12 minutes ago, x97wehner said:

2) The address format/arrangement of fields doesn't follow the TB country setting for it and should. In the example above, I assume the system would be set to display the address for the US as City, State, Country, Zip/Postal code.

Thirtybees only have printable format, and that's not the same as entry form format. I don't think it's a good idea to have different form layouts for different countries. It would be very confusing. Moreover, there can be custom fields that needs to be displayed in entry form.

My idea, and end goal, is entry form layout designer in the back office. This way, everyone can design the layout they want to use.  

12 minutes ago, x97wehner said:

2) No fix for the tax calculation issue yet? It's still adding tax to my products in the cart summary card, when it should only be shown on the tax line, be as I noted previously.

No

[x97wehner]

5 minutes ago, datakick said:

I both agree and disagree 🙂 . I will probably add some settings for individual merchants to decide

Thirtybees only have printable format, and that's not the same as entry form format. I don't think it's a good idea to have different form layouts for different countries. It would be very confusing. Moreover, there can be custom fields that needs to be displayed in entry form.

My idea, and end goal, is entry form layout designer in the back office. This way, everyone can design the layout they want to use.  

No

thank you for the quick followup @datakick

Regarding the address format, the new account forms all render according to printable format, I'm fairly certain. If printable format is adjusted, then the order of fields is adjusted on the form as seen below. This is what I was referencing for same functionality.

Honestly, that is a minor issue. More UX that probably wouldnt' keep them from buying. The fact that tax is being displayed added to the product in the cart is much larger as it's not standard in the U.S. and it's keeping me from using this module despite purchasing already. Wish I had checked in more detail ahead.

[datakick]

1 hour ago, x97wehner said:

Regarding the address format, the new account forms all render according to printable format, I'm fairly certain. If printable format is adjusted, then the order of fields is adjusted on the form as seen below. This is what I was referencing for same functionality. Honestly, that is a minor issue. More UX that probably wouldnt' keep them from buying.

It's not -- the format is hardcoded in smarty template. 

1 hour ago, x97wehner said:

The fact that tax is being displayed added to the product in the cart is much larger as it's not standard in the U.S. and it's keeping me from using this module despite purchasing already. Wish I had checked in more detail ahead.

I managed to reproduce the display tax problem, and hopefully fixed it. Please download new version 0.6.1 and let me know if it works for you

[x97wehner]

36 minutes ago, datakick said:

It's not -- the format is hardcoded in smarty template. 

I managed to reproduce the display tax problem, and hopefully fixed it. Please download new version 0.6.1 and let me know if it works for you

Looks to be working. Thanks!

Look forward to the other updates around carrier arrangement and field arrangement.

[dynambee]

3 hours ago, datakick said:

I have just officially released new version 0.6.0:

New functionality

• Added option to choose shipping address even from not selected country
• We can now create new address in different county / state than currently selected one
• New settings option to select product image type
• New Leave a message entry field in confirmation section allows your customers to leave a message associated with order
• New settings option to choose whether country selector should display all countries, or active only
• Entry fields now have html IDs so you can more easily target them in your CSS rules

Bugfixes

• Fixed problem with displaying wrong total when cart rule with free shipping was applied

This is fantastic! I will keep testing the module as my site development progresses. So far it looks great!

Earlier in the week I sent via PM my custom shipping carrier module that causes the country/shipping selection lag. Looking at the new version of Chex the same issue exists. Any idea about what I can do to work around this?

Thank you so much for the new version!

[datakick]

22 minutes ago, dynambee said:

Any idea about what I can do to work around this?

edit override file, and change signature of Cart::getDeliveryOptionList method from current

public function getDeliveryOptionList()
{
    $carriers = parent::getDeliveryOptionList();   

to

public function getDeliveryOptionList(Country $defaultCountry = null, $flush = false)
{
    $carriers = parent::getDeliveryOptionList($defaultCountry, $flush);

The signature (and parent::getDeliveryOptionList) must match the signature in CartCore class

[dynambee]

28 minutes ago, datakick said:

edit override file, and change signature of Cart::getDeliveryOptionList method from current

THANK YOU SO MUCH! That worked perfectly and now when selecting countries the correct carriers pop up, with only the ones allowed for the current cart value showing. This is awesome, I can't tell you how happy I am right now!

[dynambee]

Oh, and thank you for all the html IDs as well, that let me easily do this with a little CSS:

[AndyC]

Been experimenting a bit with the module.. Am I imagining it or has the name changed from Chex...

Anyway my question on the state drop down list I have my normal live ones that people can click on but also have the list of disabled States in the drop down list but greyed out ( I can't screen shot as list disappears every time I try ) .. In countries list in TB they are all disabled with a red X.. Apart from deleting them from the country list in TB is there a way to remove the greyed out drop down list

[x97wehner]

I noticed the mobile/small screen display had some issues with longer text. Here is a little bit of CSS you may want to use if you're experiencing the same issues. (Please don't judge my coding ability, it works. ;-))

@media screen and (max-width: 445px) {
	.chex-option .chex-check { flex-direction: unset; }
	.chex-shipping-option .chex-check { float: right; width: inherit; }
	.chex-shipping-option.chex-option { display: flow-root; }
	.chex-shipping-option .chex-option-logo { margin-bottom: 3px; }
	.chex-option-delay { float: left; }
	.chex-option-price { float: right; }
	#basic .chex-section-collapsed-content , #shipping .chex-section-collapsed-content{ padding: 15px 20px; }
    #layer_cart .button-container .btn { width: -webkit-fill-available; text-align: center;}
}
@media screen and (max-width: 350px) {
	.chex-cart-item-quantity-price { display: block; }
}

 

[haylau]

I am SOOOOO jealous that you guys have got this work. I can't get it to work on our store because of the way our shipping is based on zones (postcodes).

@datakick is an absolute star and an outstanding coder - but more - his visual presentation is second to non

Do you know what. I am going to buy this module anyway. I will leave it in test mode so that I can see and follow progress and help supoprt this brilliant developer