plus and minus button...

[cemfundog]

I need to get my product quantity box to update the price on the same page as the plus or minus button is pushed. can some one please help. I have the buttons and quantity box working and the product page is set up "pretty much" the way I want it. You can increase quantity and everything works fine but I want to make the price update right on the product info page before adding it to the cart. Thank you all so much for all your help. I hope I can contribute this as a add-on once finished and working. Please check out a product page on my site if you would like to see what I have so far. http://www.evantics.com. Thank you in advance...

[♥zelf]

I need to get my product quantity box to update the price on the same page as the plus or minus button is pushed.

You are calling prototype.js so you have all the AJAX methods you need to do this without having to recreate them. I would suggest the following.

 

In /catalog/products_info.php near your products price echo (Your altered code below):

<td height="25" colspan="4" align="left" valign="middle" class="pageHeading"><span class="priceHeading2"><?php echo $products_price; ?></span></td>

Change it to:

<?php
 // remove '$' from price
 $basePrice = str_replace('$', $products_price);
?>
<td height="25" colspan="4" align="left" valign="middle" class="pageHeading">
 <input id="base_price" type="hidden" name="base_price" value="<?php echo $basePrice; ?>" />
 <span class="priceHeading2" id="priceHeading2"><?php echo $products_price; ?></span>
</td>

 

Then add the following to your javascript calculate function that is triggered whenever a user clicks + or -:

 

var startPrice = $F('base_price') // Where base_price is the id of your hidden base price field. Gets value of base_price field
var currentQty = $F('quant') // Where quant is the id of your quantity input field. Gets value of currentQty field
var qtyPrice = startPrice * currentQty // Calculate the price.
var qtyPrice = qtyPrice.toFixed(2) // Only allow 2 decimals. I'll let you add rounding features up or down.
var qtyPrice = '$' + qtyPrice // Add a dollar sign
$('priceHeading2').update(qtyPrice) // Where priceHeading2 is the id of your span for the echoed product price

The code above can be condensed. If nothing else maybe this will get you started. This is completely untested so may require some debugging somewhere, but fairly straight forward tweak. Good luck.

[Guest]

I have to tell you, your storefront looks amazing. NIce customizations going on there. I love the mirroring effects on your graphics and the placement of your categories ... very clean and inviting.

[cemfundog]

You are calling prototype.js so you have all the AJAX methods you need to do this without having to recreate them. I would suggest the following.

 

In /catalog/products_info.php near your products price echo (Your altered code below):

<td height="25" colspan="4" align="left" valign="middle" class="pageHeading"><span class="priceHeading2"><?php echo $products_price; ?></span></td>

Change it to:

<?php
 // remove '$' from price
 $basePrice = str_replace('$', $products_price);
?>
<td height="25" colspan="4" align="left" valign="middle" class="pageHeading">
 <input id="base_price" type="hidden" name="base_price" value="<?php echo $basePrice; ?>" />
 <span class="priceHeading2" id="priceHeading2"><?php echo $products_price; ?></span>
</td>

 

Then add the following to your javascript calculate function that is triggered whenever a user clicks + or -:

 

var startPrice = $F('base_price') // Where base_price is the id of your hidden base price field. Gets value of base_price field
var currentQty = $F('quant') // Where quant is the id of your quantity input field. Gets value of currentQty field
var qtyPrice = startPrice * currentQty // Calculate the price.
var qtyPrice = qtyPrice.toFixed(2) // Only allow 2 decimals. I'll let you add rounding features up or down.
var qtyPrice = '$' + qtyPrice // Add a dollar sign
$('priceHeading2').update(qtyPrice) // Where priceHeading2 is the id of your span for the echoed product price

The code above can be condensed. If nothing else maybe this will get you started. This is completely untested so may require some debugging somewhere, but fairly straight forward tweak. Good luck.

Thank you all so much for this. This is exactly what I needed Zelf. I hope to be able to figure out the seemingly simple install.

[♥zelf]

You could also try this. Note: code not tested. Let me know if you have any problems.

 

Create file in /catalog/js/calculate.js where you have your prototype files at.

 

Place the following code in the calculate.js file

// JavaScript Document
// calculate price based on quantity
function quantity(change){
var currentQty = $F('quant') // Where quant is the id of your quantity input field. Gets value of currentQty field

switch (change) {
	case: 'add'
		currentQty += 1
		$('quant').value = currentQty
		calculate()
		break
	case: 'subtract'
		if (currentQty > 0) { // only subtract if qty is greater than zero
			currentQty -= 1
			$('quant').value = currentQty
			calculate()
		}
		break
	case: 'field'
		window.setTimeout('calculate()', 1500) 
		break
}
}
function calculate(){
var startPrice = $F('base_price') // Where base_price is the id of your hidden base price field. Gets value of base_price field
var currentQty = $F('quant') // Where quant is the id of your quantity input field. Gets value of currentQty field
var qtyPrice = startPrice * currentQty // Calculate the price.
var qtyPrice = qtyPrice.toFixed(2) // Only allow 2 decimals. I'll let you add rounding features up or down.
var qtyPrice = '$' + qtyPrice // Add a dollar sign
$('priceHeading2').update(qtyPrice) // Where priceHeading2 is the id of your span for the echoed product price
}

 

Add javascript file reference to your new calculate function at top of product_info.php page

<script type="text/javascript" src="js/calculate.js"></script>

 

Keep all but the javascript code I posted before the same. Then make the following changes to your plus minus buttons and quantity field.

<img src='images/icons/minus.png' align="absmiddle" class='plus_minus_images' onclick="quantity('subtract');" />

<input name="quantity" type="text" class="moduleRow" id='quant' style='text-align:center' onKeyUp="quantity('field')" value="1" size='4' maxlength='4' />

<img src='images/icons/plus.png' align="absmiddle" class='plus_minus_images' onClick="quantity('add');" />

[♥zelf]

Disregard last post. Was mixing php syntax with javascript and had a couple of other problems. Here is some tested code should do the trick.

 

Put calculate.js into /catalog/js/calculate.js

// JavaScript Document
// calculate price based on quantity
function changeQty(change){
var currentQty = parseInt($F('quant')) // Where quant is the id of your quantity input field. Gets value of currentQty field

switch (change) {
	case 'add':
		currentQty += 1
		$('quant').value = currentQty
		calculate()
		break
	case 'subtract':
		if (currentQty > 0) { // only subtract if qty is greater than zero
			currentQty -= 1
			$('quant').value = currentQty
			calculate()
		}
		break
	case 'field':
		if (currentQty >= 0) { // only run if there is a value
			window.setTimeout('calculate()', 500)
		}
		break
}
}
function calculate(){
var startPrice = $F('base_price') // Where base_price is the id of your hidden base price field. Gets value of base_price field
var currentQty = parseInt($F('quant')) // Where quant is the id of your quantity input field. Gets value of currentQty field
var qtyPrice = startPrice * currentQty // Calculate the price.
var qtyPrice = qtyPrice.toFixed(2) // Only allow 2 decimals. I'll let you add rounding features up or down.
var qtyPrice = '$' + qtyPrice // Add a dollar sign
$('priceHeading2').update(qtyPrice) // Where priceHeading2 is the id of your span for the echoed product price
new Effect.Highlight($('priceHeading2')) // Have a little fun with script.aculo.us
}

Changes to /catalog/product_info.php

 

Make reference to new calculate.js file in <head></head> tags in /catalog/product_info.php

<script type="text/javascript" src="js/calculate.js"></script>

 

New plus minus button code:

<img src="images/icons/minus.png" align="absmiddle" class="plus_minus_images" onclick="changeQty('subtract');" />
			<img src="images/icons/plus.png" align="absmiddle" class="plus_minus_images" onclick="changeQty('add');" />

 

New quantity field code:

<input name="quantity" type="text" class="moduleRow" id="quant" style="text-align:center" onkeyup="changeQty('field');" value="1" size="4" maxlength="4" />

 

New product price and hidden field code:

<?php
 // remove '$' from price
 $basePrice = str_replace('$', $products_price);
?>
<td height="25" colspan="4" align="left" valign="middle" class="pageHeading">
 <input id="base_price" type="hidden" name="base_price" value="<?php echo $basePrice; ?>" />
 <span class="priceHeading2" id="priceHeading2"><?php echo $products_price; ?></span>
</td>

[♥zelf]

One more tweak to calculate.js. You don't want the displayed price to become $0.00 if customer zeros out quantity field. Use this calculate.js instead. I've got move on now, good luck.

// JavaScript Document
// calculate price based on quantity
function changeQty(change){
var currentQty = parseInt($F('quant')) // Where quant is the id of your quantity input field. Gets value of currentQty field

switch (change) {
	case 'add':
		currentQty += 1
		$('quant').value = currentQty
		calculate()
		break
	case 'subtract':
		if (currentQty > 0) { // only subtract if qty is greater than zero
			currentQty -= 1
			$('quant').value = currentQty
			calculate()
		}
		break
	case 'field':
		if (currentQty >= 0) {
			window.setTimeout('calculate()', 500)
		}
		break
}
}
function calculate(){
var startPrice = $F('base_price') // Where base_price is the id of your hidden base price field. Gets value of base_price field
var currentQty = parseInt($F('quant')) // Where quant is the id of your quantity input field. Gets value of currentQty field

if (currentQty > 0) { // Don't want price to display if zero if customer zeros out quantity
	var qtyPrice = startPrice * currentQty // Calculate the price.
	var qtyPrice = qtyPrice.toFixed(2) // Only allow 2 decimals. I'll let you add rounding features up or down.
} else { // set price back to original price
	qtyPrice = startPrice
}
var qtyPrice = '$' + qtyPrice // Add a dollar sign
$('priceHeading2').update(qtyPrice) // Where priceHeading2 is the id of your span for the echoed product price
new Effect.Highlight($('priceHeading2'))
}

[♥zelf]

One last tweak. Forgot a parameter in str_replace

 

Change:

$basePrice = str_replace('$', $products_price);

 

To:

$basePrice = str_replace('$', '', $products_price);

[cemfundog]

One last tweak. Forgot a parameter in str_replace

 

Change:

$basePrice = str_replace('$', $products_price);

 

To:

$basePrice = str_replace('$', '', $products_price);

Ok, it works great...Thank you so much for all your hard work. I will bundle this up into a contrib to share with the community and give all credit to you. Thank you so much I am a happy camper... :rolleyes: