user-avatar
Armin Rahmati
3 سال پیش توسط Armin Rahmati مطرح شد
41 پاسخ

سبد خرید با ajax

سلام.
من وقتی محصول به سبد خریدم اضافه میکنم، اضافه میشه ولی میخوام قیمت محصولی هم بعد از اضافه شدن به سبد خرید بدون رفرش شدن صفحه مبلغش آپدیت بشه ولی در حال حاضر این اتفاق نمیوفته.
روت:

Route::get('add-to-cart/{id}', [HomeController::class, 'addToCart'])->name('add.to.cart');

کنترلر:

public function addToCart($id)
    {
        $product = Product::findOrFail($id);

        $cart = session()->get('cart', []);

        if(isset($cart[$id])) {
            $cart[$id]['quantity']++;
        } else {
            $cart[$id] = [
                "title" => $product->title,
                "quantity" => 1,
                "price" => $product->price,
                "image" => $product->image
            ];
        }

        session()->put('cart', $cart);
    }

بلید:

<div class="span3">
                        <div class="cart-container" id="cartContainer">
                            @if(session('cart'))
                                @foreach(session('cart') as $id => $details)
                            <div class="cart">
                                <p class="items">سبد خرید <span class="dark-clr">{{ $details['quantity'] }}</span></p>
                                <p class="dark-clr hidden-tablet">$1816.90</p>
                                <a href="checkout-step-1.html" class="btn btn-danger">
                                    <i class="icon-shopping-cart"></i>
                                </a>
                            </div>
                            <div class="open-panel">

                                <div class="item-in-cart clearfix">
                                    <div class="image">
                                        <img src="{{ $details['image'] }}" width="124" height="124" alt="cart item" />
                                    </div>
                                    <div class="desc">
                                        <strong><a href="product.html">{{ $details['title'] }}</a></strong>
                                        <span class="light-clr qty">
                                    تعداد : {{ $details['quantity'] }}
                                    &nbsp;
                                    <a href="#" class="icon-remove-sign" title="Remove Item"></a>
                                </span>
                                    </div>
                                    <div class="price">
                                        <strong>{{ $details['price'] }}</strong>
                                    </div>
                                </div>

                                <div class="summary">
                                    <div class="line">
                                        @php $total = 0 @endphp
                                        @foreach((array) session('cart') as $id => $details)
                                            @php $total += $details['price'] * $details['quantity'] @endphp
                                        @endforeach
                                        <div class="row-fluid">
                                            <div class="span6">جمع کل :</div>
                                            <div class="span6 align-right size-16">{{ $total }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="proceed">
                                    <a href="checkout-step-1.html" class="btn btn-danger pull-right bold higher">تصویه حساب <i class="icon-shopping-cart"></i></a>
                                    <small>هزینه ارسال بر اساس منطقه جغرافیایی محاسبه میشود. <a href="#">اطلاعات بیشتر</a></small>
                                </div>
                            </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>

کد ajax:

$(document).ready(function () {
                $('#cartBtn').click(function () {
                    var product_id = $('#product_id').val();
                    $.ajax({
                       type: 'get',
                       url: '/add-to-cart/' + product_id,
                        success:function() {
                            alert('done');
                        }
                    });
                });
            });
گزینش سوالات
همه سوالات حل شده حل نشده بدون پاسخ
گفت و گو های مرتبط
ویرایش سبد خرید با Ajax
مشکل در سبد خرید هنگام بک زدن سبد خالی میشه باید رفرش کنم
آپدیت شدن سشن بدون رفرش صفحه مانند اضافه شدن محصول به سبد خرید
باگ سبد خرید ووکامرس - کمک
ارسال اطلاعات با ایجکس
سبد خرید با php
سبد خرید با laravel
سبد خرید اینترنتی
ذخیره سبد خرید با محصولات با رنگ های مختلف
نمایش سبد خرید با axios
دسته ‌بندی سوالات
لاراول طراحی_وب جاوااسکریپت فریمورک_ها وردپرس امنیت Html_Css جاوا PHP فیدبک_سایت جی_کوئری تجربه_کاربری رابط_کاربری متفرقه اندروید پایتون nodejs vuejs آنگولار reactjs فلاتر سیستم__عامل_ها شبکه سخت_افزار عمومی سئو
تگ‌های محبوب
ثبت پرسش جدید
user-avatar
حسن حکمتی
تخصص : برنامه نویس وب و بلاکچین
@hekmati 3 سال پیش مطرح شد
0

سلام
می تونید با جی کوئری این کار رو انجام بدید.
تگ قیمت کل رو بروز رسانی کنید البته یه کلاس یا آی دی مشخص هم بهش بدید.

<div class="span6 align-right size-16" id="amount">{{ $total }}</div>
var amount = ''; // قیمت کل رو محاسبه کنید  
$("#amount").html(amount);
ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@hekmati
یعنی کدمو باید به این صورت بنویسم؟

$(document).ready(function () {
                $('#cartBtn').click(function () {
                    var product_id = $('#product_id').val();
                    var amount = $('#amount').val();
                    $.ajax({
                       type: 'get',
                       url: '/add-to-cart/' + product_id,
                        success:function() {
                            $("#amount").html(amount);
                        }
                    });
                });
            });
ارسال پاسخ
user-avatar
حسن حکمتی
تخصص : برنامه نویس وب و بلاکچین
@hekmati 3 سال پیش مطرح شد
0

ببینید شما یک آی دی دارید با نام cartBtn که وقتی کلیک میشه تابع مربوط به گرفتن قیمت و ارسال به روت و کنترل اجرا میشه، البته این آی دی توی بلید مشخص نیست!
حالا اگر صفحه ریفرش بشه قاعدتا شما مشکلی ندارید چون تغییرات از طریق سشن فراخوانی میشه و همه چیز درسته اما مشکل شما وقتی است که صفحه رفرش نشده و شما میخواهید هم مقادیر توی سشن و هم مقادیر صفحه با هم مطابقت داشته باشه.
پس برای حل این مشکل کافیه محاسبات رو توی جی کوئری همون صفحه انجام بدید و المنت مربوطه رو مقدار دهی کنید.
بالا هم توضیح دادم به این شکل عمل کنید.
یعنی وقتی فرایند انجام شد المنت رو بروز کنید.

$("#amount").html(amount);

الان مشکل کجاست؟

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش آپدیت شد
0

@hekmati
بذارید کامل تر توضیح بدم. من دوتا بلید دارم به صورت زیر:


<html>
<head>
    <meta charset="utf-8">
    <title>وب سایت فروشگاهی{{ $title ?? '' }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ProteusThemes">
    <link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&amp;subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
    <link href="{{ asset('stylesheets/bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('stylesheets/responsive.css') }}" rel="stylesheet">
    <link href="{{ asset('js/rs-plugin/css/settings.css') }}" type="text/css" rel="stylesheet"/>
    <link href="{{ asset('js/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" type="text/css" rel="stylesheet"/>
    <link href="{{ asset('js/prettyphoto/css/prettyPhoto.css') }}" type="text/css" rel="stylesheet"/>
    <link href="{{ asset('stylesheets/main.css') }}" rel="stylesheet">
    <script src="{{ asset('js/modernizr.custom.56918.js') }}"></script>
</head>
<body>
<div class="span3">
                        <div class="cart-container" id="cartContainer">
                            @if(session('cart'))
                                @foreach(session('cart') as $id => $details)
                            <div class="cart">
                                <p class="items">سبد خرید <span class="dark-clr">{{ $details['quantity'] }}</span></p>
                                <a href="checkout-step-1.html" class="btn btn-danger">
                                    <i class="icon-shopping-cart"></i>
                                </a>
                            </div>
                            <div class="open-panel">

                                <div class="item-in-cart clearfix">
                                    <div class="image">
                                        <img src="{{ $details['image'] }}" width="124" height="124" alt="cart item" />
                                    </div>
                                    <div class="desc">
                                        <strong><a href="product.html">{{ $details['title'] }}</a></strong>
                                        <span class="light-clr qty">
                                    تعداد : {{ $details['quantity'] }}
                                    &nbsp;
                                    <a href="#" class="icon-remove-sign" title="Remove Item"></a>
                                </span>
                                    </div>
                                    <div class="price">
                                        <strong>{{ $details['price'] }}</strong>
                                    </div>
                                </div>

                                <div class="summary">
                                    <div class="line">
                                        @php $total = 0 @endphp
                                        @foreach((array) session('cart') as $id => $details)
                                            @php $total += $details['price'] * $details['quantity'] @endphp
                                        @endforeach
                                        <div class="row-fluid">
                                            <div class="span6">جمع کل :</div>
                                            <div class="span6 align-right size-16" id="amount">{{ $total }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="proceed">
                                    <a href="checkout-step-1.html" class="btn btn-danger pull-right bold higher">تصویه حساب <i class="icon-shopping-cart"></i></a>
                                    <small>هزینه ارسال بر اساس منطقه جغرافیایی محاسبه میشود. <a href="#">اطلاعات بیشتر</a></small>
                                </div>
                            </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=126780447403102";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write('<script src="{{ asset('js/jquery.min.js') }}"><\/script>');
    }
</script>

<script src="{{ asset('js/underscore/underscore-min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/rs-plugin/pluginsources/jquery.themepunch.plugins.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/rs-plugin/js/jquery.themepunch.revolution.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery.carouFredSel-6.2.1-packed.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/jquery-ui-1.10.3/touch-fix.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/isotope/jquery.isotope.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap-tour/build/js/bootstrap-tour.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/prettyphoto/js/jquery.prettyPhoto.js') }}" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="{{ asset('js/goMap/js/jquery.gomap-1.3.2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom.js') }}" type="text/javascript"></script>

{{ $scripts ?? '' }}
</body>
</html>
<x-home-layout>
<div class="row">
                            @foreach($products as $product)
                                <input type="hidden" id="product_id" value="{{ $product->id }}">
                                <div class="span4">
                                    <div class="product">
                                        <div class="product-img featured">
                                            <div class="picture">
                                                <img src="{{ $product->getImageUrl() }}" alt="" width="518" height="358" />
                                                <div class="img-overlay">
                                                    <a href="#" class="btn more btn-primary">توضیحات بیشتر</a>
                                                    <button type="button" class="btn buy btn-danger" id="cartBtn">خرید</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="main-titles">
                                            <h4 class="title">{{ $product->price }}</h4>
                                            <h5 class="no-margin">{{ $product->title }}</h5>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
<x-slot name="scripts">
        <script>
$(document).ready(function () {
                $('#cartBtn').click(function () {
                    var product_id = $('#product_id').val();
                    var amount = $('#amount').val();
                    $.ajax({
                        type: 'get',
                        url: '/add-to-cart/' + product_id,
                        success:function() {
                            $("#amount").html(amount);
                        }
                    });
                });
            });
        </script>
    </x-slot>
</x-home-layout>

کاری که هم شما گفتین انجام دادم ولی همچنان باید صفحه رفرش بشه تا تغییرات اعمال بشه.

</body></html>

ارسال پاسخ
user-avatar
امین محمدزاده
تخصص : برنامه نویسی وب - Laravel
@amin.webdesign 3 سال پیش مطرح شد
0

سلام. 

success:function() {
     $("#amount").html(amount);
}

شما اینجا داری مقداری رو که قبلا توی صفحه بروزرسانی شده رو میگیری و همون رو چاپ میکنی. شما باید مقدار amount رو با مقداری که از بک اند میگیری بروزرسانی کنی. توی ایجکس متد success یه مقداری رو اگه از بک اند به صورت آرایه برگردونی میتونی به صورت زیر بهش دسترسی داشته باشی و کارهایی که میخوای رو روش انجام بدی.
توی بک اند بعد از اینکه session رو برزورسانی کردی متغیر cart رو return کن و چون به صورت آرایه هست میتونی اینور بگیریش و استفاده کنی. حالا اگه میخوای مثلا یه محصولی رو که quantity اضافه شد رو توی بلید بروزرسانی کنی به این صورت استفاده کن.

success:function(result) {

}

اینجا یه آرگومان به نام result رو میتونی توی success بگیری و اول یه console.log بگیر ببین چه مواردی رو برمیگردونه و بعد بسته به نیازت ازشون استفاده کن و توی تگ های html که میخوای نشون بده بدون رفرش صفحه.

***توصیه میکنم بری سمت livewire که کار با این موارد رو خیلی خیلی راحتتر میکنه برای شما.

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@amin.webdesign
ببینید مشکل اینجاست که متغیر

$product_id

داخل یه بلید و متغیر

$amount

داخل بلید دیگس و وقتی واسه $product_id لاگ میگیرم، آی دی رو نشون میده ولی واسه $amount هبچی نشون نمیده.

ارسال پاسخ
user-avatar
امین محمدزاده
تخصص : برنامه نویسی وب - Laravel
@amin.webdesign 3 سال پیش مطرح شد
0

یعنی شما وقتی توی یه صفحه ای به نام سبد خرید تغییرات میدید میخواید یه صفحه دیگه ای که توی یه تب دیگه باز هست همون لحظه تغییرات توی اون هم نشون داده بشه؟
@arminrahmati999

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@amin.webdesign
نه.
ببینید من یه بلید اصلی دارم که فقط شامل هدر و فوتر میشه، که تو قسمت بالا که کدا بلید رو فرستادم میشه اولی.
توضیح تصویر رو وارد کنید
و بلید دوم که مجدد کداشو بالا فرستادم میشه قسمتی که محصولات نمایش داده میشه و کاربر با کلیک بر روی باتن خرید، به سبد خرید اضافه میشه، حالا میخوام این اتفاق بدون رفرش توی هدر اتفاق بیوفته، در واقع بدون رفرش صفحه قیمت توی هدر تغییر پیدا کنه.
توضیح تصویر رو وارد کنید

ارسال پاسخ
user-avatar
علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش آپدیت شد
0

سلام
بهتره با جی کوئری اون بخش رو refresh کنید . راستش درست تابعش رو به خاطر ندارم دیگر دوستان احتمالا می دونند .
یا یک کار دیگه ای که میتونید بکنید با ajax درخواست بفرستید و اطلاعاتی که باید در اون بخش اضافه بشوند را دریافت کنید و به این صورت اضافه کنید : 

$("tag").append("<b>Appended text</b>");
ارسال پاسخ
user-avatar
ایلیا رضابیگی
@ilya2019.r 3 سال پیش مطرح شد
0

مشکلتون حل شد؟

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@ilya2019.r
خیر.

ارسال پاسخ
user-avatar
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 3 سال پیش مطرح شد
0

وقتی که داری محصول جدید اضافه میکنی.. چک کن که از قبل مبلغ کل داری یا نه؟
اگه داشتی که مبلغ جدید + مبلغ کل میشه
اگرم نه که مبلغ جدید میشه مبلغ کل

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@ali.bayat
سلام.
جناب بیات من مشکلی تو محاسبه قیمت ندارم، در واقع همه چی به درستی کار میکنه ولی میخوام بدون رفرش صفحه محصولات به سبد خرید اضافه بشه.
کد ajax ای که نوشتم رو بی زحمت یه نگاه کنید.

ارسال پاسخ
user-avatar
امیر سلمانی
تخصص : backend developer
@salmaniamir13 3 سال پیش مطرح شد
0

سلام من لاراول دولوپر نیستم ولی تاجایی ک میبینم تو ای جکس چیزی برنگشته که بخوای عوض کنی درسته ؟
من تا جایی که بلدم اینکه وقتی با ای جکس چیزی میفرستی به روتر و بک اند باید ی استتوسی برگردونی مثلا بعد انجام کار توسط بک اند

return JsonResponse({'status': 'ok'})

حالا اینو با ایجکس باید بگیری تو فانکشن ساکسس و بعد بیای کارایی کنی تو فانکشن ساکسس برای اپدیت صفحه ات مثلا قیمت عوض کنی 

            success: function(data){
                if(data['status'] == 'ok'){
                    $('#following_btn').text(btn_text)
                    $('#following_btn').attr({'class':btn_class})
                }
            }

من اینجا گفتم اگه استتوس اکی بود برو مثلا این المنت هایی که ایدیشو دادم برو اپدیت کن
ولی من چیز خاصی تو فانکشن ساکسس شما ندیدم که بگی برو قسمت قیمت مثلا اپدیت کن و ....

ارسال پاسخ
user-avatar
حسین شیری نژاد
تخصص : programmer
@hosseinshirinegad98 3 سال پیش آپدیت شد
0

روزبخیر
بعد اینکه محصول به سبد خرید اضافه شد ویوی کارتتونو return میکنیدو با ایجکس در جایگاه خودش میچسبونید

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@salmaniamir13
@hosseinshirinegad98
دوستان مشکل من اینه که سبد خریدم تو یه ویو و محصولات تو ویو دیگه هست و تو قسمت ajax نمیدونم که باید چجور کد بنویسم.
@salmaniamir13 

$('#following_btn').text(btn_text)
$('#following_btn').attr({'class':btn_class})

میشه توضیح بدین به جای following_btn آیدی چیو بدم؟ (با توجه به ویویی که دارم) و همچنین text و attr؟

ارسال پاسخ
user-avatar
امیر علی
تخصص : طراح و توسعه دهنده fullstack
@ajdar9667 3 سال پیش مطرح شد
0

@arminrahmati999 منظورت اینه که اون ویو دیگه داخل یک روت دیگه هست یا داری ویو سبد خرید رو به خوده این صفحت اضافه میکنی ؟

ارسال پاسخ
user-avatar
امیر علی
تخصص : طراح و توسعه دهنده fullstack
@ajdar9667 3 سال پیش آپدیت شد
0

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

ارسال پاسخ
user-avatar
Armin Rahmati
@arminrahmati999 3 سال پیش مطرح شد
0

@ajdar9667
خب دقیقا باید چطور بنویسم؟

ارسال پاسخ
user-avatar
امیر علی
تخصص : طراح و توسعه دهنده fullstack
@ajdar9667 3 سال پیش آپدیت شد
0
document.getElementById(id).innerHTML = '<p>محصول اضافه شد!</p>' ;

اینرو هنگامی که پاسخ ایجکس موفقیت امیز بود انجام بده یا هر تگی که لازمه رو اضافه کن به این div البته ایدی div رو بهش بده

ارسال پاسخ

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

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