Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Help aligning products in listing


idlerob

Recommended Posts

Posted

i had good look through contributions trying find something to help me align all my products in the product listing as well as in the specials box, new products box and my page that contains all my products. Just feel it looks slightly messy if pictures are different ie, landscape and portrait.

 

Any one know how this is done, im sure its easy i just cant see how myself,

 

cheers for help

Posted
i had good look through contributions trying find something to help me align all my products in the product listing as well as in the specials box, new products box and my page that contains all my products. Just feel it looks slightly messy if pictures are different ie, landscape and portrait.

 

Any one know how this is done, im sure its easy i just cant see how myself,

 

cheers for help

 

well you would need to be much more precise and provide a screenshot too.

 

I'm quite anal about alignment so I'm sure there is a way ;-)

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Posted
heres is a screen shot of my site

 

http://www.chapstack.co.uk/index.php?cPath...5a09546aea8b1f2

 

i would love to have all the products aligned regardless of their image size i can post my code if it could help

 

thanks very much

 

like i said in my PM, you need to create 2 rows in a table for each row of products ... 2st row shows pics, sencond row shows the text. Text will be aligned then. This is a bit too complicated to walk you though here ... I can copy in a code I used on a project, maybe it will help you.

 

<?php
/*
 $Id: product_listing.php,v 1.44 2003/06/09 22:49:59 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/


 $listing_split = new splitPageResults($listing_sql, MAX_DISPLAY_SEARCH_RESULTS, 'p.products_id');

 if ( ($listing_split->number_of_rows > 0) && ( (PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3') ) ) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr>
<td class="smallText"><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></td>
<td class="smallText" align="right"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></td>
 </tr>
</table>
<?php
 }

 if (PRODUCT_LISTING_DISPLAY_STYLE == 'list') {

$list_box_contents = array();

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
  switch ($column_list[$col]) {
	case 'PRODUCT_LIST_MODEL':
	  $lc_text = TABLE_HEADING_MODEL;
	  $lc_align = '';
	  break;
	case 'PRODUCT_LIST_NAME':
	  $lc_text = TABLE_HEADING_PRODUCTS;
	  $lc_align = '';
	  break;
	case 'PRODUCT_LIST_MANUFACTURER':
	  $lc_text = TABLE_HEADING_MANUFACTURER;
	  $lc_align = '';
	  break;
	case 'PRODUCT_LIST_PRICE':
	  $lc_text = TABLE_HEADING_PRICE;
	  $lc_align = 'right';
	  break;
	case 'PRODUCT_LIST_QUANTITY':
	  $lc_text = TABLE_HEADING_QUANTITY;
	  $lc_align = 'right';
	  break;
	case 'PRODUCT_LIST_WEIGHT':
	  $lc_text = TABLE_HEADING_WEIGHT;
	  $lc_align = 'right';
	  break;
	case 'PRODUCT_LIST_BUY_NOW':
	  $lc_text = TABLE_HEADING_BUY_NOW;
	  $lc_align = 'center';
	  break;
	case 'PRODUCT_LIST_IMAGE':
	  $lc_text = TABLE_HEADING_IMAGE;
	  $lc_align = 'center';
	  break;
  }

  if ( ($column_list[$col] != 'PRODUCT_LIST_BUY_NOW') && ($column_list[$col] != 'PRODUCT_LIST_IMAGE') ) {
	$lc_text = tep_create_sort_heading($HTTP_GET_VARS['sort'], $col+1, $lc_text);
  }

  $list_box_contents[0][] = array('align' => $lc_align,
								 'params' => 'class="productListing-heading"',
								   'text' => ' ' . $lc_text . ' ');
}

if ($listing_split->number_of_rows > 0) {
  $rows = 0;
  $listing_query = tep_db_query($listing_split->sql_query);
  while ($listing = tep_db_fetch_array($listing_query)) {
	$rows++;

	if (($rows/2) == floor($rows/2)) {
	  $list_box_contents[] = array('params' => 'class="productListing-even"');
	} else {
	  $list_box_contents[] = array('params' => 'class="productListing-odd"');
	}

	$cur_row = sizeof($list_box_contents) - 1;

	for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
	  $lc_align = '';

	  switch ($column_list[$col]) {
		case 'PRODUCT_LIST_MODEL':
		  $lc_align = '';
		  $lc_text = ' ' . $listing['products_model'] . ' ';
		  break;
		case 'PRODUCT_LIST_NAME':
		  $lc_align = '';
		  if (isset($HTTP_GET_VARS['manufacturers_id'])) {
			$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>';
		  } else {
			$lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a> ';
		  }
		  break;
		case 'PRODUCT_LIST_MANUFACTURER':
		  $lc_align = '';
		  $lc_text = ' <a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing['manufacturers_id']) . '">' . $listing['manufacturers_name'] . '</a> ';
		  break;
		case 'PRODUCT_LIST_PRICE':
		  $lc_align = 'right';
		  if (tep_not_null($listing['specials_new_products_price'])) {
			$lc_text = ' <s>' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</s>  <span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span> ';
		  } else {
			$lc_text = ' ' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . ' ';
		  }
		  break;
		case 'PRODUCT_LIST_QUANTITY':
		  $lc_align = 'right';
		  $lc_text = ' ' . $listing['products_quantity'] . ' ';
		  break;
		case 'PRODUCT_LIST_WEIGHT':
		  $lc_align = 'right';
		  $lc_text = ' ' . $listing['products_weight'] . ' ';
		  break;
		//case 'PRODUCT_LIST_BUY_NOW':
		  //$lc_align = 'left';
		  //$lc_text = '<a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']) . '">' . tep_image_button('button_buy_now.gif', IMAGE_BUTTON_BUY_NOW) . '</a> '
		  //break;
		case 'PRODUCT_LIST_IMAGE':
		  $lc_align = 'center';
		  if (isset($HTTP_GET_VARS['manufacturers_id'])) {
			$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
		  } else {
			$lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
		  }
		  break;
	  }

	  $list_box_contents[$cur_row][] = array('align' => $lc_align,
											'params' => 'class="productListing-data"',
											 'text'  => $lc_text);
	}
  }

  new productListingBox($list_box_contents);
} else {
  $list_box_contents = array();

  $list_box_contents[0] = array('params' => 'class="productListing-odd"');
  $list_box_contents[0][] = array('params' => 'class="productListing-data"',
									'text' => TEXT_NO_PRODUCTS);

  new productListingBox($list_box_contents);
}

 } elseif (PRODUCT_LISTING_DISPLAY_STYLE == 'columns') {

if ($listing_split->number_of_rows > 0) {
?>

<table border="0" align="center" width="<?php echo $tablewidth; ?>"><tr><td>		

<?php
$row = 0;
	$first_row = '';
	$second_row = '';

	$colspan = PRODUCT_LIST_COL_NUM;

	//$tablewidth defined in application_top.php
	//$spacing defined in application_top.php
	$width = ($tablewidth - (PRODUCT_LIST_COL_NUM + 1) * $spacing) / PRODUCT_LIST_COL_NUM;

$listing_query = tep_db_query($listing_split->sql_query);

	$countrows = tep_db_num_rows($listing_query);


	if ($countrows < PRODUCT_LIST_COL_NUM + 1) {
		$tablewidth = $countrows * $width + ($countrows + 1) * $spacing;
		$colspan = $countrows;
	}

	echo '<table border="0" width="' . $tablewidth . '" cellspacing="' . $spacing . '" cellpadding="0">';

while ($listing = tep_db_fetch_array($listing_query)) {

		$countrows--;

  if ($new_price = tep_get_products_special_price($listing['products_id'])) {
	$products_price = '<s>' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</s> ' . $currencies->display_price($new_price, tep_get_tax_rate($listing['products_tax_class_id']));
	$webonly = '1';
  } else {
	$products_price = $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id']));
	$webonly = '0';
  }

  if ($expected = tep_get_products_date_available($listing['products_id'])) {
	$isexpected = '1';
  } else {
	$isexpected = '0';
  }

  $listing['products_name'] = tep_get_products_name($listing['products_id']);

  //check which category this product belongs to and get background color
  $color_query = tep_db_query("select background_color from " . TABLE_PRODUCTS_TO_CATEGORIES . " ptc, " . TABLE_CATEGORIES . " cat " . " where cat.categories_id = ptc.categories_id and ptc.products_id = '" . $listing['products_id'] . "'");
		$color = tep_db_fetch_array($color_query);

		$styleRow1 = 'background-color: #EAEAE8; border: 0px dotted #B8B4B2;';
		if (tep_not_null($color['background_color'])) {
			$styleRow2 = 'background-color: ' . $color['background_color'] . '; border: 4px solid ' . $color['background_color'] . ';';
		} else {
			$styleRow2 = 'background-color: #CCCCCC; border: 4px solid #CCCCCC;';
		}
  $row++;

		if ($first_row == '' && PRODUCT_LIST_IMAGE > 0) {
				$first_row ='<tr>';
		}

		if (PRODUCT_LIST_IMAGE > 0) { 
			$first_row .= '<td align="center" width="' . $width . '" class="smallText" valign="bottom">';

			if ($webonly == '1') {
				$first_row .= '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . 'niceprice_mini.gif', $listing['products_name'], $width, '') . '</a>';	
			} elseif ($isexpected == '1') {
				$first_row .= '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . 'vorbestellen_mini.gif', $listing['products_name'], $width, '') . '</a>';	
			}

			$first_row .= '<div style="' . $styleRow1 . '"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], $width, '') . '</a></div></td>';
		}

		if ($second_row == '' && (PRODUCT_LIST_NAME > 0 || PRODUCT_LIST_MANUFACTURER > 0 || PRODUCT_LIST_PRICE > 0)) {
				$second_row ='<tr>';
		}

		if (PRODUCT_LIST_NAME > 0 || PRODUCT_LIST_MANUFACTURER > 0 || PRODUCT_LIST_PRICE > 0) { 
			$second_row .= '<td align="center" width="' . $width . '" style="' . $styleRow2 . '" valign="top"><div class="plText" align="left">';
		}

		if (PRODUCT_LIST_MANUFACTURER > 0) {
			$second_row .= '<a class="plText" href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing['manufacturers_id']) . '"><b>' . $listing['manufacturers_name'] . '</b></a><br>';
  }

		if (PRODUCT_LIST_NAME > 0) {
			$second_row .= '<a class="plText" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a><br>';
		}

		if (PRODUCT_LIST_PRICE > 0) {
				$second_row .= '<b>' .  $products_price . '</b></div></td>';
		}

  if ((($row / PRODUCT_LIST_COL_NUM) == floor($row / PRODUCT_LIST_COL_NUM)) || $countrows ==  0) {

			if (PRODUCT_LIST_IMAGE > 0) {
				$first_row .= '</tr>';
			}

			if (PRODUCT_LIST_NAME > 0 || PRODUCT_LIST_MANUFACTURER > 0 || PRODUCT_LIST_PRICE > 0) {
				$second_row .= '</tr>';
			}

			echo $first_row;
			echo $second_row;

			$first_row = '';
			$second_row = '';
		}

  if ((($row / PRODUCT_LIST_COL_NUM) == floor($row / PRODUCT_LIST_COL_NUM)) && ($countrows > 0)) {
?>
	  <tr>
		<td colspan="<?php echo $colspan; ?>"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '1'); ?></td>
	  </tr>
	  <tr>
		<td colspan="<?php echo $colspan; ?>" align="center"><?php echo tep_image(DIR_WS_IMAGES . 'separator_dots.gif', '', '', ''); ?></td>
	  </tr>
	  <tr>
		<td colspan="<?php echo $colspan; ?>"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '1'); ?></td>
	  </tr>
<?php
  }
}
?>
	</table></td>
</tr>
</table>

<?php
} else {

  $info_box_contents = array();

  $info_box_contents[0] = array('params' => 'class="productListing-odd"');
  $info_box_contents[0][] = array('params' => 'class="productListing-data"',
									'text' => TEXT_NO_PRODUCTS);

  new contentBox($info_box_contents);

}
 }

 if ( ($listing_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3')) ) {
?>
<!-- untere tabelle angezeite produkte -->
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr>
<td class="smallText"><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></td>
<td class="smallText" align="right"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></td>
 </tr>
</table>
<?php
 }
?>

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Posted

Mark,

 

Your solution is all fine and well if you only have a few products, but if you have thousands of products this is totally inpractible.

 

Monika's solution or help is much easier to implement than editing loads of images.

Lifes a bitch, then you marry one, then you die!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...