A. Without ajax load with page loading
<a class="bell_notification_clicker" href="#"> <img src="{{ asset('/assets/') }}/img/icon/bell.svg" alt="">
<?php
$purchase_plan_count = DB::table('purchase_plan')->where('notification', 0)->count();
if($purchase_plan_count > 3){
$purchase_plan_count = 3;
}
?>
<span>{{$purchase_plan_count}}</span>
</a>
<!--notification start -->
<div class="Menu_NOtification_Wrap">
<div class="notification_Header">
<h4>Notifications</h4>
</div>
<div class="Notification_body">
<?php
$purchase_plan_arr = DB::table('purchase_plan')->where('notification', 0)->orderby('id', 'desc')->paginate(3);
foreach($purchase_plan_arr as $purchase_plan_ar){
?>
<!-- start -->
<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="{{url('/')}}/view-customer/{{$purchase_plan_ar->id}}"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm3RFDZM21teuCMFYx_AROjt-AzUwDBROFww&s" alt="" style="widths:50px"></a>
</div>
<div class="notify_content">
<a href="{{url('/')}}/view-customer/{{$purchase_plan_ar->id}}"><h5>{{$purchase_plan_ar->name}} </h5></a>
<p>{{$purchase_plan_ar->email}}</p>
</div>
</div>
<!-- end -->
<?php } ?>
</div>
<div class="nofity_footer" style="display:none">
<div class="submit_button text-center pt_20">
<a href="#" class="btn_1">See More</a>
</div>
</div>
</div>
<!--notification end -->
B. With ajax load with page loading
# Frontend Side
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
let fetch_meals_notifications = "{{route('load_notification')}}";
$(document).ready(function(){
function getNotificationStatus(){
$.ajax({
url: fetch_meals_notifications,
method:'POST',
data:{_token: '{{csrf_token()}}'},
success:function(data){
if(data){
$('.Notification_body').html(data);
}
else{
$('.Notification_body').html('<p>No Records Found..');
}
}
// success end
});
}
getNotificationStatus();
setInterval(getNotificationStatus, 1000);
});
</script>
function load_notification(Request $req){
$purchase_plan_arr = DB::table('purchase_plan')->where('notification', 0)->orderby('id', 'desc')->paginate(3);
foreach($purchase_plan_arr as $purchase_plan_ar){
?>
<!-- start -->
<div class="single_notify d-flex align-items-center">
<div class="notify_thumb">
<a href="<?php echo url('/'); ?>/view-customer/<?php echo $purchase_plan_ar->id; ?>"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm3RFDZM21teuCMFYx_AROjt-AzUwDBROFww&s" alt="" style="widths:50px"></a>
</div>
<div class="notify_content">
<a href="<?php echo url('/'); ?>/view-customer/<?php echo $purchase_plan_ar->id; ?>"><h5><?php echo $purchase_plan_ar->name; ?> </h5></a>
<p><?php echo $purchase_plan_ar->email; ?></p>
</div>
</div>
<!-- end -->
<?php
}
}
Route::post('/notification_close', [CrudController::class, 'notification_close'])->name('notification_close');
function notification_close(){
DB::table('contact')->update([
'notification' => 1,
]);
DB::table('purchase_plan')->update([
'notification' => 1,
]);
}
C. Fetch notification numbers
<script>
let load_notification_numbers_url = "{{route('load_notification_numbers')}}";
$(document).ready(function(){
function load_notification_numbers(){
$.ajax({
url: load_notification_numbers_url,
method:'POST',
data:{_token: '{{csrf_token()}}'},
success:function(data){
if(data){
$('#notify').html(data);
}
else{
}
}
// success end
});
}
load_notification_numbers();
setInterval(load_notification_numbers, 1000);
});
</script>
function load_notification_numbers(){
$purchase_plan_count = DB::table('purchase_plan')->where('notification', 0)->count();
$contact_form_contact = DB::table('contact')->where('notification', 0)->orderby('id', 'desc')->count();
if($purchase_plan_count > 3){
$purchase_plan_count = 3;
}
if($contact_form_contact > 3){
$contact_form_contact = 3;
}
echo $purchase_plan_count + $contact_form_contact;
}
