My task is to make a box on magento product page with total price for quantity selected. In other words qty * price. So I did this:
$j = jQuery.noConflict();
function get_total_qty() {
var qt_Price = parseInt(0);
$j('.price').each(function() {
if (this.offsetParent.className != 'dropdown-cart no_quickshop') {
qt_Price = parseFloat(this.textContent);
}
});
/*
* AJAX call
*/
var quantity = $j('#qty').val(); // get final quantity
var price = qt_Price; // get price
$j.post("http://example.com/myscripts/ajaxPriceCal.php", {
qty: quantity,
pr: price
},
function(data) {
var qt_total_price = data;
$j('#totpr').html(qt_total_price);
});
}
$j(document).ready(function() {
get_total_qty();
});
And I call get_total_qty() function every time button to increase or decrease qty is pressed. Now I tried the same with drop-down lists of product options but it didn't work as I expected. It calls the function before reloading product price which I use for calculation.
E.g. product is $10, qty is 2, total $20 if option selected (+$5) then what I get displayed is price $15, qty 2, total $20. Because function was called before updating .price class element. If I change qty it displays correct total again.
Perhaps my way of doing these calculations is silly. I'm open to suggestions on how to do it right way. Yet my pressing issue is calling the function on right time. What files should I edit and where should I place the call?
Sorry if my question appears silly i'm new in JS or jquery...
EDIT ->
/app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml file generates options selection drop-downs here is the code:
<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
<dl>
<?php foreach($_attributes as $_attribute): ?>
<dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
<div class="input-box">
<select onchange="get_total_qty()" name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>
</div>
</dd>
<?php endforeach; ?>
</dl>
<script type="text/javascript">
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>
<?php endif;?>
the result of it is this HTML on product page:
<dl>
<dt><label class="required"><em>*</em>Color</label></dt>
<dd>
<div class="input-box">
<select onchange="get_total_qty()" name="super_attribute[272]" id="attribute272" class="required-entry super-attribute-select">
<option>Pasirinkite...</option>
</select>
</div>
</dd>
<dt><label class="required"><em>*</em>Puokštės dydis</label></dt>
<dd class="last">
<div class="input-box">
<select onchange="get_total_qty()" name="super_attribute[975]" id="attribute975" class="required-entry super-attribute-select">
<option>Pasirinkite...</option>
</select>
</div>
</dd>
</dl>
<script type="text/javascript">
var spConfig = new Product.Config({"attributes":{"272":{"id":"272","code":"color","label":"Color","options":[{"id":"26","label":"Red","price":"0","oldPrice":"0","products":["177","178"]}]},"975":{"id":"975","code":"puokstes_dydis","label":"Puok\u0161t\u0117s dydis","options":[{"id":"136","label":"Didel\u0117","price":"30","oldPrice":"30","products":["178"]},{"id":"137","label":"Vidutin\u0117","price":"20","oldPrice":"20","products":["177"]}]}},"template":"#{price}\u00a0Lt","basePrice":"10","oldPrice":"10","productId":"175","chooseText":"Pasirinkite...","taxConfig":{"includeTax":false,"showIncludeTax":false,"showBothPrices":false,"defaultTax":21,"currentTax":0,"inclTaxTitle":"Incl. Mokestis"}});
</script>
As you can see I added onchange="get_total_qty()" in <select> element
The JS code for get_total_qty() sits in .js file which is linked in <head>. Here is the function code:
function get_total_qty(){
var price = parseInt(0);
$j('.price').each(function(){
if(this.offsetParent != null && this.offsetParent.className != 'dropdown-cart no_quickshop' && this.offsetParent.className != 'product'){ //makes sure it takes content from the right .price class element
price = parseFloat(this.textContent);
}
});
var quantity = $j('#qty').val(); // get final quantity
/*
* AJAX call
*/
$j.post("http://example.com/myscripts/ajaxPriceCal.php", { qty: quantity, pr: price },
function(data){
var qt_total_price = data;
$j('#totpr').html(qt_total_price );
});
}
The same function is called everytime quantity is decreased or increased
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Vnt." class="input-text qty" />
<div class="qty-ctl">
<button onclick="changeQty(1); return false;" class="increase">increase</button>
<button onclick="changeQty(0); return false;" class="decrease">decrease</button>
</div>
<div style="float:left;"><span id="totpr"></span></div>
<button type="button" title="PIRKTI" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>PIRKTI</span></span></button>
<script type="text/javascript">
function changeQty(increase) {
var qty = parseInt($('qty').value);
if ( !isNaN(qty) ) {
qty = increase ? qty+1 : (qty>1 ? qty-1 : 1);
$('qty').value = qty;
}; get_total_qty();
}
</script>
Next to the buttons is Div which holds total price. It updates as I want it to after qty changed but it does not reload after option selection made... well it does kind of but the function grabs price of previous selection not the new one that user just selected... which means that <span id="totpr"> text gets reloaded before item price (base price + selection price)
I'm sorry english is not my mother tongue I hope I explained everything clearly :)
