How can I show a checkout progress indicator?

[KB]

This code will add a checkout progress indicator to your checkout pages.

To begin, add the following code to the bottom of the 'Actinic Stylesheet' layout. You can access this layout within the 'Web Page Outer Layout' group.

.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;
 }

You now need to add the code for the actual indicator within the 'inner layouts' for the checkout. These are all located within the 'Web Page Inner Layout' group in the library.

Within 'Order 00 Bulk Area', add the following:

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

Within 'Order 01 Bulk Area', add the following:

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

Within 'Order 02 Bulk Area' and 'Order 03 Bulk Area', add the following:

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

Within 'Receipt Page Bulk' add the following code:

Checkout Progress <span class="progress100"> </span>

You can check the look of the checkout progress indicator by changing the page in the 'Select Page Type' drop-down list in SellerDeck's Design tab.

Disclaimer: This code was provided by a SellerDeck user via the SellerDeck Community (http://community.sellerdeck.com/) and so can't be supported by the SellerDeck Technical Support team.