Я пытаюсь добавить функциональность, когда пользователи могут добавлять товары в корзину, не обновляя страницу с помощью Ajax. Мне удалось отправить данные в базу данных, но я не могу обновить список автоматически (после публикации данных).
Ajax
jQuery(document).ready(function(){
jQuery("#addtocartt{{$one->id}}").on('click',function(e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "/addtocart",
method: 'post',
data: {
data: jQuery("#name{{$one->id}}").val(),
image: jQuery("#image{{$one->id}}").val(),
price: jQuery("#price{{$one->id}}").val(),
quantity: jQuery("#quantity{{$one->id}}").val(),
},
success: function(result){
var xs = result.qte;
swal(xs+"Kgs of {{$one->name}}", "Is Added to Cart !!", "success");
}});
});
});
Вот мой список, который я хочу обновить.
@foreach($list as $one)
<text style="font-family: Poppins-ExtraLight;"> {{$one->cart_item}} : {{$one->quantity}} x {{$one->cart_price}} dh = {{$one->quantity*$one->cart_price}}</text> <br>
@endforeach
контроллер
function Add(Request $request){
$item = new cart;
$item->user_id = Auth::user()->id;
$item->cart_number = '0';
$item->cart_item = $request->data;
$item->quantity = $request->quantity;
$item->cart_price = $request->price;
$item->image = $request->image;
$item->save();
$list= cart::all()->where('user_id',Auth::user()->id)->where('state','=','delivering');
return response()->json(['qte' => $item->quantity]);
}
Я не проверял это, но предполагая $list
переменная возвращает корзину, вы можете сделать что-то вроде этого:
Ваш шаблон лезвия
<div id="some-list-container">
@foreach($list as $one)
<text style="font-family: Poppins-ExtraLight;"> {{$one->cart_item}} : {{$one->quantity}} x {{$one->cart_price}} dh = {{$one->quantity*$one->cart_price}}</text> <br>
@endforeach
</div>
Ваш контроллер
return response()->json(['list' => $list, 'item' => $item]);
Ваш Javascript
...
success: function(result) {
var item = result.item;
var list = result.list;
swal(item.quantity + "Kgs of " + item.name, "Is Added to Cart !!", "success");
// clear the list
jQuery("#some-list-container").empty()
// loop through the response list
for(var i=0; i < list.length; i++) {
// add to the list
var add_item = list[i];
jQuery("#some-list-container").append('<text style="font-family: Poppins-ExtraLight;"> '
+ add_item.cart_item + ' : '
+ add_item.quantity + ' x '
+ add_item.cart_price + ' dh = '
+ (add_item.quantity * add_item.cart_price)
+ '</text> <br>')
}
}
...
Надеюсь, что это ставит вас на правильный путь
Других решений пока нет …