Product Listing Modification

[martinstan]

Hi all

I'm putting a store together and would like to achieve a certain look to it. I've gone some way to achieving this but would appreciate a bit of feedback and help. I want my product listing to be in boxes and columns not the default layout of oscommerce. Something like this:

 

Ok so far I've got ot this:

 

Here's what I've done:

1)Created 2 new productListing-data classes in the stylesheet:

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 background-color: #FFF;
 font-size: 10px;
 width: 40%;
}
TD.productListing-data2 {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background-image:url(images/product_bg_bottom.jpg);
 background-repeat:no-repeat;
 width: 40%;
 text-align:center;
}
TD.productListing-data3 {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background-image:url(images/product_bg.jpg);
 background-repeat:no-repeat;
 width: 40%;
 text-align:center;
}

 

2)Created two images for the main panel and the bottom of the panel and set these as background images.

3)Installed the product_listing_coloumns_2_2_5 contribution and altered the classes on the product_listing_col.php file accordingly eg:

 

		$lc_text = implode('<br>', $product_contents);
	$list_box_contents[$row][$column] = array('align' => 'center',
											//bof product listing with attributes
											'valign' => $lc_valign,
											//eof product listing with attributes
											//2.2 modification ,add width in td
										  'params' => 'class="productListing-data3" width="'.$tdsize.'%"',
										  'text'  => $lc_text);

 

OK what I've come up with kind of works, but it's very basic and really doesn't give any flexibility in layout within the boxes..for instance I'm sure if I added a short product description module it would break.

 

Can anyone more experienced either tell me that I've missed a trick and that there's a contibution out there for exactly what I'm after? Or can some pick this up from where I am with it now and run with it a little.

Many thanks

[prafulkr]

Hi all

I'm putting a store together and would like to achieve a certain look to it. I've gone some way to achieving this but would appreciate a bit of feedback and help. I want my product listing to be in boxes and columns not the default layout of oscommerce. Something like this:

 

Ok so far I've got ot this:

 

Here's what I've done:

1)Created 2 new productListing-data classes in the stylesheet:

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 background-color: #FFF;
 font-size: 10px;
 width: 40%;
}
TD.productListing-data2 {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background-image:url(images/product_bg_bottom.jpg);
 background-repeat:no-repeat;
 width: 40%;
 text-align:center;
}
TD.productListing-data3 {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background-image:url(images/product_bg.jpg);
 background-repeat:no-repeat;
 width: 40%;
 text-align:center;
}

 

2)Created two images for the main panel and the bottom of the panel and set these as background images.

3)Installed the product_listing_coloumns_2_2_5 contribution and altered the classes on the product_listing_col.php file accordingly eg:

 

		$lc_text = implode('<br>', $product_contents);
	$list_box_contents[$row][$column] = array('align' => 'center',
											//bof product listing with attributes
											'valign' => $lc_valign,
											//eof product listing with attributes
											//2.2 modification ,add width in td
										  'params' => 'class="productListing-data3" width="'.$tdsize.'%"',
										  'text'  => $lc_text);

 

OK what I've come up with kind of works, but it's very basic and really doesn't give any flexibility in layout within the boxes..for instance I'm sure if I added a short product description module it would break.

 

Can anyone more experienced either tell me that I've missed a trick and that there's a contibution out there for exactly what I'm after? Or can some pick this up from where I am with it now and run with it a little.

Many thanks

 

You need to change css file as well as that table where product list shows accordingly then that will show like you want

[martinstan]

Hi

thanks for your reply. I'm not sure quite what you mean though.

What I'm really getting at is some kind of flexibility with the layout within the boxes, maybe the product name to display at the top, product image to one side etc..