Shopping cart (checkout) keeping only the last value

0

All right?

I'm working on a project with Laravel PHP framework for backend and jQuery for the front end. I'm setting up a football stadium ticket checkout for a system I'm developing.

I almost have all the checkout ready, however, what happens is that if I go back to <section> previous the value it calculates is the value of the product that it added, ie it does not keep the old value (the checkout is divided into 3 stages).

1 - The user selects the sector of the stadium and if he has a chair he selects the chairs he wants, if it is a bleach he selects the bleachers.

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

Print demo: link

In my jQuery, I am separating the values and it is calculating based on the response that comes from an AJAX from my database. In practice, the value it should bring would be 250.00 because in my database a chair costs 100.00 and a ticket for the grandstand is 50.00. But he brings only the last and the value of the chair is erased.

3 - Finally, the payment details.

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's been a long time but I think the idea and problem is clear: x

If someone can give me a light or a way to correct, I'll thank you! Thanks guys;)

    
asked by anonymous 13.10.2018 / 01:47

1 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, regardless of amount_chair. If this is the case, you do not need 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 fault is price_full. Both tickets for seats and bleachers are multiplied by price_full, which means that both will be calculated as having the same value. To correct this problem, return the value for chairs and bleach separately from your back end, and then multiply those values by amount_chair and amount_grandstand properly.

    
13.10.2018 / 02:29