وب کافه

یک سایت دیگر با وردپرس فارسی
آگاه سازی Live برای بادی پرس
نویسنده:
11 دسامبر 14

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

حال برای اینکه کاربر ما نخواهد دوباره صفحه را لود کند باید نمایش آگاه سازی ما هم بروز شود

خب برای این کار ما نیاز به کد زیر داریم که در function.php قالبمون کپی کنیم

 

function  ajax_notifi_all_load(){
  
		echo '<ul>';		
		if ( $notifications =bp_notifications_get_notifications_for_user( get_current_user_id(), $format='simple'  )) { 
			 $counter = 0 ; 
			 for ( $i = 0; $i < count($notifications); $i++ ) { 
			 $alt = ( 0 == $counter % 2 ) ? ' class="alt"' : ''; ?>
			<li class="notif unread" <?php echo $alt ?>><?php echo $notifications[$i] ?></li>
			<?php $counter++; 
			 } 
			 }else{
	 ?>
	 <li><a href="<?php echo $bp->loggedin_user->domain ?>"><?php _e( 'No new notifications.', 'buddypress' ); ?></a></li>
	 <?php
	 }
		echo '</ul>';
	wp_die( );   	
}
add_action( 'wp_ajax_ajax_notifi_all_load', 'ajax_notifi_all_load' );
add_action( 'wp_ajax_nopriv_ajax_notifi_all_load', 'ajax_notifi_all_load' );

با کد بالا  ما دستور می دهیم برای هر بار فرا خوانی ، آگاه سازی بروز شود اما برای اینکار ما به کد جاوا که در زیر آمده نیاز داریم

$(document).ready(function () {
 $(".notificationicon").click(function () {
 $(this).toggleClass("open");
 $("#notificationMenu").toggleClass("open");
 $(".not").fadeOut("slow");
 $.ajax({
 url: ajaxurl,
 type: 'post',
 data: {'action': 'ajax_notifi_all_load' },
 beforeSend: function() { 
 $('#loading').show();
 },
 success: function (html) {

 $(".notifbox").html(html);
}
 });
 return false; 
 });
});

خب تا حالا ما فراخوانی ها را انجام دادیم اما باید در قالبمون هم کدهای html را قرار دهیم تا آگاه سازی را نمایش دهد و برای اینکار ما به کد زیر نیاز داریم

			<a href="#" class="notificationicon on">آگاه سازی</a>
			<div class="not"></div>			 
			<ul id="notificationMenu" class="notificationstop">
			<li class="titlebar"><span class="title">
			<?php __('Notifications', 'buddypress');?></span></li>	
			<div class="notifbox"><div id="loading"></div></div>
			<li class="seeall"><a href="<?php echo bp_loggedin_user_domain();?>notifications">نمایش همه</a></li>
            </ul>

 

حالا برای استایل دادن باید  کدهای css را در استایل قالب قرار دهیم

.notificationstop {
  max-width: 300px;
  width: 300px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 0px;
  box-shadow: 0px 0px 20px #666;
  position: absolute;
  display: none;
  top: 35px;
  transition: .2s;
  left: 180px;
}
.notificationstop:before {
  content: '';
  height: 10px;
  width: 10px;
  display: block;
  position: absolute;
  top: -20px;
  left: 140px;
  border: 10px solid #fff;
  border-color: transparent transparent #fff transparent;
}
.notificationstop.open {
  display: block;
  transition: .2s;
}
.notificationstop li.titlebar {
    border-bottom: 1px solid #CCC;
    color: #666;
    font-size: 12px;
    cursor: inherit;
    padding: 2px 5px;
}
.notificationstop .notifbox {
    max-height: 300px;
    overflow: auto;
}
.notificationstop li.seeall {
    text-align: center;
    font-size: 12px;
    min-height: 30px;
    text-transform: uppercase;
    position: relative;
    border-top: 1px solid #CCC;
}

#loading{
background: url("../images/bp-ajax-loader.gif") no-repeat;
	width: 30px !important;
	height: 14px !important;	
	margin: 10px auto !important;
	display: none;
}
.not {
    float: right;
    margin: 1px auto;
    background: none repeat scroll 0% 0% #E02424;
    position: absolute;
    left: 335px;
    top: 5px;
    padding: 0px 3px;
    color: #FFF;
    font: bold 0.8em mitra,Helvetica;
    border-radius: 3px;
}

تمام  شد !! اگر مشکل و یا سوالی داشتین حتما بیان کنید.

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *