2132: Redesign purchasing module to show steps clearly - Composr CMS feature tracker

ID	Project	Category	View Status	Date Submitted	Last Update

2132	Composr	ecommerce	public	2016-01-10 02:30	2017-01-23 01:19

Reporter	Chris Graham	Assigned To	Chris Graham
Priority	normal	Severity	feature
Status	resolved	Resolution	fixed

Summary	2132: Redesign purchasing module to show steps clearly
Description	There is a design pattern where you show your position in a set of steps, something like: >Info>Agreement>Setup>Payment>Confirmation Adopt this design style for the purchasing module so it is much clearer. I've uploaded a/b/c/d.png which correspond to the first 4 steps above. They'd all have the same step-bar on top, but it of course highlights which of the steps is active. I suggest we redesign one of the screens, then we can apply the styling across the rest. The title of the purchasing module can just be "Make purchase", with support for overriding on a product-by-product basis.
Additional Information	Implementation: We'll need to tidy up the "next step calculation code" into an enumeration of all steps for the particular hook, so we know what the full chain will be. The product hooks would specify the purchasing module title overrides. d.png shows a PayPal button. This is a silly step really, we should be able to allow product hooks to redirect straight to PayPal (auto-click the button).
Tags	No tags attached.
Attach Tags	(Separate by ",")
Attached Files	a.png (296,330 bytes) b.png (103,235 bytes) b.png (103,235 bytes) d.png (75,689 bytes) d.png (75,689 bytes) c.png (106,879 bytes) c.png (106,879 bytes) agreement.png (223,856 bytes) agreement.png (223,856 bytes) completed.png (199,597 bytes) completed.png (199,597 bytes) info.png (199,356 bytes) info.png (199,356 bytes) payment.png (207,439 bytes) payment.png (207,439 bytes) setup.png (198,622 bytes) setup.png (198,622 bytes)

Time estimation (hours)	6
Sponsorship open

Date Added	Member	Amount Sponsored

Chris Graham 2016-02-21 00:41 administrator ~3346	New designs attached (agreement.png-setup.png). Only thing I don't like is that I think there's too much spacing between the step design elements, but that can be resolved at implementation time. Removed the design tag, this is now just a dev task.

Adam Edington 2017-01-19 03:39 administrator ~4692	This looks great.

Chris Graham 2017-01-23 01:19 administrator ~4696 Last edited: 2017-01-23 01:20	This is like 50% done We haven't used the step-enumeration style. But we have used breadcrumbs, and we show you're on step 1 of whatever. Also the step styling has been matched up so it is similar in some ways. The reasons to not do it exactly the same as designed: 1) We're merging with pointstore, so the design constraints are different. It's a bit more of a 'browse' metaphor, no longer a 'wizard' metaphor. 2) We want to keep it in line with normal Composr design, and usually we do show paths using breadcrumbs only, and say step numbers within titles. The design here varies too much from our conventional styling, making a headache for themers. What we have now is a lot better than what we have in v10.

Date Modified	Username	Field	Change
2017-01-14 13:12	Chris Graham	Relationship added	related to 2040
2017-01-19 01:17	Chris Graham	Summary	Redesign purchase wizard to show steps clearly => Redesign purchasing module to show steps clearly
2017-01-19 01:17	Chris Graham	Description Updated
2017-01-19 01:17	Chris Graham	Additional Information Updated
2017-01-19 03:39	Adam Edington	Note Added: 0004692
2017-01-23 01:19	Chris Graham	Note Added: 0004696
2017-01-23 01:19	Chris Graham	Status	Not Assigned => Resolved
2017-01-23 01:19	Chris Graham	Resolution	open => fixed
2017-01-23 01:19	Chris Graham	Assigned To	=> Chris Graham
2017-01-23 01:20	Chris Graham	Note Edited: 0004696