Contributions - 'Product Listing in Columns'

[Rob Petterson]

Hi there,

I've managed to successfully implement the above contribution (my first of many), in order to list the products in multiple columns. The only thing I'm not sure on how to change is the vertical spacing between the products - I want to have 3 * 3 products per page, filling 80% of the page vertically. Does the 'Let?s see what we have here' box automatically expand to accommodate the products once the spacing has been altered?

 

Thanks in advance,

 

Rob

[Guest]

yes it does and thats been done, in the loaded versions , and the new one

[Rob Petterson]

Thanks for the reply Ralph. You've answered part of my question - but how do you change the vertical spacing between the products?

[Guest]

Here is an example of using cellspacing to spread out cells in a table both vertically and horizontally.

 

To separate rows, you insert rows in between, using the height attribute to control the distance. You can use tep_draw_separator from includes/function/html_output.php to draw lines. If you use pixel_trans.gif as account.php does, then you won't see the lines.

 

Good luck,

Matt

[Rob Petterson]

Matt, I'm a bit confused by what you're saying here. I've used the contribution 'Product Listing in Columns' to get the layout of 3 images across and 3 images down. It uses product_listing_col.php. Here's the code that gets copied into catalog/includes/modules/ directory:

Is this where I have to edit the code to change the height attribute?

(sorry for being a bit of a thick git).

<?php

/*

 $Id: product_listing_col.php,v 1.00 2002/05/06 20:28:07 icw_ Exp $



 osCommerce, Open Source E-Commerce Solutions

 http://www.oscommerce.com

 Copyright (c) 2002 osCommerce



 Released under the GNU General Public License

*/

?>

<!-- product_listing_col //-->

<?php

 DEFINE('PRODUCT_LIST_COL_NUM',3);

 $listing_split = new splitPageResults($HTTP_GET_VARS['page'], MAX_DISPLAY_SEARCH_RESULTS, $listing_sql, $listing_numrows);

?>

<table width="100%">

<tr>

  <td class="smallText"> <?php echo $listing_split->display_count($listing_numrows, MAX_DISPLAY_SEARCH_RESULTS, $HTTP_GET_VARS['page'], TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?> </td>

 <td align="right" class="smallText"> <?php echo TEXT_RESULT_PAGE; ?> <?php echo $listing_split->display_links($listing_numrows, MAX_DISPLAY_SEARCH_RESULTS, MAX_DISPLAY_PAGE_LINKS, $HTTP_GET_VARS['page'], tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?> </td>

</tr>

</table>

<?php

 $info_box_contents = array();

 $row = 0;

 $col = 0;

 $listing = tep_db_query($listing_sql);

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

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

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

   if ($listing_values['specials_new_products_price']) {

             $lc_text .= ' <s>' .  $currencies->display_price($listing_values['products_price'], tep_get_tax_rate($listing_values['products_tax_class_id'])) . '</s>  <span class="productSpecialPrice">' . $currencies->display_price($listing_values['specials_new_products_price'], tep_get_tax_rate($listing_values['products_tax_class_id'])) . '</span> ';

           } else {

             $lc_text .= ' ' . $currencies->display_price($listing_values['products_price'], tep_get_tax_rate($listing_values['products_tax_class_id'])) . ' ';

           }

   if (PRODUCT_LIST_BUY_NOW) {

     $lc_text .= '<br><a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing_values['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', TEXT_BUY . $listing_values['products_name'] . TEXT_NOW) . '</a> ';      

   }

   $info_box_contents[$row][$col] = array('align' => 'center',

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

                                          'text' => $lc_text);

   $col ++;

   if ($col > PRODUCT_LIST_COL_NUM-1) {

     $col = 0;

     $row ++;

   }

 }

 new contentBox($info_box_contents);

?>

<table width="100%">

<tr>

  <td class="smallText"> <?php echo $listing_split->display_count($listing_numrows, MAX_DISPLAY_SEARCH_RESULTS, $HTTP_GET_VARS['page'], TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?> </td>

 <td align="right" class="smallText"> <?php echo TEXT_RESULT_PAGE; ?> <?php echo $listing_split->display_links($listing_numrows, MAX_DISPLAY_SEARCH_RESULTS, MAX_DISPLAY_PAGE_LINKS, $HTTP_GET_VARS['page'], tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?> </td>

</tr>

</table>

<!-- product_listing_col //-->

[Guest]

This section:

    if ($col > PRODUCT_LIST_COL_NUM-1) {

     $col = 0;

     $row ++;

   }

replace with this:

    if ($col > PRODUCT_LIST_COL_NUM-1) {

     $row++;

     do {

         $col--;

         $info_box_contents[$row][$col] = array('align' => 'center',

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

                         'text' => tep_draw_separator('pixel_trans.gif', '100%', '10'));

     } while ($col > 0);

//      $col = 0;

     $row ++;

   }

The height is the third parameter to tep_draw_separator (10). Make it whatever you want. If you want a black line rather than a transparent line, you can change the pixel_trans.gif to pixel_black.gif.

 

As always, no testing has been done on this code to remove errors. Use at your own risk.

 

Good luck,

Matt

[Rob Petterson]

Thanks Matt, just got home and changed the code. Spot on.