Order Steps v1.2
2005080602 by Hans de Zwart

This script is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE.

Released under the General Public License (see http://www.gnu.org/licenses/gpl.txt)

Always backup your shop and database before making changes.

This contribution has been tested on Zen Cart v 1.2.5.
The CSS is tested on Internet Explorer 6 with SP2, Firefox 1.0.6 and Opera 8.02

A thank you should go out to Frank Koehl. I have used his layout (used in 'super orders') for this file.

==================================
Find a bug?  Have a feature idea?
==================================
If you have any comments, questions or ideas about this contribution please ask them in the Zen Cart forums (there should be a thread called 'Order Steps' or send me an e-mail: ordersteps AT hansdezwart DOT info.

====================
  DESCRIPTION
====================
To me ordering in Zencart is a four step process:
1. Choose Shipping method
2. Choose Payment method
3. Review your order (and confirm)
4. Order done

Often my customers forgot to confirm their order. That is why I made a four step line in HTML/CSS (see screenshot.gif). On each page in the checkout process the correct step is highlighted in the line. Because of the fact that it is made in HTML and CSS it should be easy to adapt to your own needs. Change the CSS to change the colours and the width and height of things. Use the defines in your language files to change the text.

I think it should be pretty easy. Enjoy using it!

Hans de Zwart

====================
  INSTALLATION
====================

You need to add text to the following files:

in /includes/templates/template_default/templates/ (or /includes/templates/YOUR_TEMPLATE/templates/)
- tpl_checkout_shipping_default.php
- tpl_checkout_payment_default.php
- tpl_checkout_confirmation_default.php
- tpl_checkout_success_default.php

in /includes/languages/ (or /includes/languages/YOUR_TEMPLATE/)
- english.php
- OTHER_LANGUAGES.php

in /includes/templates/template_default/css/ (or /includes/templates/YOUR_TEMPLATE/css/
- stylesheet.css

Let us start. Remember: There is only adding, no replacing of anything!

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_shipping_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_shipping_default.php
---------------------------------------
FIND:

  <tr>
    <td class="pageHeading" colspan="3"><h1><?php echo HEADING_TITLE; ?></h1></td>
  </tr>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr class="order_steps_line_1">
                <td class="order_steps_left"></td><td class="order_steps_text" id="active_step_text" colspan="3"><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_4; ?></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2" id="active_step"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2" id="active_step"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_4">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2" id="active_step"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_payment_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_payment_default.php
---------------------------------------
FIND:

  <tr>
    <td class="pageHeading" colspan="3"><h1><?php echo HEADING_TITLE; ?></h1></td>
  </tr>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr class="order_steps_line_1">
                <td class="order_steps_left"></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text" id="active_step_text" colspan="3"><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_4; ?></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td id="active_step" class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td id="active_step" class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_4">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td id="active_step" class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_confirmation_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_confirmation_default.php
---------------------------------------
FIND:

  <tr>
    <td class="pageHeading" colspan="3"><h1><?php echo HEADING_TITLE; ?></h1></td>
  </tr>

ADD AFTER:

<tr><td class="main" colspan="3">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr class="order_steps_line_1">
                <td class="order_steps_left"></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text"  id="active_step_text" colspan="3"><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_4; ?></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"  id="active_step"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"  id="active_step"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_4">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"  id="active_step"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/templates/template_default/templates/tpl_checkout_success_default.php (or /includes/templates/YOUR_TEMPLATE/templates/tpl_checkout_succes_default.php
---------------------------------------
FIND:

  <tr>
    <td align="center"><h1><?php echo HEADING_TITLE; ?></h1></td>
  </tr>

ADD AFTER:

<tr><td class="main">
    <div class="order_steps">
        <table class="order_steps" cellspacing="0">
            <tr class="order_steps_line_1">
                <td class="order_steps_left"></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_1; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_2; ?></td><td class="order_steps_text" colspan="3"><?php echo TEXT_ORDER_STEPS_3; ?></td><td class="order_steps_text" id="active_step_text" colspan="3"><?php echo TEXT_ORDER_STEPS_4; ?></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_2">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11" id="active_step"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_3">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11" id="active_step"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
            <tr class="order_steps_line_4">
                <td class="order_steps_left"></td><td class="order_steps_cell_1"></td><td class="order_steps_cell_2"></td><td class="order_steps_cell_3"></td><td class="order_steps_cell_4"></td><td class="order_steps_cell_5"></td><td class="order_steps_cell_6"></td><td class="order_steps_cell_7"></td><td class="order_steps_cell_8"></td><td class="order_steps_cell_9"></td><td class="order_steps_cell_10"></td><td class="order_steps_cell_11" id="active_step"></td><td class="order_steps_cell_12"></td><td class="order_steps_right"></td>
            </tr>
        </table>
    </div>
</td></tr>

---------------------------------------
IN THE FILE - /includes/languages/english.php (or /includes/languages/YOUR_TEMPLATE/english.php) and your other language files)
---------------------------------------
FIND:

///////////////////////////////////////////////////////////
// include email extras
  if (file_exists(DIR_WS_LANGUAGES . $_SESSION['language'] . '/' . $template_dir . '/' . FILENAME_EMAIL_EXTRAS)) {

ADD BEFORE:

// Order Steps
define('TEXT_ORDER_STEPS_1', 'Choose<br />Shipping<br />Method');
define('TEXT_ORDER_STEPS_2', 'Choose<br />Payment<br />Method');
define('TEXT_ORDER_STEPS_3', 'Review<br />your<br />Order');
define('TEXT_ORDER_STEPS_4', 'Order<br />Completed');

---------------------------------------
IN THE FILE - /includes/templates/template_default/css/stylsheet.css (or /includes/templates/YOUR_TEMPLATE/css/stylesheet.css)
---------------------------------------
FIND THE END OF THE FILE AND ADD:

/* This is the CSS needed for the Order step contribution */

div.order_steps {       /* Is needed for the centering in IE */
    width: 100%
    padding: 0px;
    margin: 0px;
    text-align: center;
}

table.order_steps {
    margin-left: auto;
    margin-right: auto;
    width: 468px;       /* Here you can set the total width of this contrib */
    padding-bottom: 10px;
    background-color: transparent;      /* Here you can change the background-color of the whole contrib */
}

tr.order_steps_line_2, tr.order_steps_line_4 {
    height: 4px;        /* Is a part in determining the height of the little squares */
    padding: 0px;
    margin: 0px;
}

tr.order_steps_line_3 {
    background-color: #CCC;     /* Determines the non-active color of the little squares */
    height: 7px;        /* Is a part in determining the height of the little squares */
    padding: 0px;
    margin: 0px;
}


td.order_steps_left, td.order_steps_right {
    width: 6%;
    padding: 0px;
    margin: 0px;
}

td.order_steps_text {
    text-align: center;
    vertical-align: top;
    color: #CCC;        /* Determines the non-active color of the text */
    padding-bottom: 10px; /* Determines the distance between the text and the line */
}

td.order_steps_cell_2, td.order_steps_cell_5, td.order_steps_cell_8, td.order_steps_cell_11 {
    background-color: #CCC;     /* Determines the non-active color of the little squares */
    width: 4%;
    padding: 0px;
    margin: 0px;
}

td.order_steps_cell_1, td.order_steps_cell_3, td.order_steps_cell_4, td.order_steps_cell_6, td.order_steps_cell_7, td.order_steps_cell_9, td.order_steps_cell_10, td.order_steps_cell_12 {
    width: 9%;
    padding: 0px;
    margin: 0px;
}

td#active_step_text {       /* These are the styles for the active text */
    color: #000;
    font-weight: bold;
}

td#active_step {        /* These are the styles for the active square */
    background-color: #000;
}

/* End Order Steps contribution CSS */

====================
  TUNING
====================

I have tried to write the CSS in such a way that it makes sense for relatively standard carts. The background should be inherited from the theme. The non-active steps are a light grey and the active step is black and bold. These things are easy to tune in the CSS. I have added some comments to help you find the things you might want to change.

====================
  FUTURE PLANS
====================

I think a nice feature to add would be to make the texts for the different steps links the relevant pages. Of course you can only go back or go one step ahead. I do not think it will be hard to do (it would probably only require a bit of CSS and a different define for the texts.