View Issue Details

IDProjectCategoryView StatusLast Update
0002132Composrecommercepublic2017-01-23 01:19
ReporterChris GrahamAssigned ToChris Graham 
SeverityFeature-request 
Status resolvedResolutionfixed 
Product Version 
Fixed in Version 
Summary0002132: Redesign purchasing module to show steps clearly
DescriptionThere 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 InformationImplementation:

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).
TagsNo tags attached.
Time estimation (hours)6
Sponsorship open

Relationships

related to 0002040 closedChris Graham Remove unnecessary extra stop from purchase wizard 

Activities

Chris Graham

2016-01-19 05:23

administrator  

a.png (296,330 bytes)

Chris Graham

2016-01-19 05:23

administrator  

b.png (103,235 bytes)
b.png (103,235 bytes)

Chris Graham

2016-01-19 05:24

administrator  

d.png (75,689 bytes)
d.png (75,689 bytes)
c.png (106,879 bytes)
c.png (106,879 bytes)

Chris Graham

2016-02-21 00:36

administrator  

agreement.png (223,856 bytes)
agreement.png (223,856 bytes)

Chris Graham

2016-02-21 00:37

administrator  

completed.png (199,597 bytes)
completed.png (199,597 bytes)

Chris Graham

2016-02-21 00:37

administrator  

info.png (199,356 bytes)
info.png (199,356 bytes)

Chris Graham

2016-02-21 00:37

administrator  

payment.png (207,439 bytes)
payment.png (207,439 bytes)

Chris Graham

2016-02-21 00:37

administrator  

setup.png (198,622 bytes)
setup.png (198,622 bytes)

Chris Graham

2016-02-21 00:41

administrator   ~0003346

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   ~0004692

This looks great.

Chris Graham

2017-01-23 01:19

administrator   ~0004696

Last edited: 2017-01-23 01:20

View 2 revisions

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.

Issue History

Date Modified Username Field Change
2017-01-14 13:12 Chris Graham Relationship added related to 0002040
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 View Revisions
2017-01-19 01:17 Chris Graham Additional Information Updated View Revisions
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 non-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 View Revisions