Quantity box with plus and minus buttons

Patty · June 26, 2009

Hi guys!

I'm looking for a way to mix together these two contributions:

1- Quantity box with plus and minus buttons

http://addons.oscommerce.com/info/6369

and

2- Fast Update to Shopping Cart Quantity

http://addons.oscommerce.com/info/4209

What I'm trying to accomplish is to be able to change the product quantity on the shopping cart without reloading the page like #1 does using AJAX, which is not implemented on #2.

I'm no programmer but I'm a fast learner. Can a good soul please give me a hand on this? It will be useful to a lot of people, I'm sure.

I'll be eternally grateful! :)

Tks in advance!

♥ecartz · June 27, 2009

Does the plus/minus buttons contribution actually update the cart without a page refresh? Or does it instead update the page and then you submit the quantity when you click the add to cart button (which refreshes the page)?

And the fast update contribution submits the page every time you delete a product or change the quantity, right? So you want to be able to make all your quantity updates before updating the cart (like you would normally do)? There might be user confusion in that they will have changed the quantity on the page but never submitted the page so that it is not updated on the server.

What happens on a delete? Should it update the quantities? Or just delete the item? I think that the way it works now, you would have to update the quantities, just as if you had clicked the update cart button. Or you would need to remove the instant delete so that it only deletes when you click on the update cart button (the original way that the cart worked). Or you would need to redo the instant delete functionality (unfortunately without help from the plus/minus contribution, which doesn't deal with multiple products).

Does it sound like I'm understanding what you want to do? I haven't used these particular contributions previously, so I may be misunderstanding somewhere.

Patty · June 27, 2009

Hey, Matt. Tks for your reply. Here are the answers:

Does the plus/minus buttons contribution actually update the cart without a page refresh? Or does it instead update the page and then you submit the quantity when you click the add to cart button (which refreshes the page)?

Since it works on the product_info page, it will not update the cart, just the quantity. You still have to click the add to cart button.

And the fast update contribution submits the page every time you delete a product or change the quantity, right? So you want to be able to make all your quantity updates before updating the cart (like you would normally do)? There might be user confusion in that they will have changed the quantity on the page but never submitted the page so that it is not updated on the server.

Correct, it does submit the page when changing quantities and removing product.

The ideal would be to update the page AND database without reloading.

What happens on a delete? Should it update the quantities? Or just delete the item? I think that the way it works now, you would have to update the quantities, just as if you had clicked the update cart button. Or you would need to remove the instant delete so that it only deletes when you click on the update cart button (the original way that the cart worked). Or you would need to redo the instant delete functionality (unfortunately without help from the plus/minus contribution, which doesn't deal with multiple products).

The plus/minus contribution works on the product info page, the fast update works on the shopping cart.

Delete should only delete that one product and remove it from the cart. I think it's OK that it submits the page, no need for AJAX here. AJAX would be only for updating the quantity in the cart as does the plus/minus contribution on the product page.

Thank you! :)

♥ecartz · June 27, 2009

To get most of what you want, you could change the fast update contribution, the section of code that currently says:

<script type="text/javascript">
function UpdateCartQuantity()
{
  document.cart_quantity.submit();
}
function changeQuantity(i,qty)
{
 	document.cart_quantity['qty_'+i].value = Number(document.cart_quantity['qty_'+i].value)+Number(qty);
	UpdateCartQuantity();
}

function confSubmit(form) {
if (confirm("Are you sure you want to delete this item?")) {
form.submit();
}

else {
alert("You decided to not delete the item.");
}
}

function check(checkboxid) {  
document.getElementById(checkboxid).checked = "checked";  

}  
</script>

to say

<script language="JavaScript1.2">
function check(checkboxid) 
{  
	document.getElementById(checkboxid).checked = "checked";  
}  

function changeQuantity(i,qty)
{
 	var quantity = Number(document.cart_quantity['qty_'+i].value)-qty;

 	if (quantity <= 0) { 
 		quantity = 0;
 		check('checkbox['+i+']');
 	}

 	document.cart_quantity['qty_'+i].value = quantity;
}
</script>

and

 'text' => tep_draw_checkbox_field('cart_delete[]', $products[$i]['id'], '', 'onClick="confSubmit(this.form);" id="checkbox['.$products[$i]['id'].']"'));

to say

 'text' => tep_draw_checkbox_field('cart_delete[]', $products[$i]['id'], '', 'id="checkbox['.$products[$i]['id'].']"'));

and

if ($products[$i]['quantity']==1) {
$minus_field = tep_image(DIR_WS_IMAGES . 'minusBtn.gif', IMAGE_BUTTON_REMOVE_PRODUCT, '', '',  'onclick="java script:check(\'checkbox['.$products[$i]['id'].']\'); java script:document.cart_quantity.submit();"');
} else {
$minus_field = '<a href="java script:changeQuantity("'.$products[$i]['id'].'",-1)">'.tep_image(DIR_WS_IMAGES .'minusBtn.gif').'</a>';
}
  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" nowrap valign="top"',
										 'text' => $minus_field . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" onChange="UpdateCartQuantity();" id="qty_'.$products[$i]['id'].'"').'<a href="java script:changeQuantity("'.$products[$i]['id'].'", 1)">'.tep_image(DIR_WS_IMAGES .'plusBtn.gif').'</a>'. tep_draw_hidden_field('products_id[]', $products[$i]['id']));

to instead say:

	  $minus_field = '<a href="java script:changeQuantity("'.$products[$i]['id'].'",-1)">'.tep_image(DIR_WS_IMAGES .'minusBtn.gif').'</a>';
  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" nowrap valign="top"',
										 'text' => $minus_field . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" onChange="UpdateCartQuantity();" id="qty_'.$products[$i]['id'].'"').'<a href="java script:changeQuantity("'.$products[$i]['id'].'", 1)">'.tep_image(DIR_WS_IMAGES .'plusBtn.gif').'</a>'. tep_draw_hidden_field('products_id[]', $products[$i]['id']));

What this would give you would be a shopping cart page where you could update the quantity by clicking on the plus or minus buttons. The page would only refresh when you clicked update cart. There is a slight regression in the delete functionality, as it will only update the cart when you click update cart (previously updated when you clicked the checkbox).

The next step, if you want to take it, would be to build a true AJAX request handler (what this and the plus/minus contribution does is just javascript DOM manipulation, not actual AJAX) to handle the remove from cart action. This would require making a new page called something like remove_product_from_cart.php that would generate an XML response on success or failure. You could then use some basic javascript DOM manipulation (like at http://w3schools.com/js/tryit.asp?filename...table_deleterow ) to remove the product from the page if successful. To learn more about AJAX, you could check out http://w3schools.com/ajax/default.asp

Patty · June 27, 2009

Thank you so much for your help, Matt! Really nice of you! :)

Unfortunatelly, when I click the +/- button on the shopping cart I get the following error on the next page:

Access forbidden!

You don't have permission to access the requested object. It is either read-protected or not readable by the server.

If you think this is a server error, please contact the webmaster.

Error 403

localhost

06/27/09 19:24:37

Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color PHP/5.2.8

Would you be so kind to help me find what's causing the error??

Tks in advance.

♥ecartz · June 27, 2009

Is there a link to your store floating around?

When you say the next page, do you mean the reload of the shopping cart page or a different page? On which link or button are you clicking?

Patty · June 27, 2009

I was testing on my local machine actually. But there's a testing store online that I just updated the shopping_cartp.php with the changes you suggested, so you can try.

http://www.cybernetfx.com.br/loja3.0

When I click the +/- button the page reloads and then I get the page not found error.

I'm going to paste my shopping_cart.php file here, for it's a little modified, maybe that's what's causing the problem.

Again, tks a lot for your help, Matt! :)

<?php
/*
 $Id: shopping_cart.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2007 osCommerce

 Released under the GNU General Public License
*/

 require("includes/application_top.php");

 if ($cart->count_contents() > 0) {
include(DIR_WS_CLASSES . 'payment.php');
$payment_modules = new payment;
 }

 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_SHOPPING_CART);

 $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_SHOPPING_CART));
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re
sizable=no,copyhistory=no,width=500,height=310,screenX=150,screenY=250')
}
//--></script>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->
<script language="JavaScript1.2">
function UpdateCartQuantity()
{
  document.cart_quantity.submit();
}
function changeQuantity(i,qty)
{
 	document.cart_quantity['qty_'+i].value = Number(document.cart_quantity['qty_'+i].value)+Number(qty);
	UpdateCartQuantity();
}

function confSubmit(form) {
if (confirm("Tem certeza de que quer deletar este ítem? / Are you sure you want to delete this item?")) {
form.submit();
}

else {
alert("Você decidiu não deletar este ítem. / You decided to not delete the item.");
}
}

function check(checkboxid) {  
document.getElementById(checkboxid).checked = "checked";  

}  
</script>
<!-- body //-->
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
<!-- body_text //-->
<td width="100%" valign="top">

<?php // ISM start
require (DIR_WS_INCLUDES . 'skin_top.php'); 
// ISM end ?>

	<?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_SHOPPING_CART, 'action=update_product')); ?><table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
		<td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_cart.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
 if ($cart->count_contents() > 0) {
?>
  <tr>
	<td>
<?php
$info_box_contents = array();
$info_box_contents[0][] = array('align' => 'center',
								'params' => 'class="productListing-heading"',
								'text' => TABLE_HEADING_REMOVE);

$info_box_contents[0][] = array('params' => 'class="productListing-heading"',
								'text' => TABLE_HEADING_PRODUCTS);

$info_box_contents[0][] = array('align' => 'center',
								'params' => 'class="productListing-heading"',
								'text' => TABLE_HEADING_QUANTITY);
 $info_box_contents[0][] = array('align' => 'center',
								'params' => 'class="productListing-heading"',
								'text' => TABLE_HEADING_WEIGHT);

$info_box_contents[0][] = array('align' => 'right',
								'params' => 'class="productListing-heading"',
								'text' => TABLE_HEADING_TOTAL);

$any_out_of_stock = 0;
$products = $cart->get_products();
for ($i=0, $n=sizeof($products); $i<$n; $i++) {
// Push all attributes information in an array
  if (isset($products[$i]['attributes']) && is_array($products[$i]['attributes'])) {
	while (list($option, $value) = each($products[$i]['attributes'])) {
	  echo tep_draw_hidden_field('id[' . $products[$i]['id'] . '][' . $option . ']', $value);
	  $attributes = tep_db_query("select popt.products_options_name, poval.products_options_values_name, pa.options_values_price, pa.price_prefix, pa.options_values_weight
								  from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_OPTIONS_VALUES . " poval, " . TABLE_PRODUCTS_ATTRIBUTES . " pa
								  where pa.products_id = '" . (int)$products[$i]['id'] . "'
								   and pa.options_id = '" . (int)$option . "'
								   and pa.options_id = popt.products_options_id
								   and pa.options_values_id = '" . (int)$value . "'
								   and pa.options_values_id = poval.products_options_values_id
								   and popt.language_id = '" . (int)$languages_id . "'
								   and poval.language_id = '" . (int)$languages_id . "'");
	  $attributes_values = tep_db_fetch_array($attributes);

	  $products[$i][$option]['products_options_name'] = $attributes_values['products_options_name'];
	  $products[$i][$option]['options_values_id'] = $value;
	  $products[$i][$option]['products_options_values_name'] = $attributes_values['products_options_values_name'];
	  $products[$i][$option]['options_values_price'] = $attributes_values['options_values_price'];
	  $products[$i][$option]['options_values_weight'] = $attributes_values['options_values_weight'];
	  $products[$i][$option]['price_prefix'] = $attributes_values['price_prefix'];
	}
  }
}

for ($i=0, $n=sizeof($products); $i<$n; $i++) {
  if (($i/2) == floor($i/2)) {
	$info_box_contents[] = array('params' => 'class="productListing-even"');
  } else {
	$info_box_contents[] = array('params' => 'class="productListing-odd"');
  }

  $cur_row = sizeof($info_box_contents) - 1;

  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" valign="top"',
										 //'text' => tep_draw_checkbox_field('cart_delete[]', $products[$i]['id']));
										 'text' => '<a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&products_id='.$products[$i]['id']) . '">' . tep_image_button('button_remove.gif', 'Remove') . '</a>');
  $products_weight = $products[$i][weight];

  $products_name = '<table border="0" cellspacing="2" cellpadding="2">' .
				   '  <tr>' .
				   '	<td class="productListing-data" align="center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '">' . tep_image(DIR_WS_IMAGES . $products[$i]['image'], $products[$i]['name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></td>' .
				   '	<td class="productListing-data" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products[$i]['id']) . '"><b>' . $products[$i]['name'] . '</b></a><br /><br />';

  if (STOCK_CHECK == 'true') {
	$stock_check = tep_check_stock($products[$i]['id'], $products[$i]['quantity']);
	if (tep_not_null($stock_check)) {
	  $any_out_of_stock = 1;

	  $products_name .= $stock_check;
	}
  }

  if (isset($products[$i]['attributes']) && is_array($products[$i]['attributes'])) {
	reset($products[$i]['attributes']);
	while (list($option, $value) = each($products[$i]['attributes'])) {
	  $products_name .= '<br /><br /><small><i> - ' . $products[$i][$option]['products_options_name'] . ' ' . $products[$i][$option]['products_options_values_name'] . '</i></small>';
	  $products_weight = $products_weight + ($products[$i][$option]['options_values_weight']);
	}
  }

  $products_name .= '	</td>' .
					'  </tr>' .
					'</table>';

  $info_box_contents[$cur_row][] = array('params' => 'class="productListing-data"',
										 'text' => $products_name);

  //$info_box_contents[$cur_row][] = array('align' => 'center',
//											 'params' => 'class="productListing-data" valign="top"',
//											 //'text' => tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']));
//											 'text' => tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4" onblur="document.cart_quantity.submit();"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']));
if ($products[$i]['quantity']==1) {
$minus_field = tep_image(DIR_WS_IMAGES . 'icons/minus.png', '', '', '',  'onclick="java script:check(\'checkbox['.$products[$i]['id'].']\'); java script:document.cart_quantity.submit();"');
} else {
$minus_field = '<a href="java script:changeQuantity("'.$products[$i]['id'].'",-1)">'.tep_image(DIR_WS_IMAGES .'icons/minus.png').'</a>';
}
  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" nowrap valign="top"',
										 'text' => $minus_field . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="2" onChange="UpdateCartQuantity();" id="qty_'.$products[$i]['id'].'"').'<a href="java script:changeQuantity("'.$products[$i]['id'].'", 1)">'.tep_image(DIR_WS_IMAGES .'icons/plus.png').'</a>'. tep_draw_hidden_field('products_id[]', $products[$i]['id']));

  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => ($products_weight * $products[$i]['quantity']) . WEIGHT_SINGULAR_MEASURE);

  $info_box_contents[$cur_row][] = array('align' => 'right',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => '<b>' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) . '</b>');
}

new productListingBox($info_box_contents);
?>
	</td>
  </tr>
<?php // BEGIN estimated shipping
	if(ESTIMATED_SHIPPING != 'false') {
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '5'); ?></td>
  </tr>
<tr><td align=right cellpadding="2" height=2 colspan="2" class="smallText"><?php echo '<a href="java script:popupWindow(\'' . tep_href_link(FILENAME_POPUP_SHIPPING) . '\')">' . '<img src="images/icons/shipcost.gif" border="0"> ' . TEXT_SHIPPING_COST . '</a>'; ?></td></tr>
<?php			  }
// END estimated shipping  ?>

  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><?php 
	 if (SHIPPING_BOX_WEIGHT >= $cart->show_weight()*SHIPPING_BOX_PADDING/100) {
	  $estimated_shipping_weight = $cart->show_weight()+SHIPPING_BOX_WEIGHT;
	} else {
	  $estimated_shipping_weight = $cart->show_weight() + ($cart->show_weight()*SHIPPING_BOX_PADDING/100);
	}

echo PACKAGE_WEIGHT . $estimated_shipping_weight . ($estimated_shipping_weight == "1" ? WEIGHT_SINGULAR_MEASURE : WEIGHT_MULTIPLE_MEASURE);
?> </td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><b><?php echo SUB_TITLE_SUB_TOTAL; ?> <?php echo $currencies->format($cart->show_total()); ?></b> </td>
  </tr>
<?php
if ($any_out_of_stock == 1) {
  if (STOCK_ALLOW_CHECKOUT == 'true') {
?>
  <tr>
	<td class="stockWarning" align="left"><br><?php echo OUT_OF_STOCK_CAN_CHECKOUT; ?></td>
  </tr>
<?php
  } else {
?>
  <tr>
	<td class="stockWarning" align="left"><br><?php echo OUT_OF_STOCK_CANT_CHECKOUT; ?></td>
  </tr>
<?php
  }
}
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td class="main"><?php echo tep_image_submit('button_update_cart.gif', IMAGE_BUTTON_UPDATE_CART); ?></td>
<?php
$back = sizeof($navigation->path)-3;
if (isset($navigation->path[$back])) {
?>
			<td class="main"><?php echo '<a href="' . tep_href_link($navigation->path[$back]['page'], tep_array_to_string($navigation->path[$back]['get'], array('action')), $navigation->path[$back]['mode']) . '">' . tep_image_button('button_continue_shopping.gif', IMAGE_BUTTON_CONTINUE_SHOPPING) . '</a>'; ?></td>
<?php
}
?>
			<td align="right" class="main"><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image_button('button_checkout.gif', IMAGE_BUTTON_CHECKOUT) . '</a>'; ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
<?php
$initialize_checkout_methods = $payment_modules->checkout_initialization_method();

if (!empty($initialize_checkout_methods)) {
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main" style="padding-right: 50px;"><?php echo TEXT_ALTERNATIVE_CHECKOUT_METHODS; ?></td>
  </tr>
<?php
  reset($initialize_checkout_methods);
  while (list(, $value) = each($initialize_checkout_methods)) {
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><?php echo $value; ?></td>
  </tr>
<?php
  }
}
 } else {
?>
  <tr>
	<td align="center" class="main"><?php new infoBox(array(array('text' => TEXT_CART_EMPTY))); ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td align="right" class="main"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
<?php
 }
?>
</table></form></td>

<?php // ISM start
require (DIR_WS_INCLUDES . 'skin_bottom.php'); 
// ISM end ?>
<!-- body_text_eof //-->
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

♥ecartz · June 27, 2009

It's this line:

	  $minus_field = '<a href="java script:changeQuantity("'.$products[$i]['id'].'",-1)">'.tep_image(DIR_WS_IMAGES .'minusBtn.gif').'</a>';

javascript should be one word, not two (java script).

Not sure how that got there. I don't remember doing anything but copy and past that line. It's definitely in what I posted (both original and modified versions) and not in the original contribution. I would like to claim that the forum must have done it on its own. I'm going to try it again. This time I'll make sure that it isn't there when I submit:

	  $minus_field = '<a href="java script:changeQuantity("'.$products[$i]['id'].'",-1)">'.tep_image(DIR_WS_IMAGES .'minusBtn.gif').'</a>';

Nope, I can see just from the preview that the forum software added a space again. Not in the box where I'm typing now though. The same thing happened with the plus button, so you'll need to delete both spaces.

Patty · June 28, 2009

I would never guessed!!! heheh

Thank you so much for your patience, Matt!

I uploaded the correct shopping_cart.php to that testing store, if you'd like to try now.

Now it does change the quantity, but it won't update the cart. And when I click the update cart button, it empties the cart.

I guess this is not as simple as I imagined... :(

♥ecartz · June 28, 2009

I have the wrong sign in the update quantity function. It currently says

		 var quantity = Number(document.cart_quantity['qty_'+i].value)-qty;

It should say

		 var quantity = Number(document.cart_quantity['qty_'+i].value)+qty;

The plus button was subtracting and the minus button was adding.

There's also an issue with the remove box. What should the behavior be when the remove box is checked but the customer hits the add quantity button? What if they decrease the quantity? A simple solution might be to remove the

			 check('checkbox['+i+']');

line. That would at least fix the problem of the remove box getting set. Wouldn't fix the problem of the customer adjusting the quantity after clicking the remove box.

Patty · June 28, 2009

I have the wrong sign in the update quantity function. It currently says
		 var quantity = Number(document.cart_quantity['qty_'+i].value)-qty;
It should say
		 var quantity = Number(document.cart_quantity['qty_'+i].value)+qty;
The plus button was subtracting and the minus button was adding.

That fixed the empty cart issue when updating cart. Thank you!

There's also an issue with the remove box. What should the behavior be when the remove box is checked but the customer hits the add quantity button? What if they decrease the quantity? A simple solution might be to remove the
			 check('checkbox['+i+']');
line. That would at least fix the problem of the remove box getting set. Wouldn't fix the problem of the customer adjusting the quantity after clicking the remove box.

Well, on the original contribution hitting minus button until 0 would empty the cart. The version I was using wouldn't go to zero and I also used that contribution where there was a remove button instead of the check box, so I really don't know if it behaved the same way.

The only thing I really wanted here was to be able to update the cart without reloading the page. I thought it was a simple hack, but you're going thru all this trouble and it's just updating the quantity box, but not the cart. :(

I didn't mean to give you so much trouble, but I really appreciate your efforts in helping out.

I updated shopping_cart.php with my original one so you can see how it worked.

I also uploaded the product_info page so you can check the quantity behavior.

Edited June 28, 2009 by Patty

♥ecartz · June 28, 2009

I think that to get the weight and price to update, in the javascript, change

<script language="JavaScript1.2">
function check(checkboxid)
{  
	document.getElementById(checkboxid).checked = "checked";  
}  

function changeQuantity(i,qty)
{
	 var quantity = Number(document.cart_quantity['qty_'+i].value)-qty;

	 if (quantity <= 0) {
		 quantity = 0;
		 check('checkbox['+i+']');
	 }

	 document.cart_quantity['qty_'+i].value = quantity;
}
</script>

to

<script type="text/javascript">
function updateCart(id, quantity, old_quantity) 
{
  var product_price = document.getElementById('product_price_'+id).value;
  var product_total_price = quantity * product_price;
  var old_product_total_price = old_quantity * product_price;

  var product_weight = document.getElementById('product_weight_'+id).value;
  var product_total_weight = quantity * product_weight;
  var old_product_total_weight = old_quantity * product_weight;

  var old_total_weight = document.getElementById('total_weight').innerHTML;
  var new_total_weight = old_total_weight + product_total_weight - old_product_total_weight;
  var old_sub_total_price = document.getElementById('sub_total_price').value;
  var new_sub_total_price = old_sub_total_price + product_total_price - old_product_total_price;

  var currency_symbol_left = document.getElementById('currency_symbol_left').value;
  var currency_symbol_right = document.getElementById('currency_symbol_right').value;
  var currency_decimal_places = Number(document.getElementById('currency_decimal_places').value);
  var sub_total_display = currency_symbol_left+new_sub_total_price.toFixed(currency_decimal_places)+currency_symbol_right;
  var product_price_display = currency_symbol_left+product_total_price.toFixed(currency_decimal_places)+currency_symbol_right;

  document.getElementById('product_total_weight_'+id).innerHTML = product_total_weight;
  document.getElementById('product_total_price_'+id).innerHTML = product_price_display;
  document.getElementById('total_weight').innerHTML = new_total_weight;
  document.getElementById('sub_total_price').innerHTML = sub_total_display;
}

function changeQuantity(id,qty)
{
	 var old_quantity = Number(document.cart_quantity['qty_'+id].value);
	 var quantity = old_quantity+qty;

	 if (quantity < 1) {
		 quantity = 1;
	 }

	 if (quantity != old_quantity) {
		 updateCart(id, quantity, old_quantity);
	 }

	 document.cart_quantity['qty_'+id].value = quantity;
}
</script>

Change

	  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => ($products_weight * $products[$i]['quantity']) . WEIGHT_SINGULAR_MEASURE);

  $info_box_contents[$cur_row][] = array('align' => 'right',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => '<b>' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) . '</b>');
}

to

	  $info_box_contents[$cur_row][] = array('align' => 'center',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => '<span id="product_total_weight_' . $products[$i]['id'] . '">' . ($products_weight * $products[$i]['quantity']) . '</span>' . WEIGHT_SINGULAR_MEASURE) . tep_draw_hidden_field('product_weight_' . $products[$i]['id'], $products_weight);

  $info_box_contents[$cur_row][] = array('align' => 'right',
										 'params' => 'class="productListing-data" valign="top"',
										 'text' => '<b id="product_total_price_' . $products[$i]['id'] . '">' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) . '</b>' . tep_draw_hidden_field('product_price_' . $products[$i]['id'], $currencies->calculate_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id'])));
}

Also find

// END estimated shipping  ?>

  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><?php
	 if (SHIPPING_BOX_WEIGHT >= $cart->show_weight()*SHIPPING_BOX_PADDING/100) {
	  $estimated_shipping_weight = $cart->show_weight()+SHIPPING_BOX_WEIGHT;
	} else {
	  $estimated_shipping_weight = $cart->show_weight() + ($cart->show_weight()*SHIPPING_BOX_PADDING/100);
	}

echo PACKAGE_WEIGHT . $estimated_shipping_weight . ($estimated_shipping_weight == "1" ? WEIGHT_SINGULAR_MEASURE : WEIGHT_MULTIPLE_MEASURE);
?> </td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><b><?php echo SUB_TITLE_SUB_TOTAL; ?> <?php echo $currencies->format($cart->show_total()); ?></b> </td>
  </tr>

and change to

// END estimated shipping  ?>

  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><?php
	 if (SHIPPING_BOX_WEIGHT >= $cart->show_weight()*SHIPPING_BOX_PADDING/100) {
	  $estimated_shipping_weight = $cart->show_weight()+SHIPPING_BOX_WEIGHT;
	} else {
	  $estimated_shipping_weight = $cart->show_weight() + ($cart->show_weight()*SHIPPING_BOX_PADDING/100);
	}

echo PACKAGE_WEIGHT . '<span id="total_weight">' . $estimated_shipping_weight . '</span>' . ($estimated_shipping_weight == "1" ? WEIGHT_SINGULAR_MEASURE : WEIGHT_MULTIPLE_MEASURE);
?> </td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td align="right" class="main"><b><?php echo SUB_TITLE_SUB_TOTAL; ?> <span id="sub_total_display"><?php echo $currencies->format($cart->show_total()); ?></span></b><?php echo tep_draw_hidden_field('currency_symbol_left', $currencies->currencies[$currency]['symbol_left']) . tep_draw_hidden_field('sub_total_price', $cart->show_total()) . tep_draw_hidden_field('currency_symbol_right', $currencies->currencies[$currency]['symbol_right']) . tep_draw_hidden_field('currency_decimal_places', $currencies->currencies[$currency]['decimal_places']); ?> </td>
  </tr>

This is at least close to what the solution should be. By the way, I changed the minimum quantity from zero to one to match the original contribution's behavior.

I wonder if the original contribution works with product attributes? They produce weird product IDs.

Patty · June 29, 2009

Hey, Matt.

Sorry I didn't get back to you before. Little emergency at work, had to take care of that... :blink:

Anyway, tks a lot for your efforts in trying to make it work. I'm going to try this latest changes as soon as I can and post back here, OK?

Tks a lot! You're a sweetheart! :)

bhbilbao · June 7, 2011

Need help with:

2- Fast Update to Shopping Cart Quantity

http://addons.oscommerce.com/info/4209

I need to work with SSL, when clicking plus or minus buttons it goes-out from ssl to non-ssl page with a warning message.

How can I fix this??

Quantity box with plus and minus buttons

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation