osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 What's In My Cart Shopping Cart Sub-page Customization (Part 5)

Let’s continue with Part 4 of osCommerce Shopping Cart Sub-page customization.

The next step is to see how to make the Update button and the “remove” link looks better.

25. Navigate to line 97. Find this line of codes.

$products_name .= '<br /><br />' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '&nbsp;&nbsp;&nbsp;' . TEXT_OR . '<a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">' . TEXT_REMOVE . '</a>';

26. Move the “Update” button below the Quantity field.

This can easily be done by adding two line breaks before the “Update” button, as shown below:

$products_name .= '<br /><br />' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . '<br /><br />' . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '&nbsp;&nbsp;&nbsp;' . TEXT_OR . '<a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">' . TEXT_REMOVE . '</a>';

27. Refresh browser to see the changes.

osc shopping cart page customization

The next things you wish to do is:
- Replace the “remove” text link with a button.

Look at the codes of line 97 closely again. Obviously, the block of codes that generate the “remove” text link is:

$products_name .= '<br /><br />' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . '<br /><br />' . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '&nbsp;&nbsp;&nbsp;' . TEXT_OR . '<a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">' . TEXT_REMOVE . '</a>';

28. Simply replace this block of codes with the following:

tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'))

The IMAGE_BUTTON_REMOVE is the text that will display on the button. Of course, you need to define it.

You can define it in the language file.

29. Open catalog/includes/languages/english.php file with a text editor.

30. Navigate to line 207.

define('IMAGE_BUTTON_UPDATE', 'Update');

31. Insert the following line of code below line 207.

define('IMAGE_BUTTON_REMOVE', 'Remove');

The english.php file should looks like:

osc shopping cart page customization

32. Refresh browser to see the results.

osc shopping cart page customization

You are almost done except the remove button is too close with the Update button.

This problem should easily be fixed. We will do that in next part. Please read on....