Jump to content


Corporate Sponsors


Latest News: (loading..)

- - - - -

Convert Product-Listings to table-less CSS


33 replies to this topic

#1 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 27 January 2010, 21:25

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' => '&nbsp;' . $lc_text . '&nbsp;');

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

and change:

 new productListingBox($list_box_contents);
to:

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

That's it.

#2 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 27 January 2010, 21:34

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

#3 5-Squared

  • Community Member
  • 9 posts
  • Real Name:Sean

Posted 19 February 2010, 21:24

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

#4 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 19 February 2010, 21:55

View Post5-Squared, on 19 February 2010, 21:24, said:

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 5-Squared

  • Community Member
  • 9 posts
  • Real Name:Sean

Posted 19 February 2010, 22:05

View Postnpn2531, on 19 February 2010, 21:55, said:

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' => '&nbsp;' . $lc_text . '&nbsp;');


  }

  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 = '&nbsp;' . $listing['products_model'] . '&nbsp;';
            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 = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>&nbsp;';
            }
            break;
          case 'PRODUCT_LIST_MANUFACTURER':
            $lc_align = '';
            $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing['manufacturers_id']) . '">' . $listing['manufacturers_name'] . '</a>&nbsp;';
            break;
          case 'PRODUCT_LIST_PRICE':
            $lc_align = 'right';
            if (tep_not_null($listing['specials_new_products_price'])) {
              $lc_text = '&nbsp;<s>' .  $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</s>&nbsp;&nbsp;<span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span>&nbsp;';
            } else {
              $lc_text = '&nbsp;' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '&nbsp;';
            }
            break;
          case 'PRODUCT_LIST_QUANTITY':
            $lc_align = 'right';
            $lc_text = '&nbsp;' . $listing['products_quantity'] . '&nbsp;';
            break;
          case 'PRODUCT_LIST_WEIGHT':
            $lc_align = 'right';
            $lc_text = '&nbsp;' . $listing['products_weight'] . '&nbsp;';
            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 = '&nbsp;<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>&nbsp;';
            }
            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>&nbsp;';







            break;
        }

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


#6 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 19 February 2010, 22:21

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.

#7 5-Squared

  • Community Member
  • 9 posts
  • Real Name:Sean

Posted 19 February 2010, 22:26

View Postnpn2531, on 19 February 2010, 22:21, said:

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.

#8 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 19 February 2010, 22:45

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

#9 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 19 February 2010, 22:52

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.

#10 lorr2000

  • Community Member
  • 2 posts
  • Real Name:Lorraine

Posted 24 March 2010, 03:30

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??

#11 frmjin

  • Community Member
  • 1 posts
  • Real Name:jin

Posted 24 March 2010, 08:17

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

#12 AndrewKay

  • Community Member
  • 14 posts
  • Real Name:Andy Kay

Posted 13 April 2010, 22:39

View Postlorr2000, on 24 March 2010, 03:30, said:

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?

#13 AndrewKay

  • Community Member
  • 14 posts
  • Real Name:Andy Kay

Posted 13 April 2010, 22:40

View Postfrmjin, on 24 March 2010, 08:17, said:

hi.....dude i was not understnd ur problem....sory :(
It shows : a product box containing:
" Product Name+

Price
Buy Now "

#14 ArtifexDesign

  • Community Member
  • 9 posts
  • Real Name:Andy

Posted 17 April 2010, 11:13

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.

#15 AndrewKay

  • Community Member
  • 14 posts
  • Real Name:Andy Kay

Posted 20 April 2010, 18:09

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

#16 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 20 April 2010, 21:21

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

#17 npn2531

  • Community Member
  • 951 posts
  • Real Name:Jase
  • Gender:Not Telling

Posted 20 April 2010, 21:48

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.

Edited by npn2531, 20 April 2010, 21:56.


#18 xecutech

  • Community Member
  • 85 posts
  • Real Name:Tom Featherstone
  • Gender:Male
  • Location:Nashville

Posted 07 May 2010, 14:44

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.

#19 haidivolume

  • Community Member
  • 1 posts
  • Real Name:haidi marian
  • Gender:Male

Posted 17 May 2010, 08:25

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"',

#20 jfekendall

  • Community Member
  • 2 posts
  • Real Name:Justin Kendall

Posted 20 May 2010, 00:11

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.