Convert Product-Listings to table-less CSS

[npn2531]

Add stylesheet control to the layout and design of the category product listings on the index. No new files or database changes required.

 

See it here:

http://www.niora.com/anti-aging-acne-care

 

and on a new OSCommerce install:

http://www.adult-acne-treatments.com/catalog/index.php?cPath=3_10

 

1) add the following code (new class definition) to includes/classes/boxes.php before the final ?>

  
/////  BOF CSSTABLEBOX  //////
 class csstableBox {  

// class constructor
   function csstableBox($contents, $direct_output = false) {

     for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
       if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $csstableBox_string .= $contents[$i]['form'] . "\n";
       $csstableBox_string .= '  <div class="cssproduct_listing_item" >' . "\n";

       if (isset($contents[$i][0]) && is_array($contents[$i][0])) {
         for ($x=0, $n2=sizeof($contents[$i]); $x<$n2; $x++) {
           if (isset($contents[$i][$x]['text']) && tep_not_null($contents[$i][$x]['text'])) {
             $csstableBox_string .= '    <div class="cssproduct_listing_content">';
             if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $csstableBox_string .= $contents[$i][$x]['form'];
             $csstableBox_string .= $contents[$i][$x]['text'];
             if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $csstableBox_string .= '</form>';
             $csstableBox_string .= '</div>' . "\n";
           }
         }
       }  else {
         $csstableBox_string .= '    <div class="cssproduct_listing_content">' . $contents[$i]['text'] . '</div>' . "\n";
       }

      $csstableBox_string .= '  </div>' . "\n";
       if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $csstableBox_string .= '</form>' . "\n";
     }

     $csstableBox_string .= '<div class="cssclear"></div>' . "\n";

     if ($direct_output == true) echo $csstableBox_string;
     return $csstableBox_string;
   }
 }

class cssproductListingBox extends csstableBox {
   function cssproductListingBox($contents) {      
     $this->csstableBox($contents, true);
   }
 }

//////  EOF CSSTABLEBOX   //////

 

2) add the following to includes/stylesheet.css

 

.cssproduct_listing_content{
border: 1px dotted #bbc3d3;
border-width: 0px 0px 0px 0px;
width: 140px;
padding: 2px 0px 2px 0px;
margin: 0px 0px 0px 0px;
}

.cssproduct_listing_item{
float: left;
width: 155px;
height: 165px;
border: 1px solid #bbc3d3;
border-width: 1px 1px 1px 1px;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
text-align: center;
padding: 5px 0px 5px 5px;
margin: 5px 5px 5px 5px;
}

.cssclear{clear: both;}

 

3) In includes/modules/product_listing.php:

about line 68 comment out the following.

ie change:

 

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

 

to:

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

 

and change:

 

new productListingBox($list_box_contents);

to:

 

//   new productListingBox($list_box_contents);
     new cssproductListingBox($list_box_contents);

 

That's it.

[npn2531]

To convert the new product listing to tableless CSS as well, do the above and then:

 

1) in includes/modules/new_products.php , at the end of the file

change:

 

 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 ++;
   }
 }

 new contentBox($info_box_contents);

 

to this

 

while ($new_products = tep_db_fetch_array($new_products_query)) {    
   echo '<div class="cssproduct_listing_item"><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']) . '"><br/>' . $new_products['products_name'] . '</a><br/><br/>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])).'</div>';   
 }

  new csscontentBox($info_box_contents);

2) add the following code (new class definition) to includes/classes/boxes.php before the final ?>

class csscontentBox extends csstableBox {
   function csscontentBox($contents) {
     $this->csstableBox($info_box_contents, true);
   }
 }

that's it

[5-Squared]

Thanks a lot for this mod - its really great. I've made the modifications to my store, but the "add to cart" buttons are not showing up under each product. Any ideas how to get these to show up?

 

http://66.147.244.193/~jandijew/catalog/index.php?cPath=30

[npn2531]

Thanks a lot for this mod - its really great. I've made the modifications to my store, but the "add to cart" buttons are not showing up under each product. Any ideas how to get these to show up?

 

http://66.147.244.193/~jandijew/catalog/index.php?cPath=30

 

I took a look at your site. You have this set up nicely, but yes, even on the source code I can see that you are missing not only the button, but the div tag it would be enclosed in. You should have four tags marked <div class="cssproduct_listing_content"> stacked up and nested in the <div class="cssproduct_listing_item" > tag. You have only three. I would have to see the code for that section of includes/modules/product_listing.php that appears above

new cssproductListingBox($list_box_contents);

 

That section of the product listing is a bit tricky with a lot of stuff nested in conditional statements.

[5-Squared]

I took a look at your site. You have this set up nicely, but yes, even on the source code I can see that you are missing not only the button, but the div tag it would be enclosed in. You should have four tags marked <div class="cssproduct_listing_content"> stacked up and nested in the <div class="cssproduct_listing_item" > tag. You have only three. I would have to see the code for that section of includes/modules/product_listing.php that appears above

new cssproductListingBox($list_box_contents);

 

That section of the product listing is a bit tricky with a lot of stuff nested in conditional statements.

 

 

Thanks for the kind words. The store is still under construction, but coming along nicely so far. Here is the code you requested. Sorry if its long, I wasn't sure if you needed all of it. (it is everything above

new cssproductListingBox($list_box_contents);

)

 

 

 

 

 $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
 }

 $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_IMAGE':
       $lc_text = TABLE_HEADING_IMAGE;
       $lc_align = 'center';
       break;
     case 'PRODUCT_LIST_BUY_NOW':
       $lc_text = TABLE_HEADING_BUY_NOW;
       $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);
   }



// COMMENTED OUT FOR PRODUCT LISTING MOD
   // $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_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;
         case 'PRODUCT_LIST_BUY_NOW':
           $lc_align = 'center';








		// REPLACED BY SEO URL
           $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;
       }

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

[npn2531]

Actually, first make sure you have the 'buy now' button turned on in the admin.

 

go to:

 

admin/configuration/product listing and select the 'display buy now column' and make sure it is set to something other than '0'

 

'0' turns it off. And for fun, if you turned some other columns on, like 'model' or 'weight' they should appear in the listing as well.

[5-Squared]

Actually, first make sure you have the 'buy now' button turned on in the admin.

 

go to:

 

admin/configuration/product listing and select the 'display buy now column' and make sure it is set to something other than '0'

 

'0' turns it off. And for fun, if you turned some other columns on, like 'model' or 'weight' they should appear in the listing as well.

 

 

Ah, that was it. I didn't have the buy now turned on in the admin. The buttons are now showing up. I will just need to style them a bit via CSS.

 

Thanks a lot for all your help - very much appreciated.

[npn2531]

I should have thought of that right off, I'm glad that's all it was.

[npn2531]

ps, if you add float:left to the

ie

.cssproduct_listing_content{
float:left
}

and play with the width, you can get the image on the left and everything else stacked up vertically on the right within each listing item.

[lorr2000]

I'm having a problem using the product display. It shows an empty product listing. You can view the error here:

http://www.lorrainewhite.ie/shop/index.php?cPath=21

 

Can anyone help with this??

[frmjin]

hi.....dude i was not understnd ur problem....sory :(

[AndrewKay]

I'm having a problem using the product display. It shows an empty product listing. You can view the error here:

http://www.lorrainewhite.ie/shop/index.php?cPath=21

 

Can anyone help with this??

 

Sorry I cant help, but I like how you have a few bullet points on each product listing - how do you get that?

[AndrewKay]

hi.....dude i was not understnd ur problem....sory :(

It shows : a product box containing:

" Product Name+

 

Price

Buy Now "

[Guest]

npn2531 - Thank you SO SO much for this. I have been looking for this exact thing for a very long time. I also wish I had found your OSC to CSS mod 7 months ago, as it would have saved me a huge amount of work and heartache

 

I'm going to PM you - please check it out.

[AndrewKay]

is there a way to have a different 'cssprofuct_listing' class for each part of the product listing. i.e. buy now button, thumbnail, price - all having their own separate style?

I've tried looking in clases/boxes.php - but can only see where it enters the initial class="cssproduct_listing_content" which each thing (above) gets its class from

[npn2531]

Yes. Essentially you open includes/modules/product_listing.php and replace each instance of '$lc-align = 'right';' with '$lc_class = 'pl-manu';'

 

That not quite all of it but go here http://www.alpha-clear.com/notables/index.php?cPath=3_10 and look at the source, you'll see a different class, such as 'pl-name' or 'pl-buy_now' for each thing in the product listing.

 

This is the way it is done in the OSC to CSS mod, http://addons.oscommerce.com/info/7263

 

You can get the exact code from there, as well the matching CSS from the stylesheet. It's nice because you can design the product listing in virtually anyway you can imagine.

Here is a modified example here:

 

http://www.niora.com/anti-aging-acne-care

[npn2531]

Actually you can do it three steps. Open includes/modules/product_listing.php

 

1)

find:

 

$list_box_contents[$cur_row][] = array('align' => $lc_align,

 

change to:

 

$list_box_contents[$cur_row][] = array('class' => $lc_align,

 

Now, what will happen is in the product listing, where you had 'align' you will have 'class'.

 

2) Now go back up the page, and add your choice of class selectors to every instance of $lc_align

 

for example change $lc_align = 'right'; to $lc_align = 'my_class'; (note that you'll see class="right" in the product listing on the web page if you don't change it)

 

3) add the matching class selectors to your stylesheet.css.

[xecutech]

Wow, this turned out exactly like what I was looking for, and it was the easiest mod that I have done to date! Thank you for sharing.

[haidivolume]

cssproduct_listing_content{

border: 1px dotted #bbc3d3;

border-width: 0px 0px 0px 0px;

width: 140px;

padding: 2px 0px 2px 0px;

margin: 0px 0px 0px 0px;

}

 

.cssproduct_listing_item{

float: left;

width: 155px;

height: 165px;

border: 1px solid #bbc3d3;

border-width: 1px 1px 1px 1px;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

text-align: center;

padding: 5px 0px 5px 5px;

margin: 5px 5px 5px 5px;

}

 

.cssclear{clear: both;}

 

3) In includes/modules/product_listing.php:

about line 68 comment out the following.

ie change:

 

 

$list_box_contents[0][] = array('align' => $lc_align,

'params' => 'class="productListing-heading"',

[jfekendall]

I did something like this for a client that wanted things her way or no way. The tables in 2.2 just made things confusing as far as customization went.

 

Here's the site. Took about a week to do.

 

I had to leave some of the table elements alone as it really wasn't worth my time to mess with them. At least it passes validation now. I'll probably use your code for future projects. Thanks for that.

[npn2531]

That is really nice. You have gotten away from the stock OSCommerce drearyness. Note I have a template system for the OSC to CSS now

http://addons.oscommerce.com/info/7403

, that makes things easier still. The nonproduct images are separated out and put in a template folder with the stylesheet. You can switch out designs in the admin.

[piernas]

I was taking a look on your test site and tried with IE6. The header has gone and right column is under the left one. Is this a known issue?

[npn2531]

No, I have been making changes to the site, and using it for development of another design. The method describe here works well and uses pretty simple css that should not be an issue on IE, outside of the usual differences in how IE calculates width of an element. (ie including the width of the border).

[piernas]

Well this is how it looks in firefox:

 

 

And these are the results on IE6:

 

 

Header is blank, page is not centered and right column is below left one. I've tested on two XP machines with IE6, currently do not have a newer version to test.

[npn2531]

It is an issue with includes/languages/espanol.php and includes/languages/german.php. Those two files have not been converted. To convert them, you need to add a bit more to every instance of: define('BOX_HEADING_NAMEOFBOX', 'Name of Box'); for each box.

 

Change to:

 

define('BOX_HEADING_NAMEOFBOX', '<span class="Nameofbox">Box');

 

You are adding the opening span tag

 

It would be best to copy them from the english file to make sure you get the exact class name.