Armin Rahmati

3 سال پیش توسط Armin Rahmati مطرح شد

ویرایش سبد خرید با Ajax

سلام دوستان.
داخل سبد خرید وقتی میخوام تعداد هر محصول رو ویرایش کنم، اگه 10 تا محصول داخل سبد خرید باشه و من بیام تعداد محصول دوم رو ویرایش کنم، ویرایش نمیشه، در واقع فقط تعداد محصول اول ویرایش میشه و بقیه رو نمیتونم ویرایش کنم.
در واقع فقط آیدی محصول اول گرفته میشه.
کد Ajax:

$.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update() {
                var foods_id = $('#foods_id').val();
                var quantity = $('#quantity').val();
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foods_id, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        alert(foods_id);
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }

کد کنترلر:

public function edit(Request $request)
    {
        $foods_id = $request->input('foods_id');
        $quantity = $request->input('quantity');
        if (Cart::where('foods_id', $foods_id)->where('user_id', Auth::id())->exists()) {
            $cart = Cart::where('foods_id', $foods_id)->where('profile_id', Auth::id())->first();
            $cart->quantity = $quantity;
            $cart->update();
            return response()->json(['status' => 'محصول با موفقیت ویرایش شد']);
        }
    }

ثبت پرسش جدید

رضا جهانگیر

تخصص : Full-Stack Developer

@rezajahangir 3 سال پیش مطرح شد

سلام به شما دوست عزیز.
شما آیدی رو تو پارامتر تابع داری میگیری، حالا باید اینو بذاری کنار رشته ای که تو آیدی select داری، یعنی کدتو باید به صورت زیر بنویسی:

var quantity = $('#food_quantity_'+foodId).val();

موفق باشید.

ارسال پاسخ

سهیل رضایی

@rezaesoheil 3 سال پیش آپدیت شد

var foods_id = $('#foods_id').val();

اینجا فقط داری input اول رو میگیری به نظرم

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@rezaesoheil
آخه به این صورت نوشتم:

<input type="hidden" id="foods_id" value"{{ $cart->foods_id }}>

ولی فقط محصول اول رو میگیره.

ارسال پاسخ

سهیل رضایی

@rezaesoheil 3 سال پیش مطرح شد

@arminrahmati999
کد blade و event handler جاوا اسکریپت رو هم بزارید تا کامل بشه راهنمایی کرد و ببینم چه جوری داره عمل میکنه فرآیند آپدیت محصولات کارت

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش آپدیت شد

@rezaesoheil

@php $total = 0; @endphp
                @foreach($carts as $cart)
                <form action="">
                <div class="row clearfix">
                    <div class="item-block-1">
                        <div class="image-wrapper">
                            <div class="image">
                                <a href="{{ $cart->foods->path() }}"><img src="{{ $cart->foods->getImageUrl() }}" style="margin: -10px 0 0 0;" alt="" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="product">
                        <h4><a href="{{ $cart->foods->path() }}">{{ $cart->foods->title }}</a></h4>
                    </div>
                    <input type="hidden" id="foods_id" value="{{ $cart->foods_id }}">
                    <div class="quantity">
                        <select id="quantity" onchange="update()">
                            <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                            <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                            <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                            <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                            <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                            <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                            <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                            <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                            <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                            <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                        </select>
                    </div>
                    <div class="price">
                        {{ $cart->foods->price * $cart->quantity }}
                    </div>
                    <div class="delete">
                        <button type="submit" name="action" value="delete"></button>
                    </div>
                </div>
                    @php $total += $cart->foods->price * $cart->quantity; @endphp
                @endforeach
                </form>
                <div class="row clearfix" style="float: left">
                    <div class="total">
                        <label style="font-size: 18px">
                            قیمت کل:
                        </label>
                        <p>{{ $total }}</p>
                    </div>
                </div>

ارسال پاسخ

سهیل رضایی

@rezaesoheil 3 سال پیش مطرح شد

blade :

<input type="hidden" id="foods_id_{{ $cart->foods_id }}" value="{{ $cart->foods_id }}">

            <div class="quantity">
                <select id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">
                    <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                    <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                    <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                    <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                    <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                    <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                    <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                    <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                    <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                    <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                </select>
            </div>

ajax :


function update(foodId) {
    var foods_id = $('#foods_id').val();
    var quantity = $('#quantity').val();
    $.ajax({
        type: "POST",
        dataType: "json",
        data: {foods_id: foodId, quantity: quantity},
        url: "/edit",
        success: function (data) {
            alert(foods_id);
            const Msg = Swal.mixin({
                toast: true,
                position: 'top-end',
                icon: 'success',
                showConfirmButton: false,
                timer: 3000
            });
            Msg.fire({
                type: 'success',
                title: data.status,
            });
        },
    })
}

id رو از blade به فانکشنت پاس میدی و بعدش از اون آیدی استفاده میکنی توی eventhandler
و اینکه شما داری توی حلقه ای که میزنی دو تا آیدی رو تکرار میکنی که این کار درست نیست. اگر توی حلقه ها میخوایی آیدی بدی به المنت هات باید با استفاده از متغییر توی حلقت یه ایدی یونیک ایجاد کنی

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@rezaesoheil
تشکر از توضیحاتتون ولی متاسفانه الان با ارور زیر مواجه شدم.

POST http://localhost:8000/edit 500 (Internal Server Error)

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@rezaesoheil
در واقع داخل تب Network مقدار foods_id درسته ولی مقدار quantity رو null برمیگردونه

ارسال پاسخ

میلاد خسروی

تخصص : برنامه نویس بامزه

@milwad 3 سال پیش مطرح شد

سلام خسته نباشید
این لینک هارو بررسی کن
https://programmierfrage.com/items/how-to-update-cart-quantity-with-ajax-in-laravel
https://www.codecheef.org/article/laravel-add-to-cart-example-using-ajax-request

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@milwad
تشکر از لینک هایی که فرستادین.
قبل از اینکه سوالمو مطرح کنم خیلی سرچ کردم ولی متاسفانه به نتیجه ای نرسیدم، این لینک هایی هم که فرستادین قبل چک کرده بودم.
آقای @rezaesoheil لطف کردن بهم گفتن که چیکار کنم ولی مقدار quantity رو متاسفانه null برمیگردونه.

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@rezaesoheil
@milwad
من به تگ select یه name دادم، به صورت زیر:

<select name="qty" id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">

بعد کد ajax قسمت var quantity رو به صورت زیر نوشتم:

var quantity = $('select[name="qty"]').val();

فرض کنید 2 تا محصول داخل سبد خرید هست، از محصول اول 3 عدد و از محصول دوم 5 عدد، حالا وقتی مثلا تعداد محصول اول رو به 7 تغییر میدم درسته و مشکلی نداره ولی وقتی مقدار محصول دوم رو تغییر میدم مقدار آپدیت شده محصول اول که الان 7 هست رو میذاره واسه محصول دوم، یعنی تعداد هر دو محصول الان شده 7، در واقع مقدار محصول اول رو برای بقیه قرار میده.
ممنون میشم راهنمایی کنید.

ارسال پاسخ

فرشید مرادی

تخصص : noob

@eniack 3 سال پیش مطرح شد

سلام دوست عزیز ، ببینید ای دی یک اینپوت باید منحصر به فرد باشه ما یه اینپوت با یه ای دی میتونیم داشته باشیم ، پس شما وقتی داری value یه اینپوت رو میگیری باید ببینی کجا کلیک شده براساس کلاس و بعد دسترسی داشته باشی به value الکی کداتو تغییر نده همون دو‌خطی که اینپوت رو‌میگیری براساس کلاسش کن

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@eniack
چیزی که شما گفتین هم انجام دادم ولی نشد.

<input type="hidden" id="foods_id_{{ $cart->foods_id }}" value="{{ $cart->foods_id }}">
                    <div class="quantity">
                        <select class="qty" id="food_quantity_{{ $cart->foods_id }}" onchange="update({{ $cart->foods_id }})">
                            <option value="1" {{ $cart->quantity == '1' ? 'selected' : '' }}>1</option>
                            <option value="2" {{ $cart->quantity == '2' ? 'selected' : '' }}>2</option>
                            <option value="3" {{ $cart->quantity == '3' ? 'selected' : '' }}>3</option>
                            <option value="4" {{ $cart->quantity == '4' ? 'selected' : '' }}>4</option>
                            <option value="5" {{ $cart->quantity == '5' ? 'selected' : '' }}>5</option>
                            <option value="6" {{ $cart->quantity == '6' ? 'selected' : '' }}>6</option>
                            <option value="7" {{ $cart->quantity == '7' ? 'selected' : '' }}>7</option>
                            <option value="8" {{ $cart->quantity == '8' ? 'selected' : '' }}>8</option>
                            <option value="9" {{ $cart->quantity == '9' ? 'selected' : '' }}>9</option>
                            <option value="10" {{ $cart->quantity == '10' ? 'selected' : '' }}>10</option>
                        </select>
                    </div>

$.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update(foodId) {
                var quantity = $('.qty').val();
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foodId, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }

ارسال پاسخ

فرشید مرادی

تخصص : noob

@eniack 3 سال پیش مطرح شد

نه عزیز اینطوری نیست ،
کد ajax شما چه زمانی اجرا میشه؟ وقتی روی کدوم المنت کلیک بشه اجرا میشه؟

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@eniack
سلکت باکس.

ارسال پاسخ

فرشید مرادی

تخصص : noob

@eniack 3 سال پیش آپدیت شد

به این صورت بنویسید

var quantity = $(this).val()

این ولیو گزینه انتخاب شده رو برمیگردونه

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@eniack
هیچ اتفاقی نمیوفته.
داخل console هم ارور زیر رو نمایش میده.

Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at init.val (jquery.min.js:2105:44)
    at update (carts:234:40)
    at HTMLSelectElement.onchange (carts:83:87)

ارسال پاسخ

فرشید مرادی

تخصص : noob

@eniack 3 سال پیش مطرح شد

این کد رو

var quantity = $(this).val()

قبل از $.ajaxSetup({ بزارید و الرت بگیرید

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@eniack
الرتی نشون نداد

var quantity = $(this).val();
            alert(quantity);
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            function update(foodId) {
                $.ajax({
                    type: "POST",
                    dataType:"json",
                    data: {foods_id:foodId, quantity:quantity},
                    url: "/edit",
                    success: function (data) {
                        const Msg = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        Msg.fire({
                            type: 'success',
                            title: data.status,
                        });
                    },
                })
            }

ولی ارور زیر رو داد:

 POST http://localhost:8000/edit 419 (unknown status)

ارسال پاسخ

رضا جهانگیر

تخصص : Full-Stack Developer

@rezajahangir 3 سال پیش مطرح شد

var quantity = $('#food_quantity_'+foodId).val();

موفق باشید.

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

ویرایش سبد خرید با Ajax

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید