I'm working on a project with the PHP Laravel framework for back end and jQuery for the front end. I'm buying a football stadium ticket checkout for a system I'm developing.
I almost have all the checkout ready, however, what happens is that whenever I go back to the previous value (that has the calculation of the value of the product) it does not keep the old value (the checkout is divided into 3 phases).
The user selects the sector of the stadium and has access to the chair as if the consultation, if it is archived, select a grandstand.
The shopping cart with products (He is calculating a quantity of products correctly but based on any type of sector). The problem is here. Briefly, I add customer 2 tickets that are in a sector that have chairs but then I go back and add 1 more ticket that is archived, if I return to my cart he will calculate based on the price of the grandstand and not more on the price of chairs.
Print demo: http://prntscr.com/l5hj5v
In my jQuery, I'm separating the values and you're calculating based on a response that comes from an AJAX from my database. In practice, the amount you would want would be 250.00 and a grandstand ticket is 50.00. But it only the last and the value of the chair is erased.
Finally, the payment data.
My jQuery:
$('.btn-next a[href=#section-2]').click(function () {
let match = $('input[name=id_match]').val();
let sector = $('select[name=id_sector] :selected').text();
let id_sector = $('select[name=id_sector] :selected').val();
$('.checkbox-success').children('input:checked').each(function () {
let chair = $(this).val();
if (chair == ''){ chair = '-'; }
// Monta a estrutura da tabela do carrinho de compras
$.get('/api/checkout', {
match: match,
},
function (data) {
$('#data-cart').append(`
<tr>
<td><p class="text-center">` + data['lot']['id'] + `</p></td>
<td>
<div class="col-md-6">
<div class="col-md-4 text-center">
<img src="` + data['photo_club_main'] + `" style="height: 80px;"/>
</div>
<div class="col-md-4 text-center">
<img src="http://elotorcedor.local:8000/images/versus.svg" style="height: 40px;margin-top: 20px;margin-left: 20px;">
</div>
<div class="col-md-4 text-center">
<img src="` + data['photo_club_visitor'] + `" style="height: 80px;"/>
</div>
</div>
<div class="col-md-6">
<span class="col-md-12">` + data['championship'] + `</span>
<span class="col-md-12"><b>` + data['club_main'] + ' X ' + data['club_visitor'] + `</b></span>
<span class="col-md-12">` + data['stadium'] + ` - ` + data['date_match'] + `</span>
</div>
</td>
<td><span id="ticket-reserved" class="text-center">` + chair + `</span></td>
<td><span id="sector-selected" class="text-center">` + sector + `</span></td>
<td>
<select name="option_half" class="form-control">
<option value="1">Não</option>
<option value="2">Sim</option>
</select>
</td>
</tr>
`);
});
$.get('/api/lot', {
match: match,
sector: id_sector,
},
function (data) {
let elo_balance = 80.00;
let price_full = data['price_full'];
let amount_chair = $('.checkbox-success').children('[data-type=chair]:checked').size();
let amount_grandstand = $('.checkbox-success').children('[data-type=grandstand]:checked').size();
var total = (price_full * amount_chair) + (price_full * amount_grandstand);
var amount_pay = total - elo_balance;
$('#amount-full').empty();
$('#amount-pay').empty();
$('#elo-balance').empty();
$('#amount-full').append('<span class="money">R$ ' + total + '</span>');
$('#elo-balance').append('<span>Saldo EloTorcedor: <b>R$ ' + elo_balance + '</b></span>');
$('#amount-pay').append('<span class="text-success"><b>R$ ' + amount_pay + '</b></span>');
$('.btn-next a[href=#section-3]').click(function () {
let request = [
];
});
});
});
});