Help me develop killer One Page Checkout module

[dynambee]

I may have found a couple of bugs. Testing Chex 0.6.1 on TB 1.1.0 "bleeding edge" with Panda 1.5.0. I have disabled uninstalled my custom shipping modules to make sure they are not the cause of these issues.

• This may be related to the Panda theme, but when I change item quantities on the Chex checkout screen the total cart quantity shown on the shopping basket in the top-right of the screen does not update. Likewise the total cart value displayed next to the shopping basket in the top right corner of the screen does not update.
   
• When I increase the quantities of items in the cart if the weight exceeds the maximum for a given shipping carrier that carrier is removed when I click on "Done". Perfect, this is what is supposed to happen. Unfortunately when I decrease the quantity of items to the point that those other carriers should now be usable they do not reappear. Actually the first time I decrease the quantity (and therefore the total weight) and click on "Done" the carrier options do not appear even if the total cart weight should allow them. However if I change the quantity a second time to a different quantity (either higher or lower) that should allow those carriers then they reappear.

And two (hopefully somewhat minor) feature requests:

• When the cart contents are displayed on the top of the checkout usually the name of each item in the cart can be displayed in full as there is lots of space. However when the cart is shown on the left side or the right side there isn't enough space and item names are often cut off, making it difficult for customers to tell exactly which items are in the shopping cart. 
  As an example, I sell an item called a "Shimano 13 Biomaster SW 8000HG Saltwater Spinning Reel" and a different item called a "Shimano 13 Biomaster SW 8000PG Saltwater Spinning Reel" but in the cart both are shown as "Shimano 13 Biomaster SW 800...". It would be fantastic if hovering over the item name caused a tooltip to appear displaying the full product name. The small cart list in Panda does this and it's great:
  
  
   
• Also as can be seen in the small Panda cart list above, there is a little x to remove the item from the cart. Right now with Chex a customer has to decrease the quantity to 0 and then click "Done" to remove the item from the cart. While I would sooner that customers never take items out of their carts, they are going to do this sometimes and having a little x mark or a mini trashcan icon to make this a bit more intuitive for customers would be a nice touch, IMO.

Edited October 11, 2019 by dynambee
As noted.

[dynambee]

Oops, and I found one more potential bug:

• When the cart is edited and the quantity of items is increased to the point that the currently selected shipping carrier is no longer available (cart is too heavy), the selected shipping carrier is removed when "Done" is clicked. That's exactly what should happen, as described above as well.
  
  The problem is that when the currently selected shipping carrier is removed, no shipping carrier is selected at all. When this happens a message appears in the cart summary (Shipping line) that says, "No carrier available". However there is a carrier (or many carriers) available, it just wasn't automatically selected by the cart when the other carriers were removed.
  
  So I suggest that after a cart update is done if there is no carrier selected that the first carrier in the list of available carriers should be auto-selected by the cart to avoid the "No carrier available" message.

 

Starts with this:

Then when I increase the quantity (and therefore weight) to make Economy Airmail disappear, this happens:

Edited October 11, 2019 by dynambee
Duplicate images.

[datakick]

10 hours ago, dynambee said:

when I change item quantities on the Chex checkout screen the total cart quantity shown on the shopping basket in the top-right of the screen does not update

Yes, I know about this issue. Unfortunately, tb core does not provide very good api to communicate between multiple elements on the page. ajaxCart does have some api to force update, but it's not much sophisticated. To keep things in sync, it requires a lot of overhead ajax calls. But it can be done -- I'll release fix for this in the next version

10 hours ago, dynambee said:

When I increase the quantities of items in the cart if the weight exceeds the maximum for a given shipping carrier that carrier is removed when I click on "Done". Perfect, this is what is supposed to happen. Unfortunately when I decrease the quantity of items to the point that those other carriers should now be usable they do not reappear. Actually the first time I decrease the quantity (and therefore the total weight) and click on "Done" the carrier options do not appear even if the total cart weight should allow them. However if I change the quantity a second time to a different quantity (either higher or lower) that should allow those carriers then they reappear.

I can't reproduce this. This works ok for me. You can have a look at this video (it also shows the remove icon)

 

10 hours ago, dynambee said:

When the cart contents are displayed on the top of the checkout usually the name of each item in the cart can be displayed in full as there is lots of space. However when the cart is shown on the left side or the right side there isn't enough space and item names are often cut off, making it difficult for customers to tell exactly which items are in the shopping cart. 
As an example, I sell an item called a "Shimano 13 Biomaster SW 8000HG Saltwater Spinning Reel" and a different item called a "Shimano 13 Biomaster SW 8000PG Saltwater Spinning Reel" but in the cart both are shown as "Shimano 13 Biomaster SW 800...". It would be fantastic if hovering over the item name caused a tooltip to appear displaying the full product name. The small cart list in Panda does this and it's great:

Thankfully this is easy, as we can use native <div title='title'> attribute. This will be part of the next version

10 hours ago, dynambee said:

• Also as can be seen in the small Panda cart list above, there is a little x to remove the item from the cart. Right now with Chex a customer has to decrease the quantity to 0 and then click "Done" to remove the item from the cart. While I would sooner that customers never take items out of their carts, they are going to do this sometimes and having a little x mark or a mini trashcan icon to make this a bit more intuitive for customers would be a nice touch, IMO.

This is already there - see the video above. It uses 'icon icon-remove' class -- maybe your theme does not have these classes defined

9 hours ago, dynambee said:

So I suggest that after a cart update is done if there is no carrier selected that the first carrier in the list of available carriers should be auto-selected by the cart to avoid the "No carrier available" message.

Good idea. I'll look into it

[dynambee]

Thank you for your reply and for considering my suggestions.

 

13 hours ago, datakick said:

This is already there - see the video above. It uses 'icon icon-remove' class -- maybe your theme does not have these classes defined

I will report this as a bug to @Jonny on the Panda support forums. Using Chrome's Inspect feature I can see that the x should be there, and when I revert to the Niara theme it does appear. I think that as you said it isn't implemented in Panda. Hopefully they will be willing to add support for it.

 

13 hours ago, datakick said:

I can't reproduce this. This works ok for me. You can have a look at this video (it also shows the remove icon)

I reverted to Niara and uninstalled all the Panda-related modules, as well as the custom shipping modules I use. I still have the same problem, and used a screen recorder to try and show what is happening. Excuse the poorly done recording, it's my first time doing this:

 

 

 

It wouldn't surprise me to find it's still something I'm doing wrong, I just can't figure out what it might be. If you would be willing to take a look at my site I'd be more than happy to provide back office access and/or shell access as needed.

[datakick]

Another bugfix release 0.6.2 has just been released:

• Display full product name on hover - useful when product name is truncated
• Keep ajax cart widget in sync with chex
• Fixed incorrect message that was displayed when no carrier was selected
• Auto select first carrier when previously chosen carrier is removed from option list
• Make Coupon not found message translatable
• Include javascript polyfill to support older browsers - on some older browsers the chex module did not run correctly because it uses modern javascript features. With polyfill in place, the module will work on older browsers as well

[haylau]

2 hours ago, datakick said:

Another bugfix release 0.6.2 has just been released:

• Display full product name on hover - useful when product name is truncated
• Keep ajax cart widget in sync with chex
• Fixed incorrect message that was displayed when no carrier was selected
• Auto select first carrier when previously chosen carrier is removed from option list
• Make Coupon not found message translatable
• Include javascript polyfill to support older browsers - on some older browsers the chex module did not run correctly because it uses modern javascript features. With polyfill in place, the module will work on older browsers as well

The download latest version link in the module goes to a page that does not exist: https://www.getdatakick.com/extras/chex-one-page-checkout/?utm_campaign=chex&utm_medium=web&utm_source=support

 

[AndyC]

Module is coming along nicely ...

Can I ask 1 for the people in the UK .. We don't use States , we have "County" Any chance there could be a option to choose either

[haylau]

4 minutes ago, AndyC said:

Can I ask 1 for the people in the UK .. We don't use States , we have "County" Any chance there could be a option to choose either

Is that not jsut a translation? Change "State" to "State / County". Actually we have states switched off for uk and have zones that contain postcodes so we can do the differnet courier costs. Unfortunatley not compatable with Chex 😞

[AndyC]

Yes it is .. Every module I have had including zencart has never had the correct option and you always have to edit text to correct this. Then every update it is yet another thing to remember where it is

[dynambee]

I've been doing some more tests & checks before reporting the checkout issue to Jonny (Panda theme creator).

I'll use "cart dropdown" to mean the cart contents summary that can be viewed by hovering over the basket icon typically located in the top-right corner of the screen.
I'll use "checkout page" to mean the cart contents displayed on the checkout page.

This is what I have found:

• Thirty Bees Niara "cart dropdown": Does not seem to allow deleting items from the cart.
• Thirty Bees Niara "checkout page": Uses a small trashcan to delete cart items, class name is 'icon-trash'
   
• Panda theme v1.5 "cart dropdown": Uses a small x to delete cart items, class name is 'icon-cancel'
• Panda theme v1.5 "checkout page": Uses a small x to delete cart items, class name is 'icon-cancel icon-small'
   
• Chex module with Panda theme v1.5 "cart dropdown": Uses a small x to delete cart items, class name is 'icon-cancel' (seems to be the Panda theme "cart dropdown")
• Chex module with Panda theme v1.5 "checkout page": Uses a small x to delete cart items, class name is 'icon-remove'

I guess the problem now is that I have reached the limit of my knowledge in this area. I have not been able to find if there is an official list of classes that should be supported by each theme, and honestly I don't even have a full understanding of how this is supposed to work. I'm getting quite a crash course in the basics of web development (which is good) but it's frustrating to not be able to debug these issues myself.

However I did use grep on the chex directory and found that icon-remove exists in two javascript files. I edited those files and replaced icon-remove with icon-cancel and after doing this the checkout renders correctly on Panda and the X icon deletes the cart item as expected.

I don't know if both icon-remove and icon-cancel should be supported by Panda (Panda bug) or if Chex should use icon-cancel and not icon-remove. If you can point me in the right direction with this I can report the bug to @Jonny if necessary.

[dynambee]

12 minutes ago, AndyC said:

Yes it is .. Every module I have had including zencart has never had the correct option and you always have to edit text to correct this. Then every update it is yet another thing to remember where it is

The issue is that most of the English speaking world is in the US and the US uses states. If you're in Canada (provinces), UK (counties), Japan (prefectures), etc then things have to be manually changed.

The bigger issue IMO is if you ship globally and want to use different terms for different countries. It'd be great if the label updated automatically depending on the country chosen but generally it's just managed by having "language choices" the user can make. English (UK), English (US), English (Canada), etc and then having the appropriate translations as needed.

[dynambee]

On 10/12/2019 at 5:10 AM, dynambee said:

When I increase the quantities of items in the cart if the weight exceeds the maximum for a given shipping carrier that carrier is removed when I click on "Done". Perfect, this is what is supposed to happen. Unfortunately when I decrease the quantity of items to the point that those other carriers should now be usable they do not reappear. Actually the first time I decrease the quantity (and therefore the total weight) and click on "Done" the carrier options do not appear even if the total cart weight should allow them. However if I change the quantity a second time to a different quantity (either higher or lower) that should allow those carriers then they reappear.

 

On 10/12/2019 at 3:24 PM, datakick said:

I can't reproduce this. This works ok for me. You can have a look at this video 

I have reproduced it as follows:

• I created a brand new test store, fresh install of 1.1.0, ran core updater to 1.1.x Bleeding Edge.

• Installed Chex 0.6.2 trial version. Did not make any changes to Chex or use any custom CSS.

• Standard Niara theme

• No modules added besides Chex. No customization done to TB or Niara.

• Basic settings like enabling SSL and disabling sales taxes.

• Deleted existing zones and created a new zone for United States. Made sure the United States country & states are properly set to the United States Zone. (This emulates the way I set up my other store.)

• Created three carriers. First two (Economy and Registered) are for up to 2000g. Third (Express) is for up to 8000g

• Created test item with weight of 767g (same weight as my item had in the previous store).

• 1 item or 2 items in the cart should allow all three carriers but 3 items or more should allow only the Express Mail carrier.

Once I had things set up I ran the same sort of test as I did before, and here are the results (may need to select 1080p for clear video):

 

 

 

I will PM you the site access details so you can have a look and try things out yourself. You're more than welcome to make any changes to the site and generally use it for testing purposes, it is not a site that I have any need for beyond testing this particular problem, and I have a backup of it anyway.

 

[datakick]

17 hours ago, dynambee said:

I guess the problem now is that I have reached the limit of my knowledge in this area. I have not been able to find if there is an official list of classes that should be supported by each theme, and honestly I don't even have a full understanding of how this is supposed to work. I'm getting quite a crash course in the basics of web development (which is good) but it's frustrating to not be able to debug these issues myself.

However I did use grep on the chex directory and found that icon-remove exists in two javascript files. I edited those files and replaced icon-remove with icon-cancel and after doing this the checkout renders correctly on Panda and the X icon deletes the cart item as expected.

I don't know if both icon-remove and icon-cancel should be supported by Panda (Panda bug) or if Chex should use icon-cancel and not icon-remove. If you can point me in the right direction with this I can report the bug to @Jonny if necessary.

I don't know either. I'm afraid this is the generic issue caused by prestashop / thirtybees not enforcing any public api for themes.

Anyway, I'll probably get rid of this font-awesome based icon, and replace it with svg icon that will be part of chex distribution. This way, I can be sure it will work on every theme. And if anyone want to use font-awesome icons, they still can achive it using css.

Meanwhile, I suggest you to declare .icon-remove class in the same way Panda theme declares .icon-cancel. 

 

[datakick]

7 hours ago, dynambee said:

I will PM you the site access details so you can have a look and try things out yourself. You're more than welcome to make any changes to the site and generally use it for testing purposes, it is not a site that I have any need for beyond testing this particular problem, and I have a backup of it anyway.

Thanks. I was able to reproduce and fix will be part of the next release

[x97wehner]

@datakick In the cart summary tile, if you can add an option to hide the "Total (Tax excl.)" line, it would be appreciated. Not really needed in the US and just adds clutter. If you can at least give it a dedicated class, I can hide it with CSS.

Thanks.

[datakick]

14 minutes ago, x97wehner said:

If you can at least give it a dedicated class, I can hide it with CSS.

Will do

[dynambee]

7 hours ago, datakick said:

Anyway, I'll probably get rid of this font-awesome based icon, and replace it with svg icon that will be part of chex distribution. This way, I can be sure it will work on every theme. And if anyone want to use font-awesome icons, they still can achive it using css.

That would be fantastic! One less thing to worry about.

 

7 hours ago, datakick said:

Meanwhile, I suggest you to declare .icon-remove class in the same way Panda theme declares .icon-cancel. 

I'll report it as a bug to Jonny. I looked into it with the Niara theme and it only supports icon-remove and not icon-cancel so it would seem that themes designed for use with TB should also support icon-remove, even if icon-cancel is also declared. Hopefully Jonny will add it to Panda for TB.

[x97wehner]

@datakick Think I found a bug. When new customer creates an order, they do not select the opt in or newsletter boxes. After order is processed, in back office, both opt-in and newsletter boxes are checked. Tested while creating account and using guest checkout.

[dynambee]

I've installed the just-released 0.6.3 and it seems to be operating as expected. So far I have not discovered any additional issues. @x97wehner, one of the bug fixes is what you reported, and the CSS IDs are there for the totals too. 

Huge thanks to @datakick for such an impressive checkout module!

 

Bug fixes:

Quote

• • Fixed bug with displaying incorrect carrier list in some corner cases
  • Added HTML IDs for elements in cart (tax, total, discounts,...) in order to easily target them by CSS rules
  • Fixed saving Newsletter / Opt In preferences
•  

 

Edited October 15, 2019 by dynambee

[dynambee]

A few minor issues (don't hate me!)

• The icon used in the back office (yellow and white star) does not match the purple icon used on the datakick webshop.
   
• If there are too many items in the cart for the size of the user's computer screen it becomes difficult to see what is in the cart if the cart is displayed on the left or right side of the checkout.
  
  The floating cart ends up covering the store footer and even then there isn't enough space if 8 or 9 items are in the cart on a 1080p display. A scroll bar appears on the side of the cart but it doesn't work very well.
  
  Maybe people who expect large purchases should just put the cart at the top of the checkout? Perhaps a setting could be added so if the number of different items in the cart exceeds a certain number the cart moves to the top?
   
• Is it possible to make the cart not float? Even if there are not very many items in the cart if the user scrolls down past the end of the checkout and into the footer the floating cart comes along and looks very odd.
   

Here is what the floating cart & scrolling issues looks like on my website:

[haylau]

I know this module does not work for us, because of the way we use zones within countries, but I purchased anyway to try to help develop

I am noticing that the shipping options are not always updated. I think it may be related to the module waiting until a state has been selected? whether there is a state or not. but also if the first state is the state required then it still does not update

See attached gif - hope it makes sense. Also would it make sense that if anyone enters anything in their address at anytime that changes the zone, or carrier options then the module automaticlly scrolls back to the shipping selection? Currently if I add a new address in a different country the module does not change current shipping costs

Edited October 16, 2019 by haylau

[Kleijn36]

Just installed "SendCloud" module and found a problem in the carriers selection, we use this module to give the customer Pick up point delivery. When you select the carrier "pick up" in the original 5 and 1 step checkout a new button pops up to select your pick up point. In the Chex checkout the carrier selection closed an there is no option to select a pick up point.

[Pedalman]

And now since I know that Petr has an adress in L.A. 😊 while doing tests I can tell you that our orders for Sep. and Oct. increased three times while the numer of open carts decreased by two times in comparission to last year.

I am confident that this is mainly due to Petr's CHEX module.

Thank you to all who tested and for Datakick's constant development of his modules.

[wakabayashi]

@Pedalman thats a huge improvement  It shows how critical checkout is. Every merchant should care about it and this module is the easiest way to do it...

[datakick]

3 hours ago, Pedalman said:

And now since I know that Petr has an adress in L.A. 😊 while doing tests I can tell you that our orders for Sep. and Oct. increased three times while the numer of open carts decreased by two times in comparission to last year.

I am confident that this is mainly due to Petr's CHEX module.

Thank you to all who tested and for Datakick's constant development of his modules.

That's awesome, I'm happy the module works for you.