I am looking to have the product price automatically updated based on the quantity the customer has chosen.
Currently when you choose a custom option in magento the
In Magento 1.9.2.4, the code file to edit is js/varien/product.js
In Magento 1.9.3 and above, the file to edit is js/varien/product_options.js
Add the following code:
var qty;
if($('qty').getValue().length == 0 || isNaN($('qty').getValue()) || $('qty').getValue() <= 0) {
qty = 1;
} else {
qty = $('qty').getValue();
price *= qty;
}
right after
if (price < 0) price = 0;
and before
if (price > 0 || this.displayZeroPrice) { ...
And, at the end of the file add:
Event.observe(window, 'load', function() {
$('qty').observe('blur', function(e){
optionsPrice.reload();
});
});
Source: https://magentojai.blogspot.com/2015/06/price-update-while-change-qty-in.html
Using jquery you can do this
$('#qty').keyup(function(){
if($(this).val() != '' && isNumber($(this).val()) && $(this).val() > 0)
{
var price = $('#real_price').val() * 1;
var qty = $(this).val() * 1;
var total = price * qty;
$('#price').html(total);
}
else
{
$('#price').html('500');
}
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
FIDDLE
Add the following script at the end in your template\catalog\product\view.phtml
<script>
$('qty').observe('blur', function(e){
$('qty').value = Math.max($F('qty').replace(/[^\d].*/, ''), 1);
optionsPrice.productPrice = Math.max(optionsPrice.productOldPrice, $F('qty') * optionsPrice.productOldPrice);
optionsPrice.reload();
});
</script>
Use jquery::
HTML CODE::
<input type='number' id='quantity'/>
<span id='total_price'></span>
Jquery Code::
var price=100;
$("#quantity").on("change",function(){
quantity=$(this).val();
total_price=price*quantity;
$("#total_price").html(total_price);
})