I try to show the item in product page that it added to wishlist without reload but I can only remove wishlsit items in product page without reload using ajax ,so I can’t show items without reload and I want to show items that after adding items to wishlist without page refresh.
Product Page Blade
@Extends('layouts.base')
@section('content')
@foreach($car_lists as $car_list)
<li class="item odd cars_data">
<div class="product-image"> <a href="{{route('car.detail', ['id' => $car_list->id])}}" title="">
<!-- Begin responsive list slider -->
<div class="w-m-280px mb-12px mt-10px">
<div class="list-slide-container">
<div class="list-slide-items aspect-ratio-4-3 w-100">
<div class="slide-items">
@php
$images = explode('|', $car_list->images);
@endphp
@if($car_list->images)
@for($i = 0; $i < 4; $i++)
<div class="slide-items-list ">
<div class="slide-items-image-wrapper">
<img class="slide-items-image " src="{{asset('images')}}/{{$images[$i]}}" alt=""></div>
<div class="slide-items-button"><i class="fas fa-circle"></i></div>
</div>
@endfor
@else
<div class="slide-items-list ">
<div class="slide-items-image-wrapper ">
<img class="slide-items-image" src="{{asset('images/car.png')}}" alt=""></div>
<div class="slide-items-button"><i class="fas fa-circle"></i></div>
</div>
@endif
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ratings">
<div class="rating-box">
<div style="width:50%" class="rating"></div>
</div>
</div>
<div class="desc std">
<p>There's no text!</p>
</div>
<div class="price-box">
<div class="price-display" style=" margin-left:2rem; margin-top: 3rem; font-size: 20px; font-weight: 700; ">
<hr>
<span class="result_two"> {{number_format($car_list->price)}}</span>
<hr>
</div>
</div>
<div class="actions action-button">
**<!-- add item to wishlist -->**
@auth
@php
$countWishlist = 0;
@endphp
@php
$countWishlist = AppModelsWhislist::countWishlist($car_list['id'])
@endphp
<input type="hidden" name="car_id" class="car_id" value="{{$car_list->id}}">
<button class="button ajx-cart addwishlist addToWhislist" value="{{$car_list->id}}" type="button" style="background-color: lightgrey; cursor: pointer;">
@if($countWishlist > 0)
<i class="fas fa-heart"></i>
@else
<i class="far fa-heart"></i>
@endif
</button>
@endauth
<!-- end -->
</div>
</li>
@endforeach
<ul class="pagination">
{!! $car_lists->links('pagination') !!}
</ul>
<aside class="col-left sidebar col-sm-3 col-xs-12 col-sm-pull-9 wow bounceInUp animated">
**<!-- This is my wishlist in product page that I' can't show items there without page refresh -->**
@auth
@php
$wishlist = AppModelsWhislist::where('user_id', auth()->user()->id)-
>orderBy('created_at','DESC')->paginate(3, ['*'], 'wishlist_favorites');
@endphp
<div class="block block-list block-cart">
<div class="block-title">My Favorites </div>
<div class="block-content">
<div class="summary">
<p class="amount"><a href="#"> <span class="wishlist-count">0</span></a> </p>
</div>
@if($wishlist->count() > 0)
<p class="block-subtitle">new favorites</p>
@else
<p class="block-subtitle"><img src="{{asset('assets/images/favourite.png')}}" width="30px"> No favorites! </p>
@endif
<ul id="cart-sidebar" class="mini-products-list">
@if($wishlist->count() > 0)
@foreach($wishlist as $item)
<li class="item wishlist_data">
<div class="item-inner"> <a href="{{route('car.detail', ['id' => $item->cars->id])}}" class="product-image">
@php
$wish_images = explode('|', $item->cars->images);
@endphp
@if($item->cars->images)
@for($i = 0; $i < 1; $i++)
<img src="{{asset('asset/images')}}/{{$wish_images[$i]}}" width="80"
alt="product">
@endfor
@else
<img src="{{asset('assets/images/sports-car.png')}}" width="80" alt="product">
@endif
</a>
<div class="product-details">
<input type="hidden" class="car_id" value="{{$item->cars->id}}">
<div class="access"> <a href="#" class="btn-remove1 remove-whislist-item">Remove</a>
<a href="#" title="Edit item" class="btn-edit">
<i class="icon-pencil"></i><span class="hidden">Edit item</span></a> </div>
<!--access-->
<div style="margin-left: 10px;">
<p class="product-name"><a href="{{route('car.detail', ['id' => $item->cars->id])}}">
<span class="block-span-price">{{$item->cars->manufacturer}} {{$item->cars->model}} </span>
</a></p>
<hr>
<span class="price"><span class="block-span-price">
{{number_format($item->cars->price)}}
</span>
</div>
</div>
<!--product-details-bottoms-->
</div>
</li>
@endforeach
{{$wishlist->links('pagination2')}}
@endif
</ul>
</div>
</div>
@endauth
<!-- end -->
</aside>
@endsection
This is my ajax code below that I want to show items using ajax but how should I do? I tried many times to fix it but I couldn’t.
Ajax code
$(document).ready(function () {
loadwishlist();
$('.addToWhislist').click(function (e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var Click = $(this);
var car_id = $(Click).closest('.cars_data').find('.car_id').val();
var cars_id = $(Click).closest('.wishlist_data').find('.car_id').val();
$.ajax({
type: "POST",
url: '/add-to-whislist',
data: {
'car_id': car_id,
'cars_id': cars_id,
},
success: function(response){
if (response.action == 'add') {
$(Click).closest('.cars_data').find('.addwishlist').html('<i class="fas fa-heart"></i>');
loadwishlist();
}
else if (response.action == 'remove') {
$(Click).closest('.cars_data').find('.addwishlist').html('<i class="far fa-heart"></i>');
loadwishlist();
}
loadwishlist();
}
});
});
function loadwishlist()
{
$.ajax({
type: "GET",
url: '/load-cart-data',
success: function(response){
$('.wishlist-count').html('');
$('.wishlist-count').html(response.count);
}
});
}
$('.remove-whislist-item').click(function (e){
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var Clickedthis = $(this);
var car_id = $(Clickedthis).closest('.wishlist_data').find('.car_id').val();
$.ajax({
type: "POST",
url: '/delete-whislist-item',
data: {
'car_id': car_id,
},
success: function(response){
$(Clickedthis).closest('.wishlist_data').remove();
loadwishlist();
}
});
});
});
Wishlist Controller
<?php
namespace AppHttpControllerscontents;
use AppHttpControllersController;
use IlluminateHttpRequest;
use AppModelsWhislist;
use IlluminateSupportFacadesAuth;
use AppModelsCar;
use AppModelsUser;
class WishlistController extends Controller
{
public function add()
{
if (Auth::check()) {
$car_id = request()->car_id;
$wislist = Whislist::where('user_id',Auth::id())->get()->first();
if (Whislist::where('user_id',Auth::id())->where('car_id', $car_id)->exists()) {
$whish = Whislist::where('car_id', $car_id)->where('user_id',Auth::id())->first();
$whish->delete();
return response()->json(['action' => 'remove', 'status' => 'removed!']);
}
else{
$whish = new Whislist();
$whish->car_id = $car_id;
$whish->user_id = Auth::id();
$whish->save();
return response()->json(['action' => 'add','status' => 'saved']);
}
}
else{
return response()->json(['status' => "Login To Continue"]);
}
}
public function deleteItem()
{
if (Auth::check()) {
$cars_id = request()->input('car_id');
if (Whislist::where('car_id',$cars_id)->where('user_id',Auth::id())->exists()) {
$whish = Whislist::where('car_id',$cars_id)->where('user_id',Auth::id())->first();
$whish->delete();
return response()->json(['status' => "removed!"]);
}
}
else{
return response()->json(['status' => "Login To Continue"]);
}
}
public function countWislist()
{
$countwislist = Whislist::where('user_id',Auth::id())->count();
return response()->json(['count' => $countwislist]);
}
}