Changing InfoBoxe <TABLE>s to <DIV>s

[furiousweebee 0]

Hello,

 

I have recently set up osCommerce 2.2rc1 for the first time, and installed the STS contribution. I'm trying to simplify my page by using DIV containers instead of the current TABLE structure. I've tried countless times to modify the "catalog\includes\classes\boxes.php" file, but to no avail. I can use PHP to some degree, but as the code is not commented, and in particular I'm not that familiar with arrays, I'm having trouble working out what to do.

 

Essentially, I want to end up with a structure like this:

 

<div class="catalog_box">
<span>$right_arrow</span>
<div>$headertext</div>
<p>$content</p>
</div>

 

where $right_arrow is the text/image displayed at the top of the box (its container SPAN floats to the right), the $headertext is the title of the box, and the $content is the information inside the box. The overall wrapper for each box, "catalog_box" is a bordered box with a bottom margin to add vertical space between it and the following box.

 

I would have thought this was simply a matter of changing the function tableBox() so that it was a DIV instead of TABLE, and then changing the following functions so that only the content remained (no alignment or other parameters):

 

infoBoxHeaderTemplate();

infoBoxTemplate();

infoBox();

infoBoxContents();

infoBoxHeading();

contentBox();

contentBoxContents();

contentBoxHeading();

 

Also, and this may sound like a very stupid question at this point in time, what's the difference between an InfoBox and a ContentBox?

 

Any help would be greatly appreciated. Below is the current tableBox() function.

 

function tableBox($contents, $direct_output = false) {
	$tableBox_string = '<table border="' . tep_output_string($this->table_border) . '" width="' . tep_output_string($this->table_width) . '" cellspacing="' . tep_output_string($this->table_cellspacing) . '" cellpadding="' . tep_output_string($this->table_cellpadding) . '"';
	if (tep_not_null($this->table_parameters)) $tableBox_string .= ' ' . $this->table_parameters;
	$tableBox_string .= '>' . "\n";

	for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
		if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= $contents[$i]['form'] . "\n";
		$tableBox_string .= '<tr';
		if (tep_not_null($this->table_row_parameters)) $tableBox_string .= ' ' . $this->table_row_parameters;
		if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) $tableBox_string .= ' ' . $contents[$i]['params'];
		$tableBox_string .= '>' . "\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'])) {
					$tableBox_string .= '<td';
					if (isset($contents[$i][$x]['align']) && tep_not_null($contents[$i][$x]['align'])) $tableBox_string .= ' align="' . tep_output_string($contents[$i][$x]['align']) . '"';
					if (isset($contents[$i][$x]['valign']) && tep_not_null($contents[$i][$x]['valign'])) $tableBox_string .= ' valign="' . $contents[$i][$x]['valign'] . '"'; // Added in v4.4
					if (isset($contents[$i][$x]['params']) && tep_not_null($contents[$i][$x]['params'])) {
						$tableBox_string .= ' ' . $contents[$i][$x]['params'];
					} elseif (tep_not_null($this->table_data_parameters)) {
						$tableBox_string .= ' ' . $this->table_data_parameters;
					}
					$tableBox_string .= '>';
					if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= $contents[$i][$x]['form'];
					$tableBox_string .= $contents[$i][$x]['text'];
					if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= '</form>';
					$tableBox_string .= '</td>' . "\n";
				}
			}
		} else {
			$tableBox_string .= '	<td';
			if (isset($contents[$i]['align']) && tep_not_null($contents[$i]['align'])) $tableBox_string .= ' align="' . tep_output_string($contents[$i]['align']) . '"';
			if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) {
				$tableBox_string .= ' ' . $contents[$i]['params'];
			} elseif (tep_not_null($this->table_data_parameters)) {
				$tableBox_string .= ' ' . $this->table_data_parameters;
			}
			$tableBox_string .= '>' . $contents[$i]['text'] . '</td>' . "\n";
		}

		$tableBox_string .= '	</tr>' . "\n";
		if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= '</form>' . "\n";
	}

	$tableBox_string .= '</table>' . "\n";

	if ($direct_output == true) echo $tableBox_string;

	return $tableBox_string;
}

[bkellum 31]

Take a look at the following contribution:

 

http://www.oscommerce.com/community/contributions,3980

[furiousweebee 0]

Thanks, but that contribution only seems to apply to the page structure, not the structure of the infoBoxes. My page (template) code is actually far more simplified than that contribution as well. ;)

[furiousweebee 0]

For anyone who's interested, I've now done this. Here is the code to use your own DIV instead of TABLE code on infoBoxes (includes\classes\boxes.php):

 

class tableBox {

// class constructor
function tableBox($contents, $direct_output = false) {

	$tableBox_string = '';

	for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
		if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= $contents[$i]['form'] . "\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'])) {
					if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= $contents[$i][$x]['form'];
					$tableBox_string .= $contents[$i][$x]['text'] . "\n";
					if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $tableBox_string .= '</form>';
				}
			}
		} else {
			$tableBox_string .= $contents[$i]['text'];
		}

		if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $tableBox_string .= "\n" . '</form>' . "\n";
	}

	if ($direct_output == true) echo $tableBox_string;

	return $tableBox_string;
}

 

I then use the following structure for my infoBoxes in the STS "full" template (includes\sts_templates\full\boxes\infobox.php.html):

 

<div class="catalog_box">
$right_arrow
<h1>$headertext</h1>
$content
</div>

[bkellum 31]

Grant,

Sorry, I misunderstood your first request regarding this. I'm glad you stuck with it and got what you were looking for.

 

This is very good! Would you consider packaging this as an STS add-on and upload it to the STS Power Pack site? I don't want your efforts getting lost in these forums. I think other STS users would find this very useful.

 

Here is the link:

 

http://www.oscommerce.com/community/contributions,4456

 

The above site is dedicated to all things related to STS that will help other STS users get the most out of using the Simple Template System. I think your efforts would fit in nicely! Good Job!

 

Also, I think I will add this into the next STS release. :thumbsup:

[furiousweebee 0]

I'll have to get back to you on that, as I'm still fine-tuning a lot of other elements on the page. I've completely ditched the table-based layout of the standard template and used floating DIV containers instead. I've also eliminated almost all of the existing classes assigned to breadcrumbs, category links, and so on. My index page (includes\sts_templates\full\index.php) currently looks like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html $htmlparams>

<head>
<!--$headcontent-->
<link rel="stylesheet" type="text/css" media="all" href="some_stylesheet.css" />
<script type="text/javascript" src="some_javascript.js"></script>
</head>

<body>

<div id="header">

Logo etc here

</div>

<div id="catalog_navigation">

<div class="float_r align_r">$myaccountlogoff | $cartcontents | $checkout</div>

<div>$breadcrumbs</div>									

</div>				

<div class="clear"></div>

<div id="catalog_left">
$categorybox
$searchbox
$specialbox
$whatsnewbox
</div>

<div id="catalog_center">

$content

</div>

<div id="catalog_right">
$cartbox
$orderhistorybox
$bestsellersbox
$reviewsbox
$tellafriendbox
$informationbox
</div>

<div id="footer">

© 2007 Company Name

</div>

</body>
</html>

 

I'll let you know when I've finished everything... might take a couple of weeks because I'll have to work out what I've changed, and in which files.

[ElectricStudio.co.uk 0]

I'll let you know when I've finished everything... might take a couple of weeks because I'll have to work out what I've changed, and in which files.

 

I'm just about to start doing the same thing for a clients website, do you ave any updates on this? I'm particularly interested in removing all table code from boxes.php.

 

Any help would be greatly appreciated. :thumbsup:

[Guest]

Hi

I just did my install and started playing around to see how I could tweak my site.

 

And when I hit my first snag I landed here via search.

 

basically what I started with was make a copy of the sts template, create a new folder for it and start modifuying.

I started top down, and created a div on the top , made it just 80% wide and to contain the logo + the icons for my account, cart and check out, that was a simple switch and tweak.

 

I then wanted to add the cartbox in tehre as well.

 

Now that is where I hit the firts problem.

I dont know here I can find the file where this cartbox is defined.

 

So any info on how you proceedded or where to look and so on wouold be very much appreciated.

 

Sami

[Guest]

Hi

anyone wants to have a look my store is here:

http://www.clubandstreetwear.com/

 

the colors and lines are there for my development purposes.

 

as you can see I have only done the simplest alignments using divs.

 

at the moment I have no idea where I could find for example the file that defines the cart box, as I would like to attempt to try and manipulate the cart box presentation, if I can really get on top of it I could start working on my layout properly.I would love that challenge but for the moment I am stuck (and its late here..)

It would also help if someone could tell me that when I see this in my template file code: $footer_text

where does it reference to?

If I wanted to edit the text for example.

Same same for: $cartbox

I cant find the file that this bit references to.

 

thanks in advance for any help

 

Sami