cé ki tes amis ?

Publié le

par

Crédits Photo Day 4- Retro Guess Who by elefun69

Dernièrement, je me suis inscrit sur bp-tricks.com, une communauté très intéressante que je vous conseille pour partager des trucs et astuces sur BuddyPress. Dimanche dernier, je bullais sévère et voulant tester la fonctionnalité de dépôt de « tricks » de cette communauté, j’ai rapidement écrit 2 fonctions pour soumettre ma première contribution.

Elle est disponible ici mais comme j’ai tenté de la rédiger en anglais (en fait on se rapproche plus du franglish!) – que je viens de tomber du lit et que j’arrive pas à me rendormir – je me suis dit que ça vous intéresserait peut-être d’en profiter en français 😉

L’objectif de ce « trick » est d’afficher dans la zone membre d’un utilisateur les avatars de ses amis, un peu comme ce que font twitter et facebook. Or comme le souligne très justement Sarah Gooding sur ce post :

Displaying a user’s friends in the sidebar is something that simply makes sense for a lot of community sites

Je me suis donc lancé dans le bricollage d’un pseudo widget BuddyPress, toujours dans le cadre de mon intranet d’ailleurs. Alors j’aurai très bien pu utiliser le plugin de Sarah me direz vous.. Ben en fait, comme dimanche j’avais un peu la tête à l’envers, je ne l’ai trouvé qu’après avoir développé ce trick! En plus, je m’aperçois qu’après l’avoir testé, leur fonctionnement est légèrement différent. La bonne nouvelle c’est que du coup ça ajoute une alternative à ceux qui veulent bénéficier de ce type de fonctionnalité.

Diagnostic

Si vous recherchez un widget facile à utiliser depuis le menu Apparence – Widgets de l’admin WordPress, l’avantage de l’excellent plugin de Sarah est qu’un simple drag and drop vous permettra instantanément de rajouter à votre dynamic sidebar les avatars des amis de l’utilisateur loggé. En plus, partout ou vous appelez la dynamic sidebar, ces avatars seront affichés

Si vous souhaitez afficher non plus les seuls amis de l’utilisateur loggé mais ceux des utilisateurs affichés tout en disposant d’un ajax pour filtrer sur ceux qui sont en ligne… Alors va falloir mettre les mains dans le cambouis et continuer la lecture de cet article ! Petite précision : dans ce cas les avatars ne seront affichés que dans la zone membre de l’utilisateur (siteurl/members/utilisateur).

Préparer la sidebar

Dans le template sidebar.php de votre thème, on va ajouter quelques lignes de code juste avant l’appel de la fonction dynamic_sidebar

<?php

/* Show friends avatar */
if ( bp_is_member() ) : 
    imath_bp_display_friends();
endif; ?>

Cap sur le functions.php de votre thème

Définitivement très pratique ce fichier 😉 Il s’agit donc de lui ajouter le code ci-dessous :

<?php
function imath_bp_display_friends() {
    global $bp;
    $user_id = $bp->displayed_user->id;
    $user_all_friends_url = $bp->displayed_user->domain . BP_FRIENDS_SLUG;
    ?>
        <div id="friends-list" class="widget friends-list">
            <h3 class="widgettitle">
                Amis - <a href="<?php echo $user_all_friends_url;?>">Tous</a> - <span id="onoroffline">
                <a href="javascript:imathSwitchToOnlineFriends('online')">En ligne</a></span>
            </h3>
            
            <div id="friends-container">
                <?php if ( bp_has_members( 'user_id='.$user_id.'&per_page=10&max=10&populate_extras=0' ) ) : ?>
                    <?php while ( bp_members() ) : bp_the_member(); ?>
                        <div class="item-avatar">
                            <a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar() ?></a>
                        </div>
                    <?php endwhile; ?>
                <?php else:?>
                    <p>Aucun ami !</p>
                <?php endif;?>
            </div>
            
            <br style="clear:both"/>
        </div>
    <?php
}

function imath_bp_get_friends_to_display() {
    global $bp;
    $user_id = $bp->displayed_user->id;
    
    if ( isset( $_POST['offoronline'] ) ) {
        $type = $_POST['offoronline'];
    } else {
        $type = 'offline';
    }
    
    if( $type == 'offline' ) {
        $args = 'user_id='.$user_id.'&per_page=10&max=10&populate_extras=0';
    } else {
        $args = 'user_id='.$user_id.'&type=online&per_page=10&max=10&populate_extras=0';
    }
    
    if ( bp_has_members( $args ) ) :
        while ( bp_members() ) : bp_the_member(); ?>
            <div class="item-avatar">
                <a href="<?php bp_member_permalink() ?>">
                    <?php bp_member_avatar() ?>
                </a>
            </div>
        <?php endwhile; elseif( $type == 'online' ) : ?>
            <p>Aucun ami en ligne</p>
    <?php else : ?>
            <p>Aucun ami!</p>
    <?php endif ;

    die();
}
add_action( 'wp_ajax_imath_bp_display_online_friends', 'imath_bp_get_friends_to_display' );

function imath_bp_display_friends_js() {
    if ( bp_is_member() ){
        ?>
        <script type="text/javascript">
            function imathSwitchToOnlineFriends( type ) {
                var data = {
                    action: 'imath_bp_display_online_friends',
                    offoronline: type
                };
                
                jQuery.post( ajaxurl, data, function( response ) {
                    jQuery( '#friends-container' ).html( response );
                    
                    if ( type == 'online' ) {
                        jQuery( '#onoroffline' ).html( '<a href="javascript:imathSwitchToOnlineFriends('offline')">Hors et En ligne</a>' );
                    } else {
                        jQuery( '#onoroffline' ).html('<a href="javascript:imathSwitchToOnlineFriends('online')">En ligne</a>');
                    }
                } );
            }
        </script>
        <?php
    }
}
add_action('wp_footer','imath_bp_display_friends_js');

Résultat en images !

Illustration des différents états

Une fois dans son espace membre ou celui d’un autre, l’utilisateur se trouve devant l’état 1 qui liste jusqu’à 10 avatars de ses amis. Quand il clique sur « En ligne » et qu’aucun de ses amis n’est en ligne, il arrive sur l’état 2, sinon sur l’état 2 bis. En cliquant sur Tous, il est dirigé sur la page BuddyPress qui liste l’intégralité des amis pour un utilisateur.

Une réponse à “cé ki tes amis ?”