Home | Store | osCommerce Tutorials

osCommerce New Products Display Module Customization Tips (3)

In previous osCommerce New Products customization tutorials, the New Products area has been customized as shown in the picture below:

osCommerce New Products customization

Take a look at the following codes again. Focus on the value of 'text' only:

$row = 0;
$col = 0;
$info_box_contents = array();
while ($new_products = tep_db_fetch_array($new_products_query)) {

$info_box_contents[$row][$col] = array(

'align' => 'center',

'params' => 'class="smallText" width="33%" valign="top"',

'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .
$new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' .
$currencies->display_price($new_products['products_price'],
tep_get_tax_rate($new_products['products_tax_class_id'])));

$col ++;
if ($col > 2) {
$col = 0;
$row ++;
}
}

As you can see that the value of 'text' is simply a string that contains:

  • Product Image
  • Product Name
  • Product Price

In order to layout the Product Image, Product Name and Product Price freely, we have to break the long string (value of 'text') into three separate strings.

array('align' => 'center',
'params' => 'class="smallText" width="50%" valign="top"',

'addcart' => '<a href="' . tep_href_link(FILENAME_DEFAULT,
tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' .
$new_products['products_id']) . '">' . tep_image_button('button_in_cart.gif',
IMAGE_BUTTON_IN_CART) . '</a>',

// Break into three separate
// 'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO,.......

'image' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>',

'name' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a>',

'price' => $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));

Then you can re-arrange the layout of the Product Image, Product Name and Product Price by re-write the following codes:

echo "<td align=" . $info_box_contents[$row][$col]["align"] . " " . $info_box_contents[$row][$col]["params"] . ">" . $info_box_contents[$row][$col]["text"] . "<br /><br />" . $info_box_contents[$row][$col]["addcart"] . "</td>" . "\n";

PHP example filenew_products_customization_example-3-1.php

The customization of the osCommerce New Products Display is not too difficult once you learned and understand the code structure. The following is just some examples. Of course you have to design or download a better looking Add to Cart button.

osCommerce Customization example:

osCommerce New Products customization

PHP example filenew_products_customization_example-3-2.php

osCommerce Customization example:

osCommerce New Products customization

PHP example filenew_products_customization_example-3-3.php

Actually you can arrange the product image, production name and product price in any position you like once you know the code structure.

This is the end of the osCommerce New Products Display customization tips 3.