使用 AJAX 将多个项目添加到购物车，只处理一个

Question

I have a shopping cart to which items are added with an AJAX request. The request posts to Laravel 5.4. It all works fine when I click multiple 'Add To Cart' buttons slowly after each other. Then the AJAX requests aren't executed at the same time. But when I click those buttons fast after each other, the AJAX requests are executed at the same time and only one item is added to the cart.

The jQuery:

$('.add-to-cart').on('click', function (event) {
    // Get the product/service ID.
    var item = $(this).attr('data-id');

    $.post('/cart', {
        action: 'addItem',
        data: item
    }, 'json').done(function (response) {
        // Hide .add-to-cart and show .go-to-checkout
    });
});

The PHP:

public function addItem(Request $request)
{
    // Get item from request.
    $item = $request->get('data');

    // Store item in session.
    $request->session()->push('cart.items', [$item]);

    // Return JSON response.
    return response()->json([]);
}

When I use async: false in my AJAX request, all items are added to the cart, no matter how fast I add them. But because that option is deprecated, it doesn't feel right to use it. I've also looked at alternatives like Promises, but I don't know how to use them in my case.

I'm trying to figure out why only one item is being processed when multiple items are being added quickly after each other. Hope you guys can help me out!

Answer 1

Maybe its possible to collect items in js-code and then pass them to ajax.

The jQuery:

$('.add-to-cart').on('click', function (event) {
var items = {COLLECT_ITEMS_FUNCTION};
$.post('/cart', {
    action: 'addItems',
    data: items
}, 'json').done(function (response) {
    // Hide .add-to-cart and show .go-to-checkout
});});

The PHP:

public function addItems(Request $request) {
$items = $request->get('data');

foreach ($items as $item) {
    // Store item in session.
    $request->session()->push('cart.items', [$item]);
}

// Return JSON response.
return response()->json([]);}

Answer 2

It seems like you can use the laravel-locking-session library to keep Laravel from overwriting your session data. I haven't used it, but it claims to fix the exact problem you are experiencing.

https://github.com/rairlie/laravel-locking-session

Answer 3

The Laravel version 7+ is supporting Session blocking. The block method on the route is limit concurrent requests for a given session

Route::post('/cart', function () {
    //
})->block($lockSeconds = 10, $waitSeconds = 10)

https://laravel.com/docs/session#session-blocking