rszrama mentioned on the commerce 1.x sprint that the UI for this was less than stellar. A co-worker and I came up with a concept for cleaning it up.
#1 Drop the prov/state and just use postal/zip code as it gives you enough info for shipping normally, or at least make this an option. Maybe we could allow 1 or the other or both? I know for real time shipping only the postal code is important, and for calculated often only the state/prov is important.
OR
#2 We could always switch to a 1 line google style address field that can take any input, would still be clean UI wise and provide lots of detail. Would probably require google api dependency.
Drop the submit button and make it some key-up/focus kind of trigger, cleans up space and doesn't get confused with checkout, add to cart, etc. buttons that might exist on the page.
Attached is a mockup of a horizontal and vertical idea.
Lemme know some feedback and I can get on to the coding!
Comment | File | Size | Author |
---|---|---|---|
(Commerce Kickstart) Shipping Calculator - 1.0 - ap.jpg | 532.9 KB | smccabe | |
#15 | cart_estimate_preview.png | 61.14 KB | TimRutherford |
#19 | interdiff-2593091-15-19.patch | 9.36 KB | TimRutherford |
#19 | commerce_cart_estimate-ui_changes-2593091-19.patch | 24.06 KB | TimRutherford |
Comments
Comment #2
smccabe CreditAttribution: smccabe as a volunteer and at Acro Commerce commentedComment #3
smccabe CreditAttribution: smccabe as a volunteer and at Acro Commerce commentedComment #4
smccabe CreditAttribution: smccabe as a volunteer and at Acro Commerce commentedComment #5
joelpittetComment #6
joelpittetOption #1 sounds great, google maps dependency would be nice but not needed.
+1 to postal code lookup.
Comment #7
smccabe CreditAttribution: smccabe as a volunteer and at Acro Commerce commentedSounds good, going to get on the dev then.
Comment #8
Hubbs CreditAttribution: Hubbs commentedCompleted:
- Included hook_theme()
- Inlcuded preprocess elements
- Created base tpl.php file for form
- Updatd form style based on design mockup
NOTE: 'State / Province' and 'Estimate shipping' button still to be removed. See below images for more.
Items still to complete:
- Remove 'State/Province' dropdown option and 'Estimate shipping' button.
- Add 'Location Here' functionality (auto selected based on user browser or postal code information) (Location Here is placeholder only until functionality exists).
- Shipping options always displayed based on available information.
- Add radio selectors for shipping options.
- Add shipping total functionality to display selected shipping option price ($XX.XX is placeholder only until functionality exists).
- Complete styling to match design mockup (see note about styling below)
Not currently possible (based on current module and design mockup):
- Can't insert block between cart items and order total. Can only place it below or above.
- Can't style 'Shipping Option' output (eg. Express shipping and price). Each option is its own field and outputs as a string, therefor can't target individual parts.
Comment #9
Hubbs CreditAttribution: Hubbs commentedEDIT: Ignore this comment... accidentally made a duplicate.
Comment #10
Hubbs CreditAttribution: Hubbs commentedFixed patch. New files weren't showing up when applying the last patch. This one is good.
Comment #11
mglamanGoing to kick back to Needs Review for Hubbs #10!
Comment #12
Hubbs CreditAttribution: Hubbs commentedFYI mglaman, TimRutherford has been doing some work on this and I expect a new patch will be posted from him tomorrow sometime.
Comment #13
TimRutherford CreditAttribution: TimRutherford commentedI updated Hubbs patch and to add the above changes to the UI but in doing so I had to change a fair amount of the code/code layout.
I moved away from the block structure that was being used (If this is an issue let me know and Ill change it back) to just altering the cart form. This allowed me to stick the elements nicely after the line items but before the order total. With this change I moved the admin configuration to admin/commerce/config/commerce_cart_estimate (also linked from the module page). It also makes for an easier installation as the user just have to download/enable the module and set up the configuration options (no more moving blocks around).
With the removal of the state/province selection I introduced a new dependency 'Postal Code Validation'. The module takes a postal/zip code and returns country and province/state info. The form now updates whenever the user clicks off the postal code box or when the select a shipment option.
Currently the total order price does not update based on the shipment total. I tried updating it via ajax and css selectors but that turned out to be too buggy/hacky. The callback function that does this still exists in the patch but isnt used atm.
Finally, with all the structure changes (no more template file from previous patch) and css class/id changes the css will have to be changed accordingly to get it to look nice again. amberbam said she would update the patch again to include the css changes.
Comment #14
amberbam CreditAttribution: amberbam commentedI changed the IDs and classes in the CSS files to match up with the changes that @TimRutherford made to the HTML.
One issue I see is when you put your postal code in, I think the natural next step is to click Enter on your keyboard since there is no submit button or anything like that. When you press enter, you actually remove your cart contents. What you actually need to do is click outside of the postal code input for your location and the shipping options to appear, which isn't very intuitive. The best solution would be if it auto-updated the location and options as you type in your postal code, if possible.
Comment #15
TimRutherford CreditAttribution: TimRutherford commentedUpdated the patch using @amberbam's suggestions. The enter/submit functionality for the postal code textfield now only updates the Cart Estimate and does not submit the cart form. I also changed some of the CSS to better match the given style.
Comment #16
rszrama CreditAttribution: rszrama at Centarro commentedHey guys, thanks a lot for all the work in this issue! Just tested it out in a local install of Kickstart 1.x (as most users of Commerce aren't using the Kickstart 2.x theme) and it comes out like this:
I like the direction this has gone, but there are a few points I'd like to consider for further development here:
Any feedback on these observations? The tricky part here is that UI improvements are intermixed with functionality changes. These can be hard to separate, but we can always split the issue up to address individual items as we're able.
Comment #17
smccabe CreditAttribution: smccabe as a volunteer and at Acro Commerce commented#4 - good point, having the radio buttons makes it seem like you're picking an option, when it is purely informational, I agree with removing them and going back to an unordered list. Tim will have to chime in on #1-3
Comment #18
TimRutherford CreditAttribution: TimRutherford commented@rszrama
Comment #19
TimRutherford CreditAttribution: TimRutherford commentedI updated my previous patch to account for #4 on our list. There are no more radio buttons or total estimates displayed. I also updated the CSS accordingly.
Still not sure on what our final decision is for #1-3, so ill wait on that.
Comment #20
liamanderson CreditAttribution: liamanderson at Acro Commerce commentedReviewed and tested changes in Kickstart 2 and Kickstart 1. I can confirm everything at this point works as expected.
Comment #21
mengi CreditAttribution: mengi commentedAs a frequent online shopper, updating the carts 'order total' to include the shipping estimate is the better interface. Especially if the tax estimate feature is ever implemented and if a coupon/discount feature is ever included. It would be easier on customers to simply see the total after all the estimated line items are added/subtracted.
Comment #22
thejacer87 CreditAttribution: thejacer87 at Acro Commerce commentedpatch works for me. looks good. But we might want to split this issue into a few different issues as Tim's patch had too many functionality changes methinks
Comment #23
andjules CreditAttribution: andjules commentedThis is great patch in many ways - which, as @rszrama and @thejacer87 point out, is kinda the problem: multiple features blurred together.
As per his list:
2) I'm also unsure about the move away from the block approach (or as per @mengi's comment, if the estimate is going to be under the line items and above the total, it should affect the total and probably remain an option list which pre-selects for the customer). My preference would be to have the estimate stay away from the line items and pre-shipping total. This would also open up a clearer path to prepending or appending the estimate with another block for any other messaging we need to show the user before they proceed to check out (with this patch, if I want to append or prepend the estimate block, I've got to hack the module, play with javascript or do a complex hook_form_alter module).
3) I disagree with the removal of an actionable 'estimate' button. Some users will be stumped, not realizing they have to do something after they type their last key in the postal code field. A button gives the user a clear action. From a programming point-of-view, (one option) it doesn't need to be a 'real' form, the button can simply be an element that triggers the javascript.
For my use case, I'm not sure I like the move away from the block or losing the actionable button, but I love that we've lost the administrative-area select and provide the user with a starting estimate.