سبد خرید با 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="https://roocket.ir/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="https://roocket.ir/product.html">{{ $details['title'] }}</a></strong>
<span class="light-clr qty">
تعداد : {{ $details['quantity'] }}
<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="https://roocket.ir/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');
}
});
});
});
پاسخ‌ها
41
سلام
می تونید با جی کوئری این کار رو انجام بدید.
تگ قیمت کل رو بروز رسانی کنید البته یه کلاس یا آی دی مشخص هم بهش بدید.
<div class="span6 align-right size-16" id="amount">{{ $total }}</div>var amount = ''; // قیمت کل رو محاسبه کنید
$("#amount").html(amount);
@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);
}
});
});
});گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
ببینید شما یک آی دی دارید با نام cartBtn که وقتی کلیک میشه تابع مربوط به گرفتن قیمت و ارسال به روت و کنترل اجرا میشه، البته این آی دی توی بلید مشخص نیست!
حالا اگر صفحه ریفرش بشه قاعدتا شما مشکلی ندارید چون تغییرات از طریق سشن فراخوانی میشه و همه چیز درسته اما مشکل شما وقتی است که صفحه رفرش نشده و شما میخواهید هم مقادیر توی سشن و هم مقادیر صفحه با هم مطابقت داشته باشه.
پس برای حل این مشکل کافیه محاسبات رو توی جی کوئری همون صفحه انجام بدید و المنت مربوطه رو مقدار دهی کنید.
بالا هم توضیح دادم به این شکل عمل کنید.
یعنی وقتی فرایند انجام شد المنت رو بروز کنید.
$("#amount").html(amount);الان مشکل کجاست؟
@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&subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
<link href="https://roocket.ir/{{ asset('stylesheets/bootstrap.css') }}" rel="stylesheet">
<link href="https://roocket.ir/{{ asset('stylesheets/responsive.css') }}" rel="stylesheet">
<link href="https://roocket.ir/{{ asset('js/rs-plugin/css/settings.css') }}" type="text/css" rel="stylesheet"/>
<link href="https://roocket.ir/{{ asset('js/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" type="text/css" rel="stylesheet"/>
<link href="https://roocket.ir/{{ asset('js/prettyphoto/css/prettyPhoto.css') }}" type="text/css" rel="stylesheet"/>
<link href="https://roocket.ir/{{ 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="https://roocket.ir/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="https://roocket.ir/product.html">{{ $details['title'] }}</a></strong>
<span class="light-clr qty">
تعداد : {{ $details['quantity'] }}
<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="https://roocket.ir/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>
سلام.
success:function() {
$("#amount").html(amount);
}شما اینجا داری مقداری رو که قبلا توی صفحه بروزرسانی شده رو میگیری و همون رو چاپ میکنی. شما باید مقدار amount رو با مقداری که از بک اند میگیری بروزرسانی کنی. توی ایجکس متد success یه مقداری رو اگه از بک اند به صورت آرایه برگردونی میتونی به صورت زیر بهش دسترسی داشته باشی و کارهایی که میخوای رو روش انجام بدی.
توی بک اند بعد از اینکه session رو برزورسانی کردی متغیر cart رو return کن و چون به صورت آرایه هست میتونی اینور بگیریش و استفاده کنی. حالا اگه میخوای مثلا یه محصولی رو که quantity اضافه شد رو توی بلید بروزرسانی کنی به این صورت استفاده کن.
success:function(result) {
}اینجا یه آرگومان به نام result رو میتونی توی success بگیری و اول یه console.log بگیر ببین چه مواردی رو برمیگردونه و بعد بسته به نیازت ازشون استفاده کن و توی تگ های html که میخوای نشون بده بدون رفرش صفحه.
***توصیه میکنم بری سمت livewire که کار با این موارد رو خیلی خیلی راحتتر میکنه برای شما.
@amin.webdesign
ببینید مشکل اینجاست که متغیر
$product_idداخل یه بلید و متغیر
$amountداخل بلید دیگس و وقتی واسه $product_id لاگ میگیرم، آی دی رو نشون میده ولی واسه $amount هبچی نشون نمیده.
یعنی شما وقتی توی یه صفحه ای به نام سبد خرید تغییرات میدید میخواید یه صفحه دیگه ای که توی یه تب دیگه باز هست همون لحظه تغییرات توی اون هم نشون داده بشه؟
@arminrahmati999
@amin.webdesign
نه.
ببینید من یه بلید اصلی دارم که فقط شامل هدر و فوتر میشه، که تو قسمت بالا که کدا بلید رو فرستادم میشه اولی.
و بلید دوم که مجدد کداشو بالا فرستادم میشه قسمتی که محصولات نمایش داده میشه و کاربر با کلیک بر روی باتن خرید، به سبد خرید اضافه میشه، حالا میخوام این اتفاق بدون رفرش توی هدر اتفاق بیوفته، در واقع بدون رفرش صفحه قیمت توی هدر تغییر پیدا کنه.
سلام
بهتره با جی کوئری اون بخش رو refresh کنید . راستش درست تابعش رو به خاطر ندارم دیگر دوستان احتمالا می دونند .
یا یک کار دیگه ای که میتونید بکنید با ajax درخواست بفرستید و اطلاعاتی که باید در اون بخش اضافه بشوند را دریافت کنید و به این صورت اضافه کنید :
$("tag").append("<b>Appended text</b>");مشکلتون حل شد؟
وقتی که داری محصول جدید اضافه میکنی.. چک کن که از قبل مبلغ کل داری یا نه؟
اگه داشتی که مبلغ جدید + مبلغ کل میشه
اگرم نه که مبلغ جدید میشه مبلغ کل
@ali.bayat
سلام.
جناب بیات من مشکلی تو محاسبه قیمت ندارم، در واقع همه چی به درستی کار میکنه ولی میخوام بدون رفرش صفحه محصولات به سبد خرید اضافه بشه.
کد ajax ای که نوشتم رو بی زحمت یه نگاه کنید.
سلام من لاراول دولوپر نیستم ولی تاجایی ک میبینم تو ای جکس چیزی برنگشته که بخوای عوض کنی درسته ؟
من تا جایی که بلدم اینکه وقتی با ای جکس چیزی میفرستی به روتر و بک اند باید ی استتوسی برگردونی مثلا بعد انجام کار توسط بک اند
return JsonResponse({'status': 'ok'})حالا اینو با ایجکس باید بگیری تو فانکشن ساکسس و بعد بیای کارایی کنی تو فانکشن ساکسس برای اپدیت صفحه ات مثلا قیمت عوض کنی
success: function(data){
if(data['status'] == 'ok'){
$('#following_btn').text(btn_text)
$('#following_btn').attr({'class':btn_class})
}
}من اینجا گفتم اگه استتوس اکی بود برو مثلا این المنت هایی که ایدیشو دادم برو اپدیت کن
ولی من چیز خاصی تو فانکشن ساکسس شما ندیدم که بگی برو قسمت قیمت مثلا اپدیت کن و ....
روزبخیر
بعد اینکه محصول به سبد خرید اضافه شد ویوی کارتتونو return میکنیدو با ایجکس در جایگاه خودش میچسبونید
@salmaniamir13
@hosseinshirinegad98
دوستان مشکل من اینه که سبد خریدم تو یه ویو و محصولات تو ویو دیگه هست و تو قسمت ajax نمیدونم که باید چجور کد بنویسم.
@salmaniamir13
$('#following_btn').text(btn_text)
$('#following_btn').attr({'class':btn_class})میشه توضیح بدین به جای following_btn آیدی چیو بدم؟ (با توجه به ویویی که دارم) و همچنین text و attr؟
@arminrahmati999 منظورت اینه که اون ویو دیگه داخل یک روت دیگه هست یا داری ویو سبد خرید رو به خوده این صفحت اضافه میکنی ؟
اینطور که من میبینم سبد خرید هم داخل همین صفحست که محصولات رو انتخاب میکنه ، خب دوست عزیز شما فقط ایدیه دیوی که مربوط به سبد خرید هست رو میخای کار نداری که داخل یک ویو دیگ هست اینا اخره کار به یک صفحه کامل کامپایل میشن
@ajdar9667
خب دقیقا باید چطور بنویسم؟
document.getElementById(id).innerHTML = '<p>محصول اضافه شد!</p>' ; اینرو هنگامی که پاسخ ایجکس موفقیت امیز بود انجام بده یا هر تگی که لازمه رو اضافه کن به این div البته ایدی div رو بهش بده