I have a t-shirt price form where you can select the garment, the color, add multiple locations and then some extra options.
Im trying to figure out how to make it when you select a “Add A Second Print it adds a price to the shirt but also adds price discount per the amount like 72pc, 96pc, 144pc and so on.
I’ve tried multiple things. I think I might need a if statement so whenever the second print option is selected it adds the price but then apply discounts to the per piece but I cant seem to figure it out.
I’ll show a little bit of my code at the bottom but you can view the whole thing at https://gist.github.com/1719315
Thanks for looking at it!
Heres is one of my options for the JSON:
var shirtsJSON=[
{
"pattern": "Delta Adult S/S 5.2oz",
"basePrice": 4.26,
"colors": {
"white": 0,
"athletic": 0.12,
"color": 0.23
},
"deductions": {
"de48pp": 0,
"de72pp": 0.68,
"de96pp": 1.01,
"de144pp": 1.45,
"de288pp": 1.69,
"de576pp": 1.91,
"de1200pp": 1.98,
"de1800pp": 1.98,
"de2400pp": 1.98,
"de5000pp": 1.98
},
"oneLocation": {
"onelocnone": 0,
"oneloc12": 3.28,
"oneloc34": 5.41,
"oneloc56": 7.52,
"oneloc78": 9.69,
"oneloc910": 11.80
},
"twoLocation": {
"twolocnone": 0,
"twoloc12": 3.28,
"twoloc34": 5.41,
"twoloc56": 7.52,
"twoloc78": 9.69,
"twoloc910": 11.80
},
"threeLocation": {
"threelocnone": 0,
"threeloc12": 3.28,
"threeloc34": 5.41,
"threeloc56": 7.52,
"threeloc78": 9.69,
"threeloc910": 11.80
},
"fourLocation": {
"fourlocnone": 0,
"fourloc12": 3.28,
"fourloc34": 5.41,
"fourloc56": 7.52,
"fourloc78": 9.69,
"fourloc910": 11.80
}
},
Heres where it calculates:
function calculatePrices() {
totalPrice = 0.00;
for (i = 1; i <= numShirts; i++) {
sIndex = parseInt($('#shirt' + i + 'pattern').val());
color = $('#shirt' + i + 'color').val();
oneLocation = $('#shirt' + i + 'oneLocation').val();
twoLocation = $('#shirt' + i + 'twoLocation').val();
threeLocation = $('#shirt' + i + 'threeLocation').val();
fourLocation = $('#shirt' + i + 'fourLocation').val();
deductions = $('#shirt' + i - 'deductions').val();
price = shirtsJSON[sIndex]["basePrice"];
price += shirtsJSON[sIndex]["colors"][color];
price += shirtsJSON[sIndex]["oneLocation"][oneLocation];
price += shirtsJSON[sIndex]["twoLocation"][twoLocation];
price += shirtsJSON[sIndex]["threeLocation"][threeLocation];
price += shirtsJSON[sIndex]["fourLocation"][fourLocation];
totalPrice += price;
}
$('#48pc').html("<u>48pc : </u>" + currency + getMoney(totalPrice * 48));
$('#72pc').html("<u>72pc : </u>" + currency + getMoney(totalPrice * 72 ));
$('#96pc').html("<u>96pc : </u>" + currency + getMoney(totalPrice * 96));
$('#144pc').html("<u>144pc : </u>" + currency + getMoney(totalPrice * 144));
$('#288pc').html("<u>288pc : </u>" + currency + getMoney(totalPrice * 288));
$('#576pc').html("<u>576pc : </u>" + currency + getMoney(totalPrice * 576));
$('#1200pc').html("<u>1200pc : </u>" + currency + getMoney(totalPrice * 1200));
$('#1800pc').html("<u>1800pc : </u>" + currency + getMoney(totalPrice * 1800));
$('#2400pc').html("<u>2400pc : </u>" + currency + getMoney(totalPrice * 1800));
$('#5000pc').html("<u>5000pc : </u>" + currency + getMoney(totalPrice * 5000));
$('#48pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de48pp) / (1-0.25)));
$('#72pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de72pp) / (1-0.25)));
$('#96pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de96pp) / (1-0.25)));
$('#144pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de144pp) / (1-0.15)));
$('#288pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de288pp) / (1-0.15)));
$('#576pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de576pp) / (1-0.12)));
$('#1200pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de1200pp) / (1-0.12)));
$('#1800pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de1800pp) / (1-0.12)));
$('#2400pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de2400pp) / (1-0.12)));
$('#5000pp').html("<u>Per Piece : </u>" + currency + getMoney((totalPrice - shirtsJSON[sIndex].deductions.de5000pp) / (1-0.10)));
First of all, i would recommend to do the calculation server side. You can use a simple webservice with one method that takes the number of shirts as the argument.
If you don’t use a WCF service, you can deserialize the JSON argument with this library:
http://james.newtonking.com/pages/json-net.aspx
Do the calculation and send it back to the client. You can do this easily with jQuery as described here: http://api.jquery.com/jQuery.post/
Inside the success callback you can then manipulate your DOM to display the correct information.