Thursday, 8 August 2013

How to sum all var together, if greater than X select option for all dropdowns

How to sum all var together, if greater than X select option for all
dropdowns

I'm trying to build a product pricing calculator.
Currently, if you pass over the specific parameters (> 0, > 59) etc. a
particular dropdown option is selected.
What I'm trying to do now, is determine that parameter across all three.
So if you had 1 x 20, 1 x 200 and 1 x 1000 it totals that to be 1220,
which is above 999 so all dropdowns select option 4 - instead of doing
each as a separate query.
Ultimately, if you're buying over X amount then you get a specific price.
Containers are priced the same. So if you order 1 x 1000L and 1 x 20L it
should be the one price, not one valued at > 0 price and one valued at >
999 price. They should both be > 999 price.
This is just the test script, obviously prices in the dropdowns are
actually different for each container size - but they all correlate to the
same number dropdown option.
Ive tried multiple ways to get them to add all the chooseCosts together
but I'm going around in circles.
jsFiddle: http://jsfiddle.net/KHVkU/
HTML:
<div class="productContainer" id="someID">
<ul class="productfeaturelist">
<li class="productItem">
<div id="CO20L">
<span class="type">20L</span>
<div class="listQuantity">
<input type="text" class="productTextInput" value="0" />
</div>
<div class="hidden listType">
<div class="catProdAttributeItem">
<select mandatory="1">
<option value="">-- Please select --</option>
<option value="13656898">20 $1200</option>
<option value="13656899">60 $1100</option>
<option value="13656922">200 $900</option>
<option value="13656923">1000 $500</option>
</select>
</div>
</div>
<label class="hectare dynamicDetails"></label>
<label class="total dynamicDetails"></label>
<div class="remove">
<a href="#" class="remove" title="Remove product"></a>
</div>
<div class="clear"></div>
</div>
</li>
<li class="productItem">
<div id="CO200L">
<span class="type">200L</span>
<div class="listQuantity">
<input type="text" class="productTextInput" value="0" />
</div>
<div class="hidden listType">
<div class="catProdAttributeItem">
<select mandatory="1">
<option value="">-- Please select --</option>
<option value="13656898">20 $1200</option>
<option value="13656899">60 $1100</option>
<option value="13656922">200 $900</option>
<option value="13656923">1000 $500</option>
</select>
</div>
</div>
<label class="hectare dynamicDetails"></label>
<label class="total dynamicDetails"></label>
<div class="remove">
<a href="#" class="remove" title="Remove product"></a>
</div>
<div class="clear"></div>
</div>
</li>
<li class="productItem">
<div id="CO100L">
<span class="type">1000L</span>
<div class="listQuantity">
<input type="text" class="productTextInput" value="0" />
</div>
<div class="hidden listType">
<div class="catProdAttributeItem">
<select mandatory="1">
<option value="">-- Please select --</option>
<option value="13656898">20 $1200</option>
<option value="13656899">60 $1100</option>
<option value="13656922">200 $900</option>
<option value="13656923">1000 $500</option>
</select>
</div>
</div>
<label class="hectare dynamicDetails"></label>
<label class="total dynamicDetails"></label>
<div class="remove">
<a href="#" class="remove" title="Remove product"></a>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
Code:
$("#someID .productTextInput").keyup(function() {
$(this).closest('li').find("a.remove").fadeIn(250);
var selectedType = $(this).closest('li').find(".type").text();
var match = selectedType.match(/\d{1,5}L/g);
if(match.length == 1) {
var L = selectedType.replace(/,/g, '').replace('L', '');
var quantity = parseInt($(this).val());
var chooseCost = parseInt(L * quantity);
$(this).closest('li').find(".hectare").text(L * quantity + ' ha');
if(chooseCost > 0){
$(this).closest('li').find(".catProdAttributeItem
select>option:eq(1)").prop('selected', true);
} if (chooseCost > 59){
$(this).closest('li').find(".catProdAttributeItem
select>option:eq(2)").prop('selected', true);
} if (chooseCost > 199){
$(this).closest('li').find(".catProdAttributeItem
select>option:eq(3)").prop('selected', true);
} if (chooseCost > 999){
$(this).closest('li').find(".catProdAttributeItem
select>option:eq(4)").prop('selected', true);
}
var cost = $(this).closest('li').find("select
option:selected").text().replace(/.*\$/, '');
$(this).closest('li').find(".total").text('$' + cost * quantity);
}
});

No comments:

Post a Comment