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:
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";
new_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:
new_products_customization_example-3-2.php
osCommerce Customization example:
new_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.