Product Catalogue with individual product page

mysql popup window

[icemozy]

Hi

I'm fairly new to php coding, so this may be alot easier than i think it is, hopefully someone can help me...
Im making a products catalogue for a site with a mysql database and php.

I've got a 1st page with product categories, which produce a list of product names and images after clicking through the form. This part works fine, but on the product list page, I want to be able to click on an individual product and have a popup window appear with details of the selected product.

I can't work out how to get the popup window to display the details of the selected product.

All the details I want to show in the window are separate columns in the mysql dbase: productID(primarykey), productName, description, volume, units, picture.

Here is my coding for the products list:

$cxn = mysqli_connect($host,$user,$password,$dbname) or die ("couldn't connect to server");
$query = "SELECT * FROM impulse WHERE impulseCategory=\"{$_POST['interest']}\"";
$result = mysqli_query($cxn,$query) or die ("Couldn't execute query.");
echo "<table cellspacing='10' border='0' cellpadding='0' width='100%'>";
echo "<tr><td colspan='5' style='text-align: right'> Click on any picture to see more details. <hr /></td></tr>\n";
while($row = mysqli_fetch_assoc($result))
{
echo "<tr\>\n";
echo " <td><img src='images/impulse/{$row['pic']}' border='0' width='100' height='100' /></td>\n";
echo " <td style='font-weight: bold; font-size: 1.1em'>{$row['productName']}</td>\n";
echo " <td>{$row['productDescription']}</td>\n";
echo "<tr><td colspan='5'><hr /></td></tr>\n";
}
echo "</table>\n";

I'm not sure how I could get the popup window the "know" what product has been selected, so it can display the right data.

I think I may need to use a POST command, but I don't know how it would fit into the code.

Sorry for the long-winded query, it is difficult to word...

Any help would be greatly appreciated.

Thanks

[eelixduppy]

Put an onClick event on whatever you want them to be able to click. And within that you are going to have to pass it the product ID so that it knows what data to fetch. So for example:

echo '... onclick="productPopup('.$row['productID'].')" ... >Produce Name here </...>';

Then in your javascript function you are either going to need to send an XML request and grab the data asynchronously, or open an actual popup script that loads the product using GET variables, etc... Either case is highly doable, though. If you need further help, just ask. :)

Oh, and Welcome to WebmasterWorld!

[rocknbil]

To expand on that . . .

First, you need to make sure your detail link will "work" whether or not Javascript is enabled, otherwise your detail pages will not get indexed in results. As you look at this, note the anchors I've added.

In truth, I would not use a pop up, I'd just go to a detail page, but this is not real important - IF you make the link accessible when JS is disabled.

echo "<tr\>\n";
echo " <td><a href=\"myscript.php?view=detail&amp;id=\"" . $row['rec_id'] . "\" onClick=\"return productWindow('myscript.php?view=detail&amp;id=" . $row['productID'] . "');\"> <img src='images/impulse/{$row['pic']}' border='0' width='100' height='100' /></a></td>\n";
echo " <td style='font-weight: bold; font-size: 1.1em'>{$row['productName']}</td>\n";
echo " <td>{$row['productDescription']}" . "<a href=\"myscript.php?view=detail&amp;id=\"" . $row['productID'] . "\" onClick=\"return productWindow('myscript.php?view=detail&amp;id=" . $row['rec_id'] . "');\"> . . . More Details</a> . "</td>\n";
echo "<tr><td colspan='5'><hr /></td></tr>\n";

You can see by my link how the value of the item gets passed to "productWindow":

<a href="myscript.php?view=detail&amp;view=detail&amp;id=3" onClick="return productWindow('myscript.php?view=detail&id=3');">

function productWindow(url) {
window.open(url);
return false;
}

This is an oversimplified version of window.open, see Javascript forum for more robust examples.

The important thing there is the return keyword in the onclick and returning false from the function. Return false tells the browser to not perform the ordinary action of the link, allowing Javascript to manage it. This is what "stops" the parent opener page from navigating to the link in href when the new window opens.

However, if Javascript is disabled, guess what? The link still works, and search engines can still follow it.

Now look at my methods, and note how you're not actually opening the database with Javascript, you're passing the url of the PHP script and using the "view" parameter withe the value of "detail" to tell your script to open the detail page.

In your php script,

if ((isset($_GET['view'])) and ($_GET[view'] == 'detail')) {
$output = detail_page();
}

... where your function detail_page() outputs the item details.

So in truth, you don't really even need Javascript here unless you need to control the window size or other attributes. Either of these will do the same thing without Javascript:

<a href="myscript.php?view=detail&amp;id=3" target="_blank">
<a href="myscript.php?view=detail&amp;id=3" target="new window">

Or, just link to the page itself:

<a href="myscript.php?view=detail&amp;id=3">