asked on

Issue getting multiple checkbox values into shopping cart

I am integrating a shopping cart (Interspire) onto an existing website.
On my website I have a page where there are multiple options for a single product. The user should be able to click multiple checkboxes and then click Add to Cart. This should then bring them to the shopping cart where all of the items checked off on the product details page are brought into the shopping cart.

I have found that this works fine when there is only one option for a product because all I have to do is right click an item in the shopping cart's Add to Cart button and copy the link and paste it in the action field on the form tag.

However when there are multiple items, I do not know how to put that information into the action field on the form.

Here is a link to the page in development:
http://www.followfocus.com/products/indislider_pro.html

Any help would be greatly appreciated.

scifo_dk

You need to create a loop, the checks all the fields, if they are checked. Something like:

$NumOfCheckboxes = //The number of boxes you have on the form.

for ($i=1; $i<=$NumOfCheckboxes; $i++)
  {
   // If Checkbox nr 1 is checked, insert into cart.
  } 
//Show user the cart

Open in new window

tiabradford1984

ASKER

I created a php file and named it checkbox-form.php. I included your code and replaced $NumOfCheckboxes with the number 8.

I then set the action on the form tag to checkbox-form.php When I click Add to Cart I get a blank page. How and where am I supposed to implement your code? Thanks.

Tia

<?php
$NumOfCheckboxes = 8

for ($i=1; $i<=$NumOfCheckboxes; $i++)
  {
   // If Checkbox nr 1 is checked, insert into cart.
  } 
//Show user the cart


?>

Open in new window

<!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" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="distribution" content="global" />
		<meta name="robots" content="follow, all" />
		<meta name="language" content="en" />
		<title>indiSYSTEM - indiSLIDERpro&trade; 24&quot;</title>
		<link rel="index" title="FollowFocus" href="http://www.followfocus.com/" />
		<meta name="description" content="Welcome to indiSYSTEM.com, Add Camera, Make Film, home of the popular indi products like indiFOCUSpro and indiRAILS." />
		<meta name="keywords" content="indisystem, indifocus, indislider, indirails, maximount, shrig rig, snap gears, indiMATTEpro" />
		<link rel="canonical" href="http://www.followfocus.com/" />
		<link rel="stylesheet" type="text/css" href="../static/css/main.css" media="all" />
		<link rel="stylesheet" type="text/css" href="../static/css/jquery.fancybox-1.3.1.css" media="all" />
>
 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="../static/js/jquery.fancybox-1.3.1.pack.js"></script>




            
			</head>
	<body>
	
	<div id="container">
	
		<div id="menu">
			<a href="http://www.followfocus.com/" id="logo"><!-- blank --></a>		
			<a href="http://www.followfocus.com/" class="home_selected">Home</a>
			<a href="http://www.followfocus.com/products.html" class="products">Products</a>
			<a href="http://www.followfocus.com/products.html" class="about">About</a>
			<a href="http://www.followfocus.com/products.html" class="support">Support</a>
			<a href="http://www.followfocus.com/products.html" class="contact">Contact</a>
            <a href="http://followfocus.com/store/account_orderstatus.php" class="orderstatus">Order Status</a>
            <a href="http://followfocus.com/store/cart.php" class="cart">Cart</a>
			<a href="http://followfocus.com/store/login.php" class="login">Login</a>
		  <div class="end"><!-- blank --></div>
		</div><!--end of menu-->
				<div id="body">
			
			<script type="text/javascript">
				$(document).ready(function() {
					$(".modal_inline").fancybox({
						'titlePosition'		: 'inside',
						'transitionIn'		: 'fade',
						'transitionOut'		: 'fade',
						'overlayShow'		: 'true',
						'overlayOpacity'	:	'0.5',
						'overlayColor'		: '#000',
					});
					$(".inline_photo").fancybox({
						'titlePosition'		: 'inside',
						'transitionIn'		: 'fade',
						'transitionOut'		: 'fade',
						'overlayShow'		: 'true',
						'overlayOpacity'	:	'0.5',
						'overlayColor'		: '#000',
					});
					$('#form').submit(function() {
					  	if($('#productchbox').is(':checked')){
					  		return true;		  	
							  	} else if($('#productchbox8').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox9').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox10').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox11').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox12').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox13').is(':checked')){
					  		return true;	
					  						  	} else if($('#productchbox14').is(':checked')){
					  		return true;	
					  	} else {
					  		  $.fancybox(
					  		  	'<div class="error_msg_modal">Please select the product you wish to buy on the left by checking the box to the right of the product</div>',
								{
									'titlePosition'		: 'inside',
									'transitionIn'		: 'fade',
									'transitionOut'		: 'fade',
									'overlayShow'		: 'true',
									'overlayOpacity'	:	'0.3',
									'overlayColor'		: '#FF0000',
									'hideOnContentClick' : 'true',
								}
					  		  );
					  		return false;
					  	}
					});
				});
			</script>
						<div id="content">
								<h1>indiSLIDERpro</h1>
				<div class="content">
					
					<div id="product_main">
                    <script type="text/javascript" src="swfobject.js"></script>
                    <script type="text/javascript" src="rotatetool.js"></script>

<script type="text/javascript">
var flashvars = {};
flashvars.path = "areeba";
var params = {};
params.scale = "noScale";
params.salign = "lt";
params.allowScriptAccess = "always";
var attributes = {};
attributes.id = "myFlash";
attributes.name = "myFlash";
swfobject.embedSWF("rotateTool.swf", "flashContent", "800", "375", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

<div id="flashwrapper">
<object data="rotateTool.swf" name="myFlash" id="myFlash" type="application/x-shockwave-flash" width="800" height="375">
<param value="noScale" name="scale">
<param value="lt" name="salign">
<param value="always" name="allowScriptAccess">
<param value="path=areeba" name="flashvars">
</object>
</div>
		      </div>
				
					<div id="product_left">
						
        
        
			      <h2>Options &amp; Order</h2>
						<form action="checkbox-form.php" method="post" class="product" id="form">
						<div class="options">
								<div class="itm selected">
									<div class="title">indiSLIDERpro&trade; 24&quot;</div>
									<div class="price">$399.00</div>
									<div class="add"><input type="checkbox" name="product" value="7" id="productchbox" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 36&quot;</div>
									<div class="price">$499.00</div>
									<div class="add"><input type="checkbox" name="product" value="8" id="productchbox8" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 24&quot; w/ Fluid Head</div>
									<div class="price">$449.00</div>
									<div class="add"><input type="checkbox" name="product" value="9" id="productchbox9" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 36&quot; w/ Fluid Head</div>
									<div class="price">$549.00</div>
									<div class="add"><input type="checkbox" name="product" value="10" id="productchbox10" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 24&quot; w/ Half-Ball Adapters</div>
									<div class="price">$534.00</div>
									<div class="add"><input type="checkbox" name="product" value="11" id="productchbox11" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 36&quot; w/ Half-Ball Adapters</div>
									<div class="price">$634.00</div>
									<div class="add"><input type="checkbox" name="product" value="12" id="productchbox12" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 24&quot; w/ Fluid Head &amp; Half-Ball Adapters</div>
									<div class="price">$584.00</div>
									<div class="add"><input type="checkbox" name="product" value="13" id="productchbox13" /></div>
								</div>
															<div class="itm">
									<div class="title">indiSLIDERpro&trade; 36&quot; w/ Fluid Head &amp; Half-Ball Adapters</div>
									<div class="price">$684.00</div>
									<div class="add"><input type="checkbox" name="product" value="14" id="productchbox14" /></div>
								</div>
													</div>
						<div class="order">
							<a href="http://www.followfocus.com/store/cart.php" class="viewcart">View Cart</a>
							<input type="submit" name="submit" />
						</div>
						</form>
					</div>
					
					
		
		
	</div>
	
	
	</div><!--end of container-->
	</body>
</html>

Open in new window

scifo_dk

You should change the names on the checkboxes, so you have "Product1, Product2 ect." otherwise php don't know which one you mean, when you want the value of product.

I need to see the checkbox-form.php if I should look at whats wrong.

tiabradford1984

ASKER

I put the a number after product name as suggested.

In my previous post the top box contains the code for the checkbox-form.php

scifo_dk

Ok, if I understand you right, then the only code ind the checkbox-form.php file is this, and nothing else?:

<?php
$NumOfCheckboxes = 8

for ($i=1; $i<=$NumOfCheckboxes; $i++)
  {
   // If Checkbox nr 1 is checked, insert into cart.
  } 
//Show user the cart
?>

Open in new window

Member_2_4694817

Since you use product[] as the names of the checkboxes, you should find that $_REQUEST['product'] is an array. If the <checkbox name="product[] value="123"/> is checked upon submission, you should find that one of the entries in the array is "123"

$allselectedproducts = $_REQUEST['product'];
foreach($allselectedproducts as $runningindex => $productid) {
  // add the product with id $productid to your shopping cart, or for demo purposes:
  echo "Selection #$runningindex is about product $productid.";
}

Open in new window

tiabradford1984

ASKER

scifo dk,

Yes that is the only info I have in the php file and nothing else.

tiabradford1984

ASKER

thehangman,

I think I am getting closer. I have uploaded the page and the php files to the love site. Now when I click multiple items I get a new page that comes up and says

Selection #0 is about product 11.Selection #1 is about product 12.Selection #2 is about product 13.Selection #3 is about product 14.

So, how do I get these items to add to the shopping cart?

The path to cart is http://www.followfocus.com/store/cart.php

I apologize for my real lack of knowledge in this area.

ASKER CERTIFIED SOLUTION

tiabradford1984

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

James Murrell

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.