Checkout Progress indicator

[fgs]

Is it possible to manipulate the Checkout Progress indicator bar to create something like this?...

http://www.groovecommerce.com/blog-e...-progress-bar/

I've seen these on quite a few online shopping sites and think it looks a bit more pro than the existing one in Actinic.

[leehack]

You can add anything you like dependent on your own skillset more than anything. HTML, CSS and Actinic knowledge (particularly blockifs) is required. I think Fergus also provides a free progress bar for people who are not sure what to do, which is much better than the standard one - not a lot isn't in reality.

[Golf Tee Warehouse]

This can be achived.
I have done similar on my website and replaced the existing code with

<div id="ProgressBar">
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%200%22"><div class="CheckoutProgress0"></div></actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%201%22" ><div class="CheckoutProgress1"></div></actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%202%22" ><div class="CheckoutProgress2"></div></actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%203%22" ><div class="CheckoutProgress3"></div></actinic:block>
</div>

and then used some CSS styling.
My CSS looks like:

#ProgressBar {
	width: 487px;
	height: 57px;
	position: relative;
	top: 10px;
	left: 58px;
}

.CheckoutProgress0 {
	width: 487px;
	height: 57px;
	background-image: url('xProgressBar0.gif');
}

.CheckoutProgress1 {
	width: 487px;
	height: 57px;
	background-image: url('xProgressBar1.gif');
}

.CheckoutProgress2 {
	width: 487px;
	height: 57px;
	background-image: url('xProgressBar2.gif');
}

.CheckoutProgress3 {
	width: 487px;
	height: 57px;
	background-image: url('xProgressBar3.gif');
}

I am sure the above could be improved easily.

[leehack]

I am sure the above could be improved easily.

Not bad at all Darren. Your CSS could be compressed to:

#ProgressBar {
	width: 487px;
	height: 57px;
	position: relative;
	top: 10px;
	left: 58px;
}
.CheckoutProgress0, .CheckoutProgress1, .CheckoutProgress2, .CheckoutProgress3 {
	height: 57px;
	background-image: url('xProgressBar0.gif');
}
.CheckoutProgress1 {background-image: url('xProgressBar1.gif');}
.CheckoutProgress2 {background-image: url('xProgressBar2.gif');}
.CheckoutProgress3 {background-image: url('xProgressBar3.gif');}

That's about it!

[Golf Tee Warehouse]

Thanks Lee,

I was about to take a look at making the CSS more efficient as I am currently looking at ways of improving web load times (recently managed to get gzip working and have just removed the unused CSS selectors), so you have saved me a bot of time.

[Golf Tee Warehouse]

I am correct in assuming that the last image is not actually required as Checkout Page 3 is not used (I assume it used to contain the java card processing script) and have not bothered adding a progress bar to the receipt page.

[leehack]

Yeah good idea, it's becoming an important area with Google this, well worth investing the time into it. You'll be easily able to get rid of 800 lines in the actinic.css, particularly as yours is your own template. Clean the white space out of it too. Big big savings can be made in that area, although on page content is far more rewarding as the CSS is only a single load per visitor, whereas inefficient coding on a template for example, will be loaded on every page visited etc.

[leehack]

I am correct in assuming that the last image is not actually required as Checkout Page 3 is not used (I assume it used to contain the java card processing script) and have not bothered adding a progress bar to the receipt page.

That's right, i only ever add it to the 3 pages for the exact reason you mention. I also like a highlighted text bullet point showing where you are at also, with the 4 pages summarised in their own bullet point.