"build a product" page 'how-to' suggestions

turpentyne · July 31, 2012

A somewhat general question. Being a beginner, I think I painted myself into a corner. Imight not have thought through what/how to do what I'm doing.

What I'm trying to do is build a page of 5 categories of options. These are contingent on the previous choice. You make a choice from category one, and the form auto-reloads the page in order to change what will appear in category 2 - and populate a box next to the choices so they can see what they've chosen so far. Then category 3 shows it's options, based on the restraints from category 2 - and so on.

I got so caught up in trying to get the open/close functionality, and getting the data to simply populate the divs (thanks greatly to some help from ChristianF - I'm starting to learn a little about sprintf and templates.)

But did I paint myself into a corner?

Looking at the code below, is there a way to salvage what I've got to do this? Maybe there is, maybe it just seems daunting. I don't know what to do from here. gah! I'm soooo minor-league!

<?php 
include("dbc.php");


$query  = "SELECT tbl_component_categories.ID, tbl_component_categories.folder_path, tbl_component_categories.comp_cat_name, tbl_components.component_name, tbl_components.image_filepath, tbl_components.component_category

FROM tbl_components

JOIN tbl_component_categories ON tbl_components.component_category = tbl_component_categories.ID
ORDER BY tbl_components.component_category";
$result = mysql_query($query);

$category = false;

// CF: Using sprintf () and templates makes things a whole lot easier to read.
$ExpandTemplate = <<<OutHTML
<div id="%1\$s" style="width:550px;padding-top:20px;">

<a class='select-toggler' href="javascript:showHide('%2\$s-expander');">
<img style="position:relative;top:-2px;" src="images/structural/red-plus.gif" /> %1\$s </a><br>
<div id="%2\$s-expander" style="float:left;padding-right:25px;display:none;" width="90">
OutHTML;


$ExpandImageTemplate = <<<OutHTML
<div style='width:140px;padding:10px;float:left;'> %4\$s <br><img src='%3\$s'></div> 
OutHTML;

$ExpandImageTafter = <<<OutHTML
</div>
OutHTML;

$JSVariables = '';  


// and here's the loop that creates the page
$Output = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


<body>
<div id="builder-box-entire-code">

<div style="float:left;">


<form>

<div>



';
while ($row = mysql_fetch_assoc ($result)) {




if ($category != $row['component_category']) {
$category = $row['component_category'];	
if (!$firstime) {

$Output .= '</div><br><br>';

} else {
$firstime = true;
}


//CF: Changed output to be stored in a temp variable, as well as adding output escaping to prevent XSS etc.
$Output .= sprintf ($ExpandTemplate, htmlspecialchars ($row['comp_cat_name']), htmlspecialchars ($row['folder_path']));


$JSVariables .= "'".htmlspecialchars ($row['folder_path']). "-expander', ";


}


//CF: Changed output to be stored in a temp variable, as well as adding output escaping to prevent XSS etc.
$Output .= sprintf ($ExpandImageTemplate, htmlspecialchars ($row['comp_cat_name']),htmlspecialchars ($row['folder_path']),htmlspecialchars (rawurlencode ($row['image_filepath'])),htmlspecialchars ($row['component_name']));



}
$finaljsstring = substr_replace($JSVariables ,"",-2);



?>







<?php



echo $Output;

?>

<div id="main-text" style="width:350px;float:left;">



<!-- 

uncomment & change when style sheet is pulled to its own file

<link rel="stylesheet" type="text/css" href="x.css" />
-->






  <p> <a class="select-toggler" href="#"> <img src="images/structural/view-my-rifle.gif" /></a></p>
  <hr />
  
  <a class="select-toggler" href="#"> <img src="images/structural/redo-arrow.gif" style="position:relative;top:-2px;"/> START OVER</a>

</div>

<!-- end selector divs container div -->

</form>

<!-- start 'your selections' div container div -->

<div id="results-box" style="float:right;">
   <div style="background-color:#000; padding:1px 10px 10px 10px ; ">
   <p class="selector-paragraphs-header">YOUR SELECTIONS:</p>

<p class="selector-paragraphs"> Action: <span id="span-action" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Barrel: <span id="span-barrel" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Length: <span id="span-length" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Trigger: <span id="span-trigger" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Bolt: <span id="span-bolt" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Pistol Grip: <span id="span-pistol-grip" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Magazine: <span id="span-magazine" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Hand Guard: <span id="span-hand-guard" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Suppressor: <span id="span-suppressor" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Muzzle Brake: <span id="span-muzzle-brake" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Accessory Rail Mounts: <span id="span-accessory-rail-mounts" class="chosen-data">x</span>
</p>


<p class="selector-paragraphs"> Finish: <span id="span-finish" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Weight: <span id="span-weight" class="chosen-data">x</span>
</p>

<p class="selector-paragraphs"> Carry Case: <span id="span-carry-case" class="chosen-data">x</span>
</p>
</div>

<p id="price"> <span id="total-span">TOTAL:</span> $xxxxxx</p>
<p id="send-specs"> SEND SPECS <img src="images/structural/green-arrow.gif" /></p>


</div>
  <!-- end 'your selections' divs container div -->
  
  </div>

<SCRIPT LANGUAGE="JavaScript1.2">

function showHide(d)
{
var onediv = document.getElementById(d);
var divs=[<?php echo $finaljsstring; ?>];
for (var i=0;i<divs.length;i++)
  {
  if (onediv != document.getElementById(divs[i]))
    {
    document.getElementById(divs[i]).style.display='none';
    }
  }
onediv.style.display = 'block';
}

</script>

</body>
</html>

Nodral · August 1, 2012

I'd be looking to populate the boxes with a simple ajax call back to a php script, based on what is selected in the previous box.

Do some Googling for it, it's pretty straight forward

Sign In

"build a product" page 'how-to' suggestions

Recommended Posts

turpentyne

Link to comment

Share on other sites

Nodral

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information