Shopping Cart (checkout) keeping only the last value

Question

all right?

I’m working on a project with Laravel PHP framework for back-end and jQuery for front-end. I’m setting up a ticket checkout for football stadiums for a system I’m developing.

I have almost all the checkout ready, however, what happens is that if I go back to <section> previous the value he calculates is the value of the product he added, that is he doesn’t keep the old value (the checkout is divided into 3 steps).

1 - The user selects the sector of the stadium and if have chair he selects the chairs he wants, if it is grandstand selects the grandstand.

2 - The shopping cart with the products (It is calculating the quantity of products correctly but based on the type of the sector it is). The problem is here. Briefly, I customer, I add 2 tickets that are in a sector that have chairs but then I go back and add 1 more ticket that is bleachers, if I return to my cart it will calculate based on the price of the bleachers and no more the price of chairs.

Demonstrative print: http://prntscr.com/l5hj5v

In my jQuery, I’m separating the values and it’s calculating based on the response that comes from an AJAX in my database. In practice, the amount he should bring would be 250,00 because in my database a chair costs 100,00 and a ticket to the stands is 50,00. But it brings only the last and the value of the chair is erased.

3 - Finally, payment data.

My jQuey:

$('.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();

        if (amount_chair != 0) {
            var total = price_full * amount_chair;
        }
        if (amount_grandstand != 0) {
            var total = 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 = [

            ];
        });
    });
});

});

It got a little long but I think it was very clear the idea and the problem that is happening :x

If anyone can give me a light or a way to correct I will thank you! Thank you guys ;)

Answer 1

    if (amount_chair != 0) {
        var total = price_full * amount_chair;
    }
    if (amount_grandstand != 0) {
        var total = price_full * amount_grandstand;
    }

I believe the problem is here. If amount_grandstand is not 0, the total value is set only by price_full * amount_grandstand, without regard to amount_chair. If this is the case, you don’t need if to calculate the total, just use

var total = (price_full * amount_chair) + (price_full * amount_grandstand);

Alternatively

If the number of tickets is correct, and only the base is wrong, then the blame is price_full. Both seat and grandstand tickets are multiplied by price_full, which means that both will be calculated as if they had the same value. To fix this problem, return the value to chairs and grandstand separately from your back end, and then multiply these values by amount_chair and amount_grandstand properly.