Page 1 of 1

size and color drop-down menus

Posted: Tue Feb 17, 2009 7:28 pm
by natsucow
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


I am very new to php and mysql. I am working on an ecommerce website that will sell products, some of will need to have options for size and color. This part gets tricky.

Here is the relavant db structure (not all)

products (table)
- productID (primary)
- product_details_id
- product_name
- price
- available_size
- available_color

productdetails (table)
- productDetailID (primary)
- product_id
- size_id
- color_id
- inventory

size (table)
- sizeID (primary)
- size_name

color(table)
- colorID (primary)
- color_name

So I have a page that shows the thumbs of all the products in the database. When the visited clicks a product it will bring them to the product details page. This is the page I am working on. Here is my recordset:

Code: Select all

$varProduct_rsDetails = "1";
if (isset($_GET['productID'])) {
  $varProduct_rsDetails = $_GET['productID'];
}
mysql_select_db($database_connLeading, $connLeading);
$query_rsDetails = sprintf("SELECT products.category_id, products.product_details_id, products.`description`, products.image, products.onSale, products.price, products.available_size, products.available_color, products.productID, products.product_name, products.Features1, products.Features2, products.Features3, products.Features4, productdetails.product_id, productdetails.color_id, productdetails.size_id, productdetails.inventory, size.sizeID, size.size_name, color.colorID, color.color_name FROM products, productdetails, size, color WHERE productdetails.size_id = size.sizeID AND productdetails.color_id = color.colorID AND productdetails.inventory > 0 AND products.productID = productdetails.product_id AND products.productID = %s", GetSQLValueString($varProduct_rsDetails, "int"));
$rsDetails = mysql_query($query_rsDetails, $connLeading) or die(mysql_error());
$row_rsDetails = mysql_fetch_assoc($rsDetails);
$totalRows_rsDetails = mysql_num_rows($rsDetails);
Here is the form I have created with the drop-down menus and the buy now paypal button.

Code: Select all

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<?php if($row_rsDetails['available_size']==1) { ?>
   <p>Please choose a size: <br />
     <span id="spryselect1">
       <select name="Sizes" id="Sizes">
         <option value="1" <?php if (!(strcmp(1, 1))) {echo "selected=\"selected\"";} ?>>--choose one--</option>
         <?php
do {  
?>
         <option value="<?php echo $row_rsDetails['product_details_id']?>"<?php if (!(strcmp($row_rsDetails['product_details_id'], 1))) {echo "selected=\"selected\"";} ?>><?php echo $row_rsDetails['size_name']?></option>
<?php
} while ($row_rsDetails = mysql_fetch_assoc($rsDetails));
  $rows = mysql_num_rows($rsDetails);
  if($rows > 0) {
      mysql_data_seek($rsDetails, 0);
      $row_rsDetails = mysql_fetch_assoc($rsDetails);
  }
?>
       </select>
       <span class="selectRequiredMsg">Please select a size.</span></span></p>
<?php } ?>
<?php if($row_rsDetails['available_color']==1) { ?>
   <p>Please choose a color:<br /> 
     <span id="spryselect2">
     <select name="Colors" id="Colors">
       <option value="1" <?php if (!(strcmp(1, 1))) {echo "selected=\"selected\"";} ?>>--choose one--</option>
<?php
do {  
?><option value="<?php echo $row_rsDetails['product_details_id']?>"<?php if (!(strcmp($row_rsDetails['product_details_id'], 1))) {echo "selected=\"selected\"";} ?>><?php echo $row_rsDetails['color_name']?></option><?php
} while ($row_rsDetails = mysql_fetch_assoc($rsDetails));
  $rows = mysql_num_rows($rsDetails);
  if($rows > 0) {
      mysql_data_seek($rsDetails, 0);
      $row_rsDetails = mysql_fetch_assoc($rsDetails);
  }
?>
     </select>
     <span class="selectRequiredMsg">Please select an item.</span></span></p>
   <?php } ?>
 
 
 
<input type="hidden" name="cmd" value="_xclick"> 
<input type="hidden" name="charset" value="utf-8">
<input type="hidden" name="business" value="psycho_chica@hotmail.com"> 
<input type="hidden" name="item_name" value="<?php echo $row_rsDetails['product_name']; ?>"> 
<input type="hidden" name="item_number" value="<?php echo $row_rsDetails['productID']; ?>"> 
<input type="hidden" name="amount" value="<?php echo $row_rsDetails['price']; ?>"> 
<input type="image" name="submit" border="0" 
src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" 
alt="PayPal - The safer, easier way to pay online"> 
</form>
The best way I can set this up is to use a parent-child javascript dropdown menus. I would like to have a dropdown for size show when products.available_size = 1, then have the drop down menu list each size (productdetails row must have inventory > 0) by using values from productdetails.productDetailID and names from size.size_name. When a productdetails row has more than one row with the same sizeID (could be Large - Blue and Large -Red), the dropdown menu should only list the size once.

Then color set up would be the simular but only list the colors that are available from the chosen size.

I need to make sure the data can be collected from the size and color chosen so i can decrease the inventory on the correct productdetails row. The way I have it set up now is if the product has no size and color options they have one productdetails row with a size_id and color_id of 1 (size table has ColorID (1) color_name (No Color) and same with size.

If this is too hard maybe it would be easier to just have one dropdown that lists both the size and color. eg.
Small - Red
Small - Blue
Large - Red
'' ''

Any help with this would be greatly apprieciated. I've been reading books and forums for weeks and can not figure out how to make this all work.


pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: size and color drop-down menus

Posted: Wed Feb 18, 2009 3:40 am
by wpsd2006
the best answer use ajax
I recomend use "js prototype" well it will add your loading page time for maybe 50ms
lt work perfectly

when you change the value in select box grep the value with onchange=""
then your js function get the value and ajax it ( if you use prototype you can use Ajax.Updater or Ajax.Request ) to php and php do the mysql query than change the formatted result to json style and give it back to the script
from there decode the json result and change your second select option with new Option();

if you have experienced with both code it should be easy just take time :D

Re: size and color drop-down menus

Posted: Wed Feb 18, 2009 2:37 pm
by natsucow
This is the first site I have made that has any kind of dynamic content in it. So I am just learning php and mysql. The solution you gave me sounds way past my skill level. What I have decided to do is have each color have its own product listing (not quite as nice but should be much easier) This way I will only need one drop-down menu to choose the size.

Thank you very much for your reply.