1 Replies - 3013 Views - Last Post: 05 April 2009 - 10:46 AM

#1 whatevany   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 30-March 08

Make "Shopping Cart" from Drop-Down Menu

Post icon  Posted 04 April 2009 - 07:47 AM

Hi everyone! I am trying to create a shopping cart. I want to enable the user to pick merchandise from a drop-down menu that is linked to the Javascript database. I want the ability for the user to pick multiple items and multiple quantities if desired. Then I want it to be able to calculate the price and display the info for the customer. I do not know how to link the drop-down menu w/the database. Any help would be greatly appreciated! :)


Here is what I got so far:


<html>

<head>

	<title>Order</title>

	<style type="text/css">

	div.title {width:auto;height:70px;text-align:center;font-size:36pt;font-family:"Tahoma";background-color:#ffcccc}

	div.col1 {float:left;width:200px;height:755px;font-size:14pt;background-color:#ffcccc;font-family:"Tahoma"}

	div.col2 {position:absolute;left:440px;top:95px;bottom:0px;width:400px;font-family:"Georgia"}

	</style>

<script type="text/javascript">

	function catalogEntry(sku,des,uco) 
		{
						this.sku=sk

						this.desc=des

						this.ucost= parseFloat(uco)
				} 

				var items = new Array(17)

				items[0] = new catalogEntry("bl1","Wide Leg Trousers (Black) 7/8", "79.99")

				items[1] = new catalogEntry("bl2","Wide Leg Trousers (Black) 9/10", "79.99")

				items[2] = new catalogEntry("be1", "Wide Leg Trousers (Beige) 7/8", "79.99")

				items[3] = new catalogEntry("be2", "Wide Leg Trousers (Beige) 9/10", "79.99")

				items[4] = new catalogEntry("cr1", "Cropped Pants (Red) 5/6", "45.99")

				items[5] = new catalogEntry("cr2", "Cropped Pants (Red) 7/8", "45.99")

				items[6] = new catalogEntry("cb1", "Cropped Pants (Black) 5/6", "45.99")

				items[7] = new catalogEntry("cb2", "Cropped Pants (Black) 7/8", "45.99")

				items[8] = new catalogEntry("dblu1", "Cropped Denim Jeans (Blue) 5/6", "39.99")

				items[9] = new catalogEntry("dblu2", "Cropped Denim Jeans (Blue) 7/8", "39.99")

		items[10] = new catalogEntry("dblu3", "Cropped Denim Jeans (Blue) 9/10", "39.99")

		items[11] = new catalogEntry("dbl1", "Cropped Denim Jeans (Black) 5/6", "39.99")

				items[12] = new catalogEntry("dbl2", "Cropped Denim Jeans (Black) 7/8", "39.99")

		items[13] = new catalogEntry("dbl3", "Cropped Denim Jeans (Black) 9/10", "39.99")

		items[14] = new catalogEntry("csg1", "Cargo Shorts (Green) 5/6", "25.00")

		items[15] = new catalogEntry("csg2", "Cargo Shorts (Green) 7/8", "25.00")

		items[16] = new catalogEntry("csk1", "Cargo Shorts (Khaki) 5/6", "25.00")

		items[17] = new catalogEntry("csk2", "Cargo Shorts (Khaki) 7/8", "25.00")


				function getForm1() 
		{
						
						var d = document.catalogInfo

						return d
				}

				function displayItem(item) 
		{
						var d = getForm1()

						d.descBox.value = item.desc

						qty = parseFloat(d.quantBox.value)

			d.subtotalBox.value ="$" + parseFloat(qty * item.ucost)

						tot = qty * (item.ucost*1.07)

						d.totalCostBox.value =  "$" + tot
				}

				
				function displaySearch() 
		{
						var d = getForm1()

						for (i=0; i<=9; i++)
			 {
								if (items[i].sku==d.skuBox.value) 	
				{
										displayItem(items[i])

										break
								}
						}
				}
				
		</script>
 	
</head>



<body>


	<div class="title">

	Laura's Fashions

	</div>

	<div class="col1">
	
	<ul>
		

		<li>
		
		<strong> Home </strong>

		</li>
		
		<li>
	
		<a href="pants.html">

		<strong> Pants </strong>

		</a>

		</li>

		<li>

		<a href="contactUs.html">	

		<strong> Contact Us </strong>
		
		</a>

		</li>
	</ul>

	</div>

   <div class="col2">


	<strong> Please Select: </strong>

	<br/>

	<select name="purchaseMenu">

		<option> Wide Leg Trousers, Black, 7/8, $79.99 </option>

		<option> Wide Leg Trousers, Black, 9/10, $79.99 </option>

		<option> Wide Leg Trousers, Beige, 7/8, $79.99 </option>

		<option> Wide Leg Trousers, Beige, 9/10, $79.99 </option>

		<option> Cropped Pants, Red, 5/6, $45.99 </option>

		<option> Cropped Pants, Red, 7/8, $45.99 </option>

		<option> Cropped Pants, Black, 5/6, $45.99 </option>

		<option> Cropped Pants, Black, 7/8, $45.99 </option>

		<option> Cropped Denim Jeans, Blue, 5/6, $39.99 </option>

		<option> Cropped Denim Jeans, Blue, 7/8, $39.99 </option>

		<option> Cropped Denim Jeans, Blue, 9/10 , $39.99 </option>

		<option> Cropped Denim Jeans, Black, 5/6, $39.99 </option>

		<option> Cropped Denim Jeans, Black, 7/8, $39.99 </option>

		<option> Cropped Denim Jeans, Black, 9/10 , $39.99 </option>

		<option> Cargo Shorts, Green, 5/6, $25.00 </option>
		
		<option> Cargo Shorts, Green, 7/8, $25.00 </option>

		<option> Cargo Shorts, Kahki, 5/6, $25.00 </option>
		
		<option> Cargo Shorts, Khaki, 7/8, $25.00 </option>
		
		
	</select>
							
	 	 		
   </div>

</body>

</html>





Is This A Good Question/Topic? 0
  • +

Replies To: Make "Shopping Cart" from Drop-Down Menu

#2 JMRKER   User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Make "Shopping Cart" from Drop-Down Menu

Posted 05 April 2009 - 10:46 AM

This does not do all you want yet, but take a look and use what you can.
The 'multiple' selections is pretty easy to add.
The total display is available from the selections made.
<html>
<head>
<title>Order</title>

<style type="text/css">
div.title {
	width:auto;height:70px;text-align:center;font-size:36pt;font-family:"Tahoma";background-color:#ffcccc}
div.col1 {
	float:left;width:200px;height:755px;font-size:14pt;background-color:#ffcccc;font-family:"Tahoma"}
div.col2 {
	position:absolute;left:440px;top:95px;bottom:0px;width:400px;font-family:"Georgia"}
</style>

<script type="text/javascript">
// From: http://www.dreamincode.net/forums/showtopic97244.htm

var itemTrousers = [
	["bl1","Wide Leg Trousers (Black) 7/8", "79.99"],
	["bl2","Wide Leg Trousers (Black) 9/10", "79.99"],
	["be1", "Wide Leg Trousers (Beige) 7/8", "79.99"],
	["be2", "Wide Leg Trousers (Beige) 9/10", "79.99"]
];
var itemPants = [
	["cr1", "Cropped Pants (Red) 5/6", "45.99"],
	["cr2", "Cropped Pants (Red) 7/8", "45.99"],
	["cb1", "Cropped Pants (Black) 5/6", "45.99"],
	["cb2", "Cropped Pants (Black) 7/8", "45.99"]
];
var itemJeans = [
	["dblu1", "Cropped Denim Jeans (Blue) 5/6", "39.99"],
	["dblu2", "Cropped Denim Jeans (Blue) 7/8", "39.99"],
	["dblu3", "Cropped Denim Jeans (Blue) 9/10", "39.99"],
	["dbl1", "Cropped Denim Jeans (Black) 5/6", "39.99"],
	["dbl2", "Cropped Denim Jeans (Black) 7/8", "39.99"],
	["dbl3", "Cropped Denim Jeans (Black) 9/10", "39.99"],
];
var itemShorts = [
	["csg1", "Cargo Shorts (Green) 5/6", "25.00"],
	["csg2", "Cargo Shorts (Green) 7/8", "25.00"],
	["csk1", "Cargo Shorts (Khaki) 5/6", "25.00"],
	["csk2", "Cargo Shorts (Khaki) 7/8", "25.00"]
];
var items = [];
	items = items.concat(itemTrousers,itemPants,itemJeans,itemShorts);

function getForm1() {
  var d = document.catalogInfo;
  return d;
}

var itemNames = ['|All','1|Trousers','2|Pants','3|Jeans','4|Shorts'];

function populateItemNames(indx) {
  var d = getForm1();
  var vi, vo;
  var tmp = [];
  for (var i=0; i<itemNames.length; i++) {
	tmp = itemNames[i].split('|');
	vo = tmp[0];  vi = tmp[1];
	d.purchaseNames.options[i] = new Option(vi,vo);
  }
}

function populateCatalog(arrNumber) {
  var d = getForm1();
  var vi, vo;
  var itemArray = [];
  d.purchaseMenu.options.length = 0;
  switch (arrNumber) {
	case 1 : itemArray = itemTrousers; 	break;
	case 2 : itemArray = itemPants; 	break;
	case 3 : itemArray = itemJeans;		break;	
	case 4 : itemArray = itemShorts;	break;
	default : itemArray = items; 		break;		  
  }
//  if (arrNumber == 0) { return; }
  for (var i=0; i<itemArray.length; i++) {
	vo = itemArray[i][0]+', '+itemArray[i][1]+', '+itemArray[i][2];
	vi = itemArray[i][1]+', '+itemArray[i][2];
	d.purchaseMenu.options[i] = new Option(vi,vo);
  }
}

var itemsPicked = [];
function setItemsPicked() {
  var d = getForm1();
  for (var i=0; i<d.purchaseMenu.length; i++) {
	if (d.purchaseMenu.options[i].selected == true) {
	  itemsPicked.push(d.purchaseMenu.options[i].value);
	}  
  }
}
function Summary() {
  var total = 0;
  var str = '<p><h3>Selected Items</h3>'; 	// +itemsPicked.join('<br>');
  str += '<table border="0">';
  for (var i=0; i<itemsPicked.length; i++) {
	tmp = itemsPicked[i].split(',');
	str += '<tr><td>'+tmp[1]+'</td><td align="right">'+tmp[2]+'</td></tr>';
	total += Number(tmp[2]);
  }
  str += '<tr><td align="right">Total</td><td align="right">'+total.toFixed(2)+'</td></tr>';
  str += '</table>'
  document.getElementById('selectedItems').innerHTML = str;
}

function clearItemsPicked() { itemsPicked = []; }

function getOption(info) {
  var sel = info.selectedIndex;
  alert(info.name+' : '+sel+' : '+info.options[sel].value);
}

window.onload=populateItemNames;

</script>
	 
</head>
<body>
  <form name="catalogInfo" action="java script:alert('Success')" onsubmit="return false;">
   <div class="title">Laura's Fashions</div>
   <div class="col1">
	 <ul>
	   <li><strong> Home </strong></li>
	   <li><a href="pants.html"><strong> Pants </strong></a></li>
	   <li><a href="contactUs.html"><strong> Contact Us </strong></a></li>
	 </ul>
   <div>

   <div class="col2">
	<select name="purchaseNames" onchange="populateCatalog(this.selectedIndex)"></select>
	<strong> Please Select: </strong>
	<select multiple name="purchaseMenu">
<script type="text/javascript">populateCatalog()</script>
	</select>
	<br><span>Shift- or Ctrl- Click for multiple enties</span>
	<br><button onclick="setItemsPicked()">Save List</button>
	<button onclick="Summary()">List Summary</button>
	<button onclick="clearItemsPicked()">Clear List</button>
<!--	<button onclick="getOption(document.catalogInfo.purchaseMenu)">Current</button> -->
   <div id="selectedItems"></div>
   </div>
  </form>
</body>
</html>


You might want to change the selections to use "checkboxes" instead of the drop down menu as it would be easier for the user to see and change their choices.

Use what you can... Good Luck!
:)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1