Checkout Progress Indicator

[Bruce]

Remmo,

I will add in a vote for you.

Kind regards,

[george]

Yep, me too. *waves hand from back of class*



Also taking colours from the colour scheme in operation would be a nice enhancement. (Not just the chosen text colour perhaps, more like a thermometer filling up style?).

[completerookie]

Here's a CSS styled progress indicator to add to any of your checkout pages.

You need to add a bit of CSS to one of your style sheets

.progress25 {
	border: 1px solid black;
	margin-left:10px;
	background-color:green;
	padding-right:50px;
	height:10px;
	}
.progress50 {
	border: 1px solid black;
	margin-left:10px;
	background-color:green;
	padding-right:100px;
	height:10px;
	}
.progress75 {
	border: 1px solid black;
	margin-left:10px;
	background-color:green;
	padding-right:150px;
	height:10px;
	}
.progress100 {
	border: 1px solid black;
	margin-left:10px;
	background-color:green;
	padding-right:200px;
	height:10px;
	}
.to-go25 {
	border: 1px solid black;
	background-color:red;
	padding-right:50px;
	height:10px;
	}
.to-go50 {
	border: 1px solid black;
	background-color:red;
	padding-right:100px;
	height:10px;
	}
.to-go75 {
	border: 1px solid black;
	background-color:red;
	padding-right:150px;
	height:10px;
	}

on the Checkout Page 0 - inner layout you need the following code

Checkout Progress <span class="progress25">&nbsp;</span><span class="to-go75">&nbsp;</span>

on the Checkout Page 1 - inner layout you need the following code

Checkout Progress <span class="progress50">&nbsp;</span><span class="to-go50">&nbsp;</span>

on the Checkout Page 2 - inner layout you need the following code

Checkout Progress <span class="progress75">&nbsp;</span><span class="to-go25">&nbsp;</span>

on the Checkout Page 3 - inner layout you need the following code

Checkout Progress <span class="progress100">&nbsp;</span>

one last thing,
make sure that you place the code within the individual pages in EXACTLY the same place, there's no point in making the customers hunt over the page to find the progress bar

I've attached an image showing you the sort of thing you get on your page

[cdicken]

Thanks so much - this is awesome. This is definitely the style of thing we could look at adding into the default Actinic layouts.

[completerookie]

just a thought, it would be easy to replace the   with the page numbers so you could end up with

Checkout Progress <span class="progress25">1</span><span class="to-go75">4</span>

this would give the users the feedback that it was 1 of 4 pages etc - you would need to change the CSS to centralize the text and get the right contrasting colours, but nothing too difficult.

perhaps its one for the AUG and someone could do the v7 equivilents

[los_design]

Smart work Kevin, another shining example of excellent cross user performance.

Well played sir.

Many thanks
Daren

[george]

and someone could do the v7 equivilents

*nods in agreement*

[fergusw]

Great thread, and I add teclan's vote to get a standard layout introduced into production releases of Actinic.

To try and help that on its way, and to give a little back to the community, I've thrown together a quick example of this and created a layout selector and layout which will display a checkout progress indicator.

You can see the example here:
http://www.teclan.com/examples/checkoutprogress/

I have also uploaded a partial snapshot design of this so that V8 users can download this and use it/adjust it themselves. [limited time only - I'll see how much interest there is in it]

You can download the partial snapshot design here:
teclan Checkout Progress indicator partial snapshot

[Note: This has not been extensively tested. Only tried in V8.5.0]
To implement this simply:

1. Make a snapshot backup of your current site
2. Import the partial design snapshot "File | Snapshots | Import Site"
3. In "Settings | Site Options" make sure that the "teclanCheckoutprogress3" layout is selected within the Layout Tab. The prompt will be at the bottom of the tab labelled "teclan Checkout indicator"

You will now need to amend any overall layouts you use for displaying all basket/checkout pages. For Actinic's default site I simply:

4. Add the new layout selector immediately before the INNERLAYOUT layout. This will ensure that it appears above all the checkout information (this will depend on your design layouts i.e. how customised they are)

<div align="center"><actinic:variable name="teclan Checkout Progress indicator" /></div>
<actinic:variable name="INNERLAYOUT" />
{screenshot of how this looks}


I added the <div> tags purely to quickly center it.

You will need to make sure and add this to overall layout used for i)checkout ii)basket and iii)Receipt page


The idea here is that is then becomes simple to create a myriad of standard layouts which can easily be switched on/off as required within Actinic.

All feedback most welcome as I am sure in my haste I missed a few obvious pointers.

NOTE: This is not a fully tested or supported solution. Just an example and hopefully a help to a few people to show what can be achieved.

[Bruce]

Thanks Fergus, this thread is getting better as the day progresses

Kind regards,

[RuralWeb]

All feedback most welcome

Works a treat - well done Fergus

[dscontroller]

All feedback most welcome

Absolutely sterling job, Fergus. Tried it out and seems to work very well.
Thanks very much.

David

[RuralWeb]

Yes excellent work - Ive got it live on a site at www.the-old-smokehouse.co.uk to check it out.

[fergusw]

Thanks for the feedback guys. Much appreciated.
I'll leave the partial snapshot online for others to download along with the example site as well.

I'd like to know, Actinic, if the development team at Actinic are going to look at implementing something like this into V8/9 to make it available and optional for all Actinic stores?

[RuralWeb]

I'd like to know, Actinic, if the development team at Actinic are going to look at implementing something like this into V8/9 to make it available and optional for all Actinic stores

It would be very easy to do and IMO makes a big difference to checkout.

[RuralWeb]

Added to 2 more sites http://www.allfusedglass.co.uk/ and http://www.sandersondixon.co.uk/ which are under construction. All is working well and people say they like it.