Exercise 1 Learning to Edit osCommerce
Changing Field order in account_edit.php
The code between the <?php ?>
tags, including the actual tags, can be treated as discrete
code modules, and can be moved around within html tags and to some extent,
within the script itself. A simple example of this is changing the order
of fields in the file account_edit.php. See the screen captures
and code snippets below:
The
project is to change the order of the items highlighted by the red boxes.
The default order is rather haphazard, and not at all intuitive. I am
going to put them in a more user friendly order, i.e. City, State, Post
Code, and Country. To do this, I need to open account_edit.php ,
and I am looking for the section of the file that relates to the above
output. I know this will be in the <!—body_text//-->
section by convention, so now I have to find it!
Ok,
I can’t find it! But I did find this bit of code(note the highlighted
part):
<?php $account_query = tep_db_query("select
c.customers_gender, c.customers_firstname, c.customers_lastname, c.customers_dob,
c.customers_email_address, a.entry_company, a.entry_street_address, a.entry_suburb,
a.entry_postcode, a.entry_city, a.entry_zone_id, a.entry_state, a.entry_country_id,
c.customers_telephone, c.customers_fax, c.customers_newsletter from "
. TABLE_CUSTOMERS . " c, " . TABLE_ADDRESS_BOOK . " a where
c.customers_id = '" . $customer_id . "' and a.customers_id =
c.customers_id and a.address_book_id = '" . $customer_default_address_id
. "'");
$account = tep_db_fetch_array($account_query);
require(DIR_WS_MODULES . 'account_details.php');
?>
The
line, require(DIR_WS_MODULES
. 'account_details.php'); , points us in the right direction.
Whenever you see php code that starts with require
look for the directory name and filename in the parentheses, in this case,
DIR_WS_MODULES and account_details.php.
This tells me I have to look in the Modules directory, as
specified in the file configure.php, to find the file account_details.php.
Great!
After
opening account_details.php in a text editor, look for anything that will
put you in the correct vicinity. In this case, look for a variable or
text that refers to city or state, since I want to move these items. I
often use the ‘Find’ command in my text editor, so I don’t have to look
too hard. Using this method, zero in on the code blocks that build the
form output for city and state.
Here
is what I found. The html is green,
the php is yellow.
<tr>
<td class="main"> <?php echo ENTRY_CITY; ?></td>
<td class="main">
<?php
if
($is_read_only) {
echo $account['entry_city'];
} elseif
($error) {
if ($entry_city_error) {
echo tep_draw_input_field('city') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else
{
echo tep_draw_input_field('city', $account['entry_city']) . ' '
. ENTRY_CITY_TEXT;
}
?> </td>
</tr>
Notice
how this creates a nice modular block of code. The <tr> and <td>
tags are your row and cell divisions, and nested neatly in this cell is
the php script, which outputs the city name right into the cell.
From
here, all you have to do is cut this code out of its place, and paste
it above the modular block that defines the ENTRY_POST_CODE. Next find
the block that defines ENTRY_STATE block, and cut and paste it above the
ENTRY_POST_CODE block as well, but below the ENTRY_CITY block. See the
code comparison on the next page.
The
original code (I have highlighted each modular block of code with a different
color):
<tr>
<td class="main"> <?php
echo ENTRY_STREET_ADDRESS; ?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_street_address'];
} elseif ($error)
{
if ($entry_street_address_error) {
echo tep_draw_input_field('street_address') . ' ' . ENTRY_STREET_ADDRESS_ERROR;
} else {
echo $HTTP_POST_VARS['street_address'] . tep_draw_hidden_field('street_address');
}
} else {
echo tep_draw_input_field('street_address', $account['entry_street_address'])
. ' ' . ENTRY_STREET_ADDRESS_TEXT;
}
?></td>
</tr>
<?
if (ACCOUNT_SUBURB
== 'true') {
?>
<tr>
<td class="main"> <?php echo ENTRY_SUBURB;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_suburb'];
} elseif ($error)
{
if ($entry_suburb_error) {
echo tep_draw_input_field('suburb') . ' ' . ENTRY_SUBURB_ERROR;
} else {
echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb');
}
} else {
echo tep_draw_input_field('suburb', $account['entry_suburb']) . ' '
. ENTRY_SUBURB_TEXT;
}
?></td>
</tr>
<?
}
?>
<tr>
<td class="main"> <?php echo ENTRY_POST_CODE;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_postcode'];
} elseif ($error)
{
if ($entry_post_code_error) {
echo tep_draw_input_field('postcode') . ' ' . ENTRY_POST_CODE_ERROR;
} else {
echo $HTTP_POST_VARS['postcode'] . tep_draw_hidden_field('postcode');
}
} else {
echo tep_draw_input_field('postcode', $account['entry_postcode']) . ' '
. ENTRY_POST_CODE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_CITY; ?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_city'];
} elseif ($error)
{
if ($entry_city_error) {
echo tep_draw_input_field('city') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else {
echo tep_draw_input_field('city', $account['entry_city']) . ' '
. ENTRY_CITY_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_COUNTRY;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo tep_get_country_name($account['entry_country_id']);
} elseif ($error)
{
if ($entry_country_error) {
tep_get_country_list('country', $HTTP_POST_VARS['country'], (ACCOUNT_STATE
== 'true') ? 'onChange="update_zone(this.form);"' : '');
echo ' ' . ENTRY_COUNTRY_ERROR;
} else {
echo tep_get_country_name($HTTP_POST_VARS['country']) . tep_draw_hidden_field('country');
}
} else {
tep_get_country_list('country', $account['entry_country_id'], (ACCOUNT_STATE
== 'true') ? 'onChange="update_zone(this.form);"' : '');
echo ' ' . ENTRY_COUNTRY_TEXT;
}
?></td>
</tr>
<?php
if (ACCOUNT_STATE
== 'true') {
$customers_state = ($account['entry_state']) ? $account['entry_state']
: JS_STATE_SELECT;
?>
<tr>
<td class="main"> <?php echo ENTRY_STATE;
?></td>
<td class="main">
<?php
if ($is_read_only) {
echo tep_get_zone_name($account['entry_country_id'], $account['entry_zone_id'],
$account['entry_state']);
} elseif ($processed) {
echo tep_get_zone_name($HTTP_POST_VARS['country'], $HTTP_POST_VARS['zone_id'],
$HTTP_POST_VARS['state']) . tep_draw_hidden_field('zone_id') . tep_draw_hidden_field('state');
} else {
echo tep_get_zone_list('zone_id', $account['entry_country_id'], $account['entry_zone_id'],
'onChange="resetStateText(this.form);"');
echo ' ' . ENTRY_STATE_TEXT;
}
?></td>
</tr>
Now
it is just a matter of re-arranging the colors! The colors start out as
Green, Yellow, Blue, Gray, Teal, Lt-Yellow. I change the order
to Green, Yellow, Gray,
Lt-Yellow, Blue,
Teal. Watch this:
<tr>
<td class="main"> <?php
echo ENTRY_STREET_ADDRESS; ?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_street_address'];
} elseif ($error)
{
if ($entry_street_address_error) {
echo tep_draw_input_field('street_address') . ' ' . ENTRY_STREET_ADDRESS_ERROR;
} else {
echo $HTTP_POST_VARS['street_address'] . tep_draw_hidden_field('street_address');
}
} else {
echo tep_draw_input_field('street_address', $account['entry_street_address'])
. ' ' . ENTRY_STREET_ADDRESS_TEXT;
}
?></td>
</tr>
<?
if (ACCOUNT_SUBURB
== 'true') {
?>
<tr>
<td class="main"> <?php echo ENTRY_SUBURB;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_suburb'];
} elseif ($error)
{
if ($entry_suburb_error) {
echo tep_draw_input_field('suburb') . ' ' . ENTRY_SUBURB_ERROR;
} else {
echo $HTTP_POST_VARS['suburb'] . tep_draw_hidden_field('suburb');
}
} else {
echo tep_draw_input_field('suburb', $account['entry_suburb']) . ' '
. ENTRY_SUBURB_TEXT;
}
?></td>
</tr>
<?
}
?>
<tr>
<td class="main"> <?php echo ENTRY_CITY; ?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_city'];
} elseif ($error)
{
if ($entry_city_error) {
echo tep_draw_input_field('city') . ' ' . ENTRY_CITY_ERROR;
} else {
echo $HTTP_POST_VARS['city'] . tep_draw_hidden_field('city');
}
} else {
echo tep_draw_input_field('city', $account['entry_city']) . ' '
. ENTRY_CITY_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_STATE;
?></td>
<td class="main">
<?php
if ($is_read_only) {
echo tep_get_zone_name($account['entry_country_id'], $account['entry_zone_id'],
$account['entry_state']);
} elseif ($processed) {
echo tep_get_zone_name($HTTP_POST_VARS['country'], $HTTP_POST_VARS['zone_id'],
$HTTP_POST_VARS['state']) . tep_draw_hidden_field('zone_id') . tep_draw_hidden_field('state');
} else {
echo tep_get_zone_list('zone_id', $account['entry_country_id'],
$account['entry_zone_id'], 'onChange="resetStateText(this.form);"');
echo ' ' . ENTRY_STATE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_POST_CODE;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo $account['entry_postcode'];
} elseif ($error)
{
if ($entry_post_code_error) {
echo tep_draw_input_field('postcode') . ' ' . ENTRY_POST_CODE_ERROR;
} else {
echo $HTTP_POST_VARS['postcode'] . tep_draw_hidden_field('postcode');
}
} else {
echo tep_draw_input_field('postcode', $account['entry_postcode']) . ' '
. ENTRY_POST_CODE_TEXT;
}
?></td>
</tr>
<tr>
<td class="main"> <?php echo ENTRY_COUNTRY;
?></td>
<td class="main">
<?php
if ($is_read_only)
{
echo tep_get_country_name($account['entry_country_id']);
} elseif ($error)
{
if ($entry_country_error) {
tep_get_country_list('country', $HTTP_POST_VARS['country'], (ACCOUNT_STATE
== 'true') ? 'onChange="update_zone(this.form);"' : '');
echo ' ' . ENTRY_COUNTRY_ERROR;
} else {
echo tep_get_country_name($HTTP_POST_VARS['country']) . tep_draw_hidden_field('country');
}
} else {
tep_get_country_list('country', $account['entry_country_id'], (ACCOUNT_STATE
== 'true') ? 'onChange="update_zone(this.form);"' : '');
echo ' ' . ENTRY_COUNTRY_TEXT;
}
?></td>
</tr>
Now,
save these changes and visit the page in your browser. You can see the
changes highlighted below:
Original Page
Modified
Page
This
is a simple demonstration of the modularity of the display code that you
will be modifying. In this example, we moved display fields and cells,
but it should be fairly obvious to see how you can expand on this, changing
table structure and positioning, as well as graphic output.