CSS Product Listings

Add stylesheet control to the layout and design of the category product listings on the index. No new files or database changes required.

Demo

Step 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 //////

Step 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;}

Step 3

In includes/modules/product_listing.php:
about line 68 comment out the following.
ie change:


'params' => 'class="productListing-heading"',
'text' => ' ' . $lc_text . ' ');

to

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

and change:


new productListingBox($list_box_contents);

to:


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

also posted on the OSCommerce forum under ‘Tips and Tricks’: CSS Product Listings

One thought on “CSS Product Listings

Comments are closed.