如何使用 laravel 中的 ajax 更新購物車商品數量？

Question

我想通過單擊按鈕來增加/減少購物車數量。 查看此圖像預覽圖像

此購物車行由 forcach 循環顯示。 第一行運行良好。 問題是，當我點擊第二/最后一行時，我只得到第一行的值。 我不知道如何解決。 這是查看代碼

    @foreach ($carts as $cart)
                            <input type="hidden" name="cart_id" class="id" value="{{ $cart->id }}">
                            <tr class="woocommerce-cart-form__cart-item cart_item">
                                <td class="product-remove">
                                    <a href="#" class="remove" onclick="removeCart({{ $cart->id }})"
                                        aria-label="Remove this item">
                                        <span class="lnr lnr-cross-circle"></span>
                                    </a>
                                </td>

                                <td class="product-thumbnail">
                                    <a href="">
                                        <img src="{{ asset('/storage/items/food/' . $cart->FoodItem->image) }}"
                                            class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" /
                                            height="60" width="80">
                                    </a>
                                </td>

                                <td class="product-name" data-title="Product">
                                    <a href="shop-single.html">{{ $cart->FoodItem->name }}</a>
                                </td>

                                <td class="product-price" data-title="Price">
                                    <span class="woocommerce-Price-amount amount"><span
                                            class="woocommerce-Price-currencySymbol">$</span>{{ $cart->price }}</span>
                                </td>
                                <td class="product-quantity" data-title="Quantity">
                                    <div class="quantity">
                                        <input type="number" class="input-text qty text input-quantity "
                                            class="quantity" step="1" min="0" name="quantity[]"
                                            value="{{ $cart->quantity }}" title="Qty" size="4">
                                        <div class="icon">
                                            <a href="#" class="number-button  plus">+</a>
                                            <a href="#" class="number-button minus">-</a>
                                        </div>
                                    </div>
                                </td>
                                <td class="product-subtotal" data-title="Total">
                                    <span class="woocommerce-Price-amount amount"><span
                                            class="woocommerce-Price-currencySymbol">$</span> <span
                                            class="sum">{{ $cart->total_price }}</span></span>
                                </td>
                            </tr>
                        @endforeach

這是 ajax 代碼

    $(document).on('click', '.qty', function(e) {
        e.preventDefault();

        var quantity = $('.input-quantity').val();  
        var id = $('.id').val();

          $.ajax({
            url: "url",
            method: "POST",
            dataType: "json",
            data: {
                _token: "{{ csrf_token() }}",

                quantity: quantity,
                id: id,
            },

這是我的 controller 代碼

   $cart = Cart::findOrFail($id);
    $cart->update([
        'quantity'    => $request->quantity,
        'total_price' => $cart['price'] * $request->quantity,

    ]);

誰能告訴我如何解決這個問題？

Answer 1

這是問題所在：

    var quantity = $('.input-quantity').val();  
    var id = $('.id').val();

jQuery 每次都使用 class .input-quantity獲取第一項的值，因為您已經使用了這個：

$('.input-quantity') 

所以你應該告訴它把相關項目的值傳遞給點擊的項目：

$(document).on('click', '.qty', function(e) {
    e.preventDefault();

    // $(this) mentions the clicked element (target)
    var quantity = $(this).val();  // trasnlate: pass the value of the clicked  (target) element
    ....

}

另外我沒有發現你在任何地方設置了id ：所以你可以設置為這樣的數據屬性：

<input data-id={{ $cart->id }} type="number" 
       class="input-text qty text input-quantity "
       step="1" min="0" name="quantity[]"
       value="{{ $cart->quantity }}" title="Qty" size="4">

那么您可以使用以下代碼：

$(document).on('click', '.qty', function(e) {
    e.preventDefault();

    // $(this) mentions the clicked element (target)
    var quantity = $(this).val();  // trasnlate: pass the value of the clicked  (target) element
    var id = $(this).attr("data-id");
    ....

}

您必須考慮到您已經為一個元素使用了兩次class ：

class="input-text qty text input-quantity "  class="quantity"

這是絕對錯誤的

Answer 2

您應該使用觸發event來發揮自己的優勢，同時嘗試識別要在 ajax function 中查詢值的元素。 該event有幾個對您有用的屬性 - 在這種情況下，可以說最有用的是target屬性，它標識調用事件的特定 DOM 元素。

問題中提供的 HTML 無效 - 隱藏輸入不能在表格行之間合法存在 - 它必須在表格單元格中，這就是為什么我移動到行中的第一個單元格（在循環內）

@foreach ($carts as $cart)

    <tr class="woocommerce-cart-form__cart-item cart_item">
        <td class="product-remove">
        
            <!-- move thie hidden element to within a cell -->
            <input type="hidden" name="cart_id" class="id" value="{{ $cart->id }}">
            
            <a href="#" class="remove" onclick="removeCart({{ $cart->id }})" aria-label="Remove this item">
                <span class="lnr lnr-cross-circle"></span>
            </a>
        </td>

        <td class="product-thumbnail">
            <a href="#">
                <img src="{{ asset('/storage/items/food/' . $cart->FoodItem->image) }}" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" / height="60" width="80">
            </a>
        </td>

        <td class="product-name" data-title="Product">
            <a href="shop-single.html">{{ $cart->FoodItem->name }}</a>
        </td>

        <td class="product-price" data-title="Price">
            <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-currencySymbol">$</span>{{ $cart->price }}
            </span>
        </td>
        <td class="product-quantity" data-title="Quantity">
            <div class="quantity">
                <input type="number" class="input-text qty text input-quantity" class="quantity" step="1" min="0" name="quantity[]" value="{{ $cart->quantity }}" title="Qty" size="4">
                <div class="icon">
                    <a href="#" class="number-button  plus">+</a>
                    <a href="#" class="number-button minus">-</a>
                </div>
            </div>
        </td>
        
        <td class="product-subtotal" data-title="Total">
            <span class="woocommerce-Price-amount amount">
                <span class="woocommerce-Price-currencySymbol">$</span>
                <span class="sum">{{ $cart->total_price }}</span>
            </span>
        </td>
        
    </tr>
@endforeach

    

並對 javascript 進行了一些小改動

const getparent=function(evt,tag){
    let n=evt.target;
    while( n.tagName.toLowerCase()!==tag ) {
        if( n.nodeName==='BODY' )return false;
        n=n.parentNode;
    }
    return n;
}

$(document).on('change', '.qty', function(e) {
    e.preventDefault();
    let parent=getparent(e,'tr');

    var quantity = e.target.value;  
    var id = parent.querySelector('td input[ name="cart_id" ]').value;

      $.ajax({
        url: "url",
        method: "POST",
        dataType: "json",
        data: {
            _token: "{{ csrf_token() }}",
            quantity: quantity,
            id: id
        },
        success:(r)=>alert(r),
        error:(e)=>alert(e)
    });

然而，這是未經測試的，因此對任何小錯誤深表歉意......