Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Border around the productimage


Zuncan

Recommended Posts

Posted

:lol: Hi

 

I was just wondering if anyone know how to ad a border around the images in the productlisting. In my case a pink border. Where n what shall I modify?

 

Cheers! / Zuncan

So what?! Who care in a hundred years anyway?

Posted

Zuncan -

 

Regarding your post about finding a look you like: I suggest going to the live shops pages and seeing what other folks have done.

 

http://www.oscommerce.com/shops/live

 

Sites range from the barely-more-than-the-default-install:

 

http://www.mediterraneangourmetcompany.com/

 

to the total redesign, just using oscommerce as a back end:

 

http://www.chifactory.net/

 

Look at other sites, too - not just oscommerce sites.

 

You've probably already done all of this, I know.

 

Regarding your real question - what you want to look at is the file called product_listing.php in catalog/includes/modules. There's a section that starts at row 90 and runs up to row 140 or so.

 

        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';
           $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);
     }

 

Look at the source for the product listing page; then go through this section of product_listing.php and find where the code is getting written out.

 

On my site, I use a contribution called "product listing in columns," which uses a file called product_listing_cols.php to do what the product_listing.php file does. I tweaked a section of this file so it looks like this:

 

$lc_text= '<table border="0" cellspacing="10"><tr><td align="center" width="' . $width . '" valign="top" class="thumb"><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></td></tr><tr><td class="smallText" align="center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing_values['products_id']) . '">' . $listing_values['products_name'] . '</a>';
$lc_text .= ' </td></tr></table>';

 

This outputs an image listing that looks like this:

 

<table border="0" cellspacing="10">
<tr>
<td align="center" width="" valign="top" class="thumb">
<a href="http://www.pearlseacompany.com/product_info.php?products_id=92">
<img src="images/lobster-set-100x100.jpg" border="0" alt="Lobster Enamelware" title=" Lobster Enamelware " width="100" height="100"></a>
</td>
</tr>
<tr>
<td class="smallText" align="center">
<a href="http://www.pearlseacompany.com/product_info.php?products_id=92">Lobster Enamelware</a> </td>
</tr>
</table>

 

The main thing I added, I think, is the <td class="thumb"> business. In the style sheet, I gave the "thumb" class a border:

 

td.thumb { border: 1px solid pink }

 

You could do the same with the entire table to have a border around the title as well.

 

I hope this helps -

 

Michael

Posted
:lol: Hi

 

I was just wondering if anyone know how to ad a border around the images in the productlisting. In my case a pink border. Where n what shall I modify?

 

Cheers! / Zuncan

they is a contribution for this... have a look in contribution above

Posted

Yoba! That was alot of code. Neat! I have the contribution for displaying products in columns installed, but there is still no border around the products.

So what?! Who care in a hundred years anyway?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...