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

آپدیت قیمت کل با Ajax

سلام دوستان.
من میخوام وقتی تعداد محصولات تغییر کرد، قیمت کل هم تغییر کنه:
کد blade:

@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_{{ $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>
                    <div class="price" id="updatePrice_{{ $cart->foods_id }}">
                        {{ $cart->foods->price * $cart->quantity }}
                    </div>
                    <input type="hidden" id="price_id_{{ $cart->foods_id }}" value="{{ $cart->price }}">

                    <div class="delete">
                        <button type="submit"></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>

کد ajax:

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

ممنون میشم راهنمایی کنید


ثبت پرسش جدید
امید نامی
@omid.nami.110 2 سال پیش آپدیت شد
0

من خودم از لایو وایر استفاده میکنم هیچوقت با این مشکلات مواجه نمیشم و لایو وایرو برای پروژه های بعدیت پیشنهاد میدم.
ولی با ajax
کل کداتو بکن تو یه فایل بلید بلید دیگه
اینجا با جا وا اسکریپت بگو صفحه که لود شد فانکشنی که ویو اون فایل توشه لود بشه و هر تغییریم دادی همین کارو بکن
متد load()


    $(document).ready(function (){
       $('.root').load('URL_FUNCION');
    });
    function update(foodId) {
        var quantity = $('#food_quantity_'+foodId).val();
        var price = $('#price_id_'+foodId).val();
        $.ajax({
            type: "POST",
            dataType:"json",
            data: {foods_id:foodId, quantity:quantity, price:price},
            url: "/edit",
            success: function (data) {
                $('.root').load('URL_FUNCION');

                const Msg = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    showConfirmButton: false,
                    timer: 3000
                });
                Msg.fire({
                    type: 'success',
                    title: data.status,
                });
            },
        })
    }```
    <section class="root"></section>

Armin Rahmati
@arminrahmati999 2 سال پیش مطرح شد
0

@omid.nami.110
سلام و تشکر بابت وقتی که گذاشتید.
فکر نمیکنم روشی که گفتین خیلی جالب باشه، من میخوام مثه آپدیت قیمت هر محصول که داخل کد ایجکسم هست، زمانی که محصولی قیمتش تغییر میکنه قیمت جدید به اضافه قیمت کل بشه.


Armin Rahmati
@arminrahmati999 2 سال پیش آپدیت شد
0

من کدمو به صورت زیر تغییر دادم:
blade:

<p id="total">{{ $total }}</p>
<input type="hidden" id="total_id" value="{{ $total }}">

ajax:

var total_id = parseInt($('#total_id').val());
document.getElementById('total').innerHTML = total_id + (price * quantity) - price;

فرض کنید 3 تا محصول به تعداد یک که قیمت هر محصول به ترتیب 10 هزار تومن، 20 هزار تومن و 30 هزار تومن هست رو به سبد خرید اضافه کردیم که جمعش میشه، 60 هزار تومن.
حالا وقتی تعداد محصول اول دوتا بشه، 20 هزار تومن به جمع کل اضافه میشه، یعنی قیمت در حال حاضر 80 هزار تومن هست، اما مشکل اینجاس که اگه تعداد محصول دوم دوتا بشه، باید 30 هزار تومن به جمع کل اضافه بشه، یعنی قیمت بشه 110 هزار تومن، در حالی که میاد 30 هزار تومن رو به 60 هزار تومن اضافه میکنه و جمع کل رو 90 نشون میده.
ممنون میشم راهنمایی کنید.


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

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