osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 Change HTML Tables in Product Listing to CSS Div Layers Customization

The osCommerce Product Listing page is still using a lot of HTML <table>, <tr> and <td> tags which make customization of the design and layout a bit difficult. In this osCommerce tutorial, we are going to change or convert all HTML tables in Product Listing page to CSS Div layers.

File required to customize:

catalog/includes/modules/product_listing.php
catalog/stylesheet.css

Okay! Let's see how to replace all HTML tables in Product Listing page with CSS Div layers. The processes are much easier than you expected.

Okay! Let's get started!

1. Open product_listing.php file with a text editor.

2. Navigate to line 35 to 36.

' <table border="0" width="100%" cellspacing="0" cellpadding="2" class="productListingHeader">' .
' <tr>';

This is the <html> table opening tags that used to contain the Product Listing Header.

osc product listing css div

3. Navigate down to 80 – 84. Find the following three line of codes:

osc product listing css div

Line 80 is the table <td> and </td> cells that used to contain the product listing header. The 4-columns of header is generated one by one with the PHP for loop.

After all columns of the header are generated, the header table is closed by the </tr> and </table> tags, with the lines 83 and 84.

The header of Product Listing is very simple. You can easily convert it into CSS Div layer.

We will start the customization with more difficult part - product listing contents.

4. Navigate to line 91 – 144. The codes are something like below:

$prod_list_contents .= '  <div class="ui-widget-content ui-corner-bottom productListTable">' .
'    <table border="0" width="100%" cellspacing="0" cellpadding="2" class="productListingData">';
…………………………………………………………………………………………….
…………………………………………………………………………………………….
…………… Many <tr> and <td> tags here  ……………………..………
………………………………………………………………………………………………
……………………………………………………………………………………………..
$prod_list_contents .= '      </tr>';
}
$prod_list_contents .= '    </table>' .
</div>' .


As you can see, the HTML table is contained within a Div layer. Within the Div layer is the contents of products listing. The products listing is using a 4-columns HTML table to contain the contents.

Moreover the product list contents ($prod_list_contents) are actually generated with the PHP while and for loop, column by column, and then row by row.

If you wish to maintain the original design (4-columns table design), and convert the whole HTML table into Div layers, you can simply replace the HTML Table <tr>, <td>, </td> and </tr> tags with <div> and </div>. This should be not too difficult to do that but it takes some times.

We will doing a lot with the above block of codes.

Let's continue with the customization.

5. Navigate to line 92. Find the HTML table opening tag.

' <table border="0" width="100%" cellspacing="0" cellpadding="2" class="productListingData">';

6. Remove the HTML <table> tag within the single quote carefully, as shown in the diagram below.

osc product listing css div

7. Navigate to line 97. Find the HTML table <tr> row opening tag.

$prod_list_contents .= ' <tr>';

8. Remove HTML table <tr> tag. Be sure to keep the single quotes.

9. Navigate to line 140. Find the HTML table </tr> row closing tag.

$prod_list_contents .= ' </tr>';

10. Remove the HTML table </tr> tag, and keep the single quotes.

11. Navigate to line 143. Find the closing HTML table tag.

$prod_list_contents .= ' </table>' .

12. Again, remove HTML </table> closing tags and keep the single quotes.

Now the HTML Table <table>, </table> opening tags and <tr>, </tr> row tags have been removed. The picture is much simple and much easier to study. We can now focus mainly on the the codes generating the table columns (cells) that contain the product listing contents.

The product listing contents are generating in a rather slugish way. Each column cell in a row will generate a content (e.g. product image, product name, product price and buy now button) with different case conditions.

case 'PRODUCT_LIST_MODEL':
...........
..........

case 'PRODUCT_LIST_MANUFACTURER':
............
............

case 'PRODUCT_LIST_PRICE':
............
............

case 'PRODUCT_LIST_QUANTITY':
............
............

case 'PRODUCT_LIST_WEIGHT':
............
............

case 'PRODUCT_LIST_IMAGE':
............
............

case 'PRODUCT_LIST_BUY_NOW':
............
............

When all columns (product listing contents) in a row are generateded, it will start a new row.

Now, we will use Div layers to contain the product listing contents. In other words, the whole HTML table will be removed. Let’s see how to do that.

New Layout of Div Layers

The new layout of the Div Layers was drawn, and illustrated clearly on the diagram below.

osc product listing css div

Let’s see how to do it step by step. This is not too difficult but it need concentration.

13. Navigate to line 97 again. This is the line that was used for the <tr> row opening tag before.

$prod_list_contents .= ' ';

14. Use it for the Outer Div Layer opening tag.

$prod_list_contents .= '<div class="outerDiv">';

15. Navigate down to line 140 again. This is the line that was used for the </tr> row closing tag before.

$prod_list_contents .= ' ';

16. Use it for the Outer Div Layer closing tag.

$prod_list_contents .= '</div>';

The next step is to write Styles for the Outer Div Layer.

17. Open catalog/stylesheet.css with a text editor.

18. Append the styles of Outer Div Layer to the end of stylesheet.css.

.outerDiv {
border:2px solid #FF0000;
border-bottom: 1px solid #eeeeee;
height:160px;
padding: 5px;
margin-bottom:10px;
}

For illustration, a red border is added to outerDiv layer.

Set the height according to the size of your small image. We just set to 160 pixels in this tutorial.

Things become even much simple now. The next thing we need to do is to generated the product contents into the Div layers.

19. Navigate to line 99 – 138.

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
        switch ($column_list[$col]) {
          case 'PRODUCT_LIST_MODEL':
             …………………………………
            break;
          case 'PRODUCT_LIST_NAME':
…………………………………

            break;
          case 'PRODUCT_LIST_MANUFACTURER':
             ………………………………………
            break;
          case 'PRODUCT_LIST_PRICE':
            ……………………………………………
            break;
          case 'PRODUCT_LIST_QUANTITY':
             ……………………………………………
            break;
          case 'PRODUCT_LIST_IMAGE':
            …………………………………………………..
            break;
          case 'PRODUCT_LIST_BUY_NOW':
            …………………………………………………….
            break;
        }
      }

This is the for loop that used to generated the product listing contents column by column.

The first idea is to maintain the original file structure and replace all <td></td> tags with <div> and <div>. It seems the safest, easiest and straight forward way to do that. I believe that most osCommerce designers are using this method.

Actually I don't like the original file structure that using the tedious for loop to generated the product listing contents column by column. The process is very slow if there are many products listing on this page. If there are 50 products, the for loop will runs for 200 times (4 columns x 50 rows) to listing out all products. The process will consume a lot of resources of the server, and in fact slow down the whole process.

I have another good idea. I wish to generate the contents in one step rather columns by columns.

This should be possible. Let’s try it.

Since there are a lot of case conditions, this is quite tedious to modify all the codes within the PHP for loop during the trial and error stage. A better idea is to remove most of the codes during the testing.

20. Remove all codes within the switch condition except the “case 'PRODUCT_LIST_IMAGE':”, i.e.

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
switch ($column_list[$col]) {
case 'PRODUCT_LIST_IMAGE':
$prod_list_contents .= ' <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;

}
}

Remember to save a copy of product_listing.php file. We need to copy some codes back later.

You have already modified a lot of codes. This is better to see if there is any problem with the coding up to now.

21. Refresh browser to see if there is any error with the PHP codes.

osc product listing css div

So far so good! Everything seems on the right track. We can continue with the customization.

22. Layout the other Div layers by rewritting the "case 'PRODUCT_LIST_IMAGE':"

For illustration and easy to be explained, we only layout all empty Div layers.

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
        switch ($column_list[$col]) {
           case 'PRODUCT_LIST_IMAGE':

$prod_list_contents .= '
<div class="outerLeftDiv">'.     
                                                        '<div class="innerLeftDiv">Inner Left Div</div>' .
                                                        '<div class="innerRightDiv">Inner Right Div</div>' .
                                                     '</div><!-- end outerLeftDiv -->' .

                                                     '<div class="outerRightDiv">' .
                                                        "Outer Right Div" .
                                                     '</div><!-- end outerRightDiv -->';

            break;


        }
      }

Don’t worry about the contents. Just concentrate on the layout at this moment. The contents can easily be copied back later.

The next step is to write styles for all the Div layer.

Don’t care too much about the dimensions. They can be easily adjusted later.

23. Write styles for the Div Layers.

.outerLeftDiv {
float: left;
width: 300px;
height:150px;
border:2px solid #336699;
}

.innerLeftDiv {
width: 130px;
height:150px;
background-color: #D8F781;
float: left;
}

.innerRightDiv {
width: 170px;
height: 150px;
background-color: #DBA901;
float: right;
}

.outerRightDiv {
float: right;
width: 360px;
height:150px;
border:2px solid #336699;
}

24. Refresh browser to see the changes. Everything looks good.

osc product listing css div

Actually the width of the four Inner Div layers can be different to match the header and contents. This can easily be done in the stylesheet. To simplify the process of this tutorial, we will make the width of Inner Divs in Outer Right Div same as those in Outer Left Div.

25. Also layout the Inner Left Div and Inner Right Div to Outer Right Div.

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
        switch ($column_list[$col]) {
           case 'PRODUCT_LIST_IMAGE':

$prod_list_contents .= '
<div class="outerLeftDiv">'.     
                                                        '<div class="innerLeftDiv">Inner Left Div</div>' .
                                                        '<div class="innerRightDiv">Inner Right Div</div>' .
                                                     '</div><!-- end outerLeftDiv -->' .

                                                     '<div class="outerRightDiv">' .
                                                          '<div class="innerLeftDiv">Inner Left Div</div>' .
                                                        '<div class="innerRightDiv">Inner Right Div</div>' .

                                                     '</div><!-- end outerRightDiv -->';

            break;


        }
      }

26. Also adjust the styles of the Div layer to match the width of product listing contents.

.outerLeftDiv {
float: left;
width: 330px;
height:150px;
border:2px solid #336699;
}

.innerLeftDiv {
width: 150px;
height:150px;
background-color: #D8F781;
float: left;
}

.innerRightDiv {

width: 170px;
height: 150px;
background-color: #DBA901;
float: right;
}

.outerRightDiv {
float: right;
width: 330px;
height:150px;
border:2px solid #336699;
overflow: auto;
}

27. Refresh browser to see the changes again.

osc product listing css div

The HTML table of product listing contents has been changed to CSS Div layers successfully. The next step is to copy the contents back to the corresponding Inner Div layer.

That’s why you need to save a copy of product_listing.php file before deleted the contents.

Copy the product listing contents back to the corresponding Div layer one by one. Let's do it one by one.

Product Image

28. Copy the codes of Product Image back to Inner Left Div Layer of Outer Left Div Layer.

if (isset($HTTP_GET_VARS['manufacturers_id'])  && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
$prod_list_contents .= ' <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 {
$prod_list_contents .= ' <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>';
}

The codes of product image should be inserted inside the innerLeftDiv Div Layer, as shown in the diagram below:

osc product listing css div

29. Refresh browser to see the results. The product listing image has been inserted into the Div layer successfully.

osc product listing css div

The next step is to copy the codes of product name to Inner Right Div

Product Name

30. Copy the codes of product listing name back to Inner Right Div.

if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
$prod_list_contents .= ' <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 {
$prod_list_contents .= ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a>';
}

The codes of product name should be inserted inside the innerRightDiv Div Layer, as shown in the diagram below:

osc product listing css div

31. Refresh browser to see the results. The product listing name has also been inserted into the Div layer successfully.

osc product listing css div

Product Price and Buy Now Button

32. Repeat the same procedures. Copy the product price and buy now button back to the Inner Left Div and Inner Right Div of Outer Right Div.

The processes are the same as the product image and product name. Therefore we do not repeat the process again.

When you are done. The product listing price and buy now button should be display as shown in the diagram below:

osc product listing css div

You can now modifying the looks and feels of the product listing contents easily by editing the styles of the Div layers.

As you can see, this is really not too difficult to change or convert the HTML table of product listing to CSS Div layers. You can stop here if you are satisfied with the result.

BUT WAIT!!!

As we mentioned earlier that the default design of product listing contents of osCommerce store are generate column by column, and row by row. Frankly speaking, the process is quite sluggish, slow and consume a lot resources of server.

Actually, we can just modify the codes a little bit and the process will be improved a lot.

Let's review and recall the codes generating the product listing contents that we mentioned before:

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
        switch ($column_list[$col]) {
          case 'PRODUCT_LIST_MODEL':
             …………………………………
            break;
          case 'PRODUCT_LIST_NAME':
…………………………………

            break;
          case 'PRODUCT_LIST_MANUFACTURER':
             ………………………………………
            break;
          case 'PRODUCT_LIST_PRICE':
            ……………………………………………
            break;
          case 'PRODUCT_LIST_QUANTITY':
             ……………………………………………
            break;
          case 'PRODUCT_LIST_IMAGE':
            …………………………………………………..
            break;
          case 'PRODUCT_LIST_BUY_NOW':
            …………………………………………………….
            break;
        }
      }

 

You should know that now. This block of codes are used to generate the product listing contents column by column with the PHP for loop.

The default design of each row of product listing contents has 4 columns. In other words, the above block of codes will run 4 times in order to generate the 4 columns of contents.

for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
………………………………………….
……… Runs 4 times ……………
……......................................
}

The picture should be very clear now. The SAME contents (product picture, product name, product price, buy now button and product description) in the same row will generate 4 times! This is really a huge waste of resources and slow down the whole process drastically!

Therefore we actually need the for loop to run ONE times, not 4 times.

Okay! Let’s fix this problem. This should be very easy to do that as we studied the codes extensively before.

33. Navigate to about line 99. Find this line of codes.

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

34.  To make the for loop to run only ONE time, simple change the $n to 1.

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

Now, the for loop will only run one time.

35. Refresh browser to see the changes. The result is the same

However the process should runs much faster. Before modifying the codes, the codes run 8 times (4 columns x 2 rows) to display the 2 rows of products. Now it runs only 2 times to display the 2 rows (Divs) of products. This will be a huge difference if there are 50 products!!!

osc product listing css div

Of course the next step you need to do is to remove the border and background color of the Div layers, and edit the styles of the Div layers. You may also change the product listing header to CSS Div layers, or simply change the column width to match the contents. I am sure that you can do it by yourself after reading this tutorial.

This is the end of osCommerce Product listing page CSS Div layer customization.