Add line between product listings

[jeu4328]

Hello:

 

Can someone please help me? I've been looking for an answer for the past 5 hours and cannot find one that is current and applies to osC 2.3.3

 

I would like to add a line between each of the products on the product lsiting page. I purchased a book "Deep Inside osCommerce: The Cookbook" hoping to finally have a resource that will answer my designing questions. However, it refers to column_right.php ... and that file is no longer available on the newer version of osC. I'm really frustrated ... several hours and several dollars later I am still not able to add a line to separate my products. :P

 

If someone could please tell me how to easily make this change I would truly appreciate your help.

 

Thank you so much,

Jewell

[jeu4328]

Is there anyone who can help me with this issue? :(

Thank you,

Jewell

[Jack_mcs]

The file you would want to change is includes/modules/product_listing.php. It should be similar to the one in the book you have, though I've not seen that. That file is often changed by templates so if yours has been changed, the book wouldn't apply anyway. But if you change this line

  $prod_list_contents .= '	  </tr>';

to

  $prod_list_contents .= '	  </tr><br>';

it might do what you want. It would be better to use css and that may not be the correct place (I haven't tried it) but it's in the neighborhood. :)

[jeu4328]

Thank you very much for your response.

I will give it a try.

Jewell

[jeu4328]

Hi again. I made the suggested change and it doesn't seem to do anything.

 

I would like to have a visible line which separates each of the products.

 

I would prefer to make the change in the CSS Stylesheet if there is a way to do it.

 

Any other suggestions?

 

Thank you,

Jewell

[burt]

The book you purchased is around 3 years out of date. The ideas in it are still valid, but the code shown in it is for older versions of oscommerce.

 

$prod_list_contents .= '      <tr class="line">';

 

.line {
 border-bottom: 1px solid black;
}

 

Might work. Untested.

[jeu4328]

Hi, Burt:

 

I appreciate your response, but I'm not sure where to go to make those changes.

 

Are you saying go to includes/modules/product_listing.php and change $prod_list_contents .= ' </tr>';

to $prod_list_contents .= ' <tr class="line">'; ?

 

I am not sure where you want me to go to enter the second code. I tried entering it right after the above change, and that gave me an error.

Does that go somewhere in the CSS Stylesheet or another file?

 

 

I obviously have no clue what I am doing ... I have no training in writing code. Any clarification would be very appreciated.

 

Thank you for your patience!

Jewell

[♥14steve14]

What happens if you replace

 

$prod_list_contents .= ' </tr>';

 

with

 

$prod_list_contents .= ' </tr><hr>';

 

<hr> will give you a horizontal line across the page, you might then have to play with the positioning of the <hr> in the code, and then you can use things like <hr width="300"> to make a line 300 pixels long.

 

Or you could do something like @@burt suggests by adding a class to the tr and then styling it using css in your stylesheet.

[jeu4328]

Hi, Steve: Thank you for your response.

 

When I follow your instructions and make the change at Line 82; it creates a line above the word "Product Name".

If changed at Line 96; it creates several lines below the Product Name heading, and above all of the products listed.

I've tried placing <hr> in several other places within the page and I am not able to find the location where it would add the line between each item.

 

I've also tried doing as Burt suggested, making the change on Line 82 and then on 96, without success.

 

Any other suggestions?

 

Thank you,

Jewell

 

<?php

/*

$Id$

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2010 osCommerce

 

Released under the GNU General Public License

*/

 

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

?>

 

<div class="contentText">

 

<?php

if ( ($listing_split->number_of_rows > 0) && ( (PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3') ) ) {

?>

 

<div>

<span style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></span>

 

<span><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></span>

</div>

 

<br />

 

<?php

}

 

$prod_list_contents = '<div class="ui-widget infoBoxContainer">' .

' <div class="ui-widget-header ui-corner-top infoBoxHeading">' .

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

' <tr>';

 

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

$lc_align = '';

 

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);

}

 

$prod_list_contents .= ' <td' . (tep_not_null($lc_align) ? ' align="' . $lc_align . '"' : '') . '>' . $lc_text . '</td>';

}

 

$prod_list_contents .= ' </tr>' .

' </table>' .

' </div>';

 

if ($listing_split->number_of_rows > 0) {

$rows = 0;

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

 

$prod_list_contents .= ' <div class="ui-widget-content ui-corner-bottom productListTable">' .

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

 

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

$rows++;

 

$prod_list_contents .= ' <tr>';

 

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

switch ($column_list[$col]) {

case 'PRODUCT_LIST_MODEL':

$prod_list_contents .= ' <td>' . $listing['products_model'] . '</td>';

break;

case 'PRODUCT_LIST_NAME':

if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {

$prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';

} else {

$prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . $listing['products_name'] . '</a></td>';

}

break;

case 'PRODUCT_LIST_MANUFACTURER':

$prod_list_contents .= ' <td><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing['manufacturers_id']) . '">' . $listing['manufacturers_name'] . '</a></td>';

break;

case 'PRODUCT_LIST_PRICE':

if (tep_not_null($listing['specials_new_products_price'])) {

$prod_list_contents .= ' <td align="right"><del>' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</del>  <span class="productSpecialPrice">' . $currencies->display_price($listing['specials_new_products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</span></td>';

} else {

$prod_list_contents .= ' <td align="right">' . $currencies->display_price($listing['products_price'], tep_get_tax_rate($listing['products_tax_class_id'])) . '</td>';

}

break;

case 'PRODUCT_LIST_QUANTITY':

$prod_list_contents .= ' <td align="right">' . $listing['products_quantity'] . '</td>';

break;

case 'PRODUCT_LIST_WEIGHT':

$prod_list_contents .= ' <td align="right">' . $listing['products_weight'] . '</td>';

break;

case 'PRODUCT_LIST_IMAGE':

if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {

$prod_list_contents .= ' <td align="center"><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></td>';

} else {

$prod_list_contents .= ' <td align="center"><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></td>';

}

break;

case 'PRODUCT_LIST_BUY_NOW':

$prod_list_contents .= ' <td align="center">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id'])) . '</td>';

break;

}

}

 

$prod_list_contents .= ' </tr>';

}

 

$prod_list_contents .= ' </table>' .

' </div>' .

'</div>';

 

echo $prod_list_contents;

} else {

?>

 

<p><?php echo TEXT_NO_PRODUCTS; ?></p>

 

<?php

}

 

if ( ($listing_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3')) ) {

?>

 

<br />

 

<div>

<span style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $listing_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?></span>

 

<span><?php echo $listing_split->display_count(TEXT_DISPLAY_NUMBER_OF_PRODUCTS); ?></span>

</div><br><hr color #000000>

 

<?php

}

?>

 

</div>

[♥joli1811]

Hi,

Burt was mainly right just add / change to css (stylesheet) about line 126

 

.productListTable tr.alt td {

border-bottom: 1px solid black;

border-top: 1px solid black;

}

 

although dashed instead of solid may better suit the design

you can of course also change the colour.

Regards

Joli

[jeu4328]

Thank you, John: That worked!!! :D

 

Thank you to everyone, a million times over! Without your help I would not have been able to do this!!! :thumbsup:

 

Have a fantastic day!

Jewell

[jeu4328]

In the event that someone stumbles upon this conversation and would like to add a dividing line between products, I ended up adding the following to my css Spreadsheet:

 

 

.productListTable tr.alt td {

border-bottom: 1px solid #F7EDA7;

border-top: 1px solid #F7EDA7;

}

 

I added a little space at the top and bottom of each image because it was just a little too cramped otherwise. I did this by entering the following in the css Stylesheet right after the coding above:

 

.productListTable tr td {

padding: 5px;

}

 

I made the line just dark enough to add definition to the list of products.

 

These changes are the only ones that were made. I did not make any changes in includes/modules/product_listing.php

 

Thanks again to everyone who helped me accomplish my goal! :thumbsup:

Jewell