Like & Dislike functionality using JavaScript

Question

I want to add Like & Dislike functionality into my custom post type, called game.

I have placed like and dislike icon links in my post footer.

Desired Behaviour:

When a user clicks the like icon, I want to check if (s)he already voted for it and if not then create or update post like count meta key inside the post meta and same goes for the user meta.

Problem:

The problem is when a user clicks the like button, I have to handle it inside the JavaScript but I am not sure how to call

set_post_meta($post->ID)

or

update_post_meta($post->ID)

from JavaScript.

Loop:

<?php while ( $r->have_posts() ) : $r->the_post();?>
    <?php if (has_post_thumbnail()): ?>
        <?php the_post_thumbnail('small'); ?>
    <?php endif;?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <div class="game-footer">
        <div class="like-dislike-btn-div">
            <i class="game-footer-like-btn fa fa-thumbs-o-up">0</i>
            <i class="game-footer-dislike-btn fa  fa-thumbs-o-down">0</i>
        </div>
    </div>
<?php  endwhile; ?>

Answer 1

I hope you are doing well. Here, I am sharing code for recording likes. The code for single.php have the javascript code for making an ajax call to a wp function. This wp function have the code to store like expressions and it will return you the total number of like expressions recorded on post.

I have curated it for only the Logged in users.

Place this code in your functions.php

/* Ajax call */
add_action('wp_ajax_likeExpression', 'likeExpression');
function likeExpression() {
    if(is_user_logged_in()){
        $post_id = $_GET['post_id'];
        $userId = get_current_user_id();
        $metaKey = '_like_on_game_post_';
        $userLikes = get_user_meta($userId, $metaKey, true);

        if(empty($userLikes)){
            update_user_meta($userId, $metaKey, wp_json_encode([$post_id]));
        }else{
            $userLikes = json_decode($userLikes);
            if(!in_array($post_id, $userLikes)){
                array_push($userLikes, $post_id);
                update_user_meta($userId, $metaKey, wp_json_encode($userLikes));
            }
        }

        $postLikeCount = get_post_meta($post_id, '_like_count_on_post_', true);
        update_post_meta($post_id, '_like_count_on_post_', ++$postLikeCount);
        exit($postLikeCount);
    }
}

Place this in single.php, (before footer ends)

<?php if(is_user_logged_in()): ?>
    <script>
    jQuery(function($){
        $('.game-footer-like-btn').on('click', function(){
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php?action=likeExpression&post_id='.get_the_ID()) ?>',
                method: 'get',
            }).done(function(res){
                console.log(res)
                //if its done
            });
        });
    });
    </script>
<?php endif; ?>

Please, feel free to contact if you any query. Thank You :)

Answer 2

I don't understand how u can count like in javascript only. Use wp_ajax_ACTION Hook to call your PHP functions, in your functions.php or in a plugin.

https://developer.wordpress.org/reference/files/wp-admin/admin-ajax.php/

add_action("wp_ajax_my_function", "my_function");

function my_function() {
 // Get parameters send by javascript xhr method

 // Do some stuff
}

add_action("wp_ajax_nopriv_my_function") for no user logged in.