coding ajax click counter on wordpress

Question

i need help coding an ajax click counter for wordpress.... i have tried for a few days and can't seem to figure it out. i have a template page that lists a custom post type and displays mixtapes/albums and all of them are downloadable. the template page is coded in php so the links are a variable and not static html. i need to create a counter that counts and displays how many times each download link is clicked.... so a click counter....

this is the code for a link on the template page.

<a href="<?php echo get_post_meta($post->ID,'mixtape_link',true); ?>" class="button small"><span>Download Now!</span></a>

i have tried tons of scripts and plugins and cant seem to figure it out.

if someone could post an example code or do this for me it would be greatly appreciated

not at the moment thats what im asking... how do i track and display the hits? — skapaid
– skapaid, Commented Oct 12, 2014 at 1:19
You may want to just create a table in your db and save each hit into it when someone downloads it. There are a lot of ways to record it so to go into that would be pretty extensive. — Rasclatt
– Rasclatt, Commented Oct 12, 2014 at 1:21

David · Accepted Answer · 2014-10-12 11:06:51Z

1

html:

<a href="<?php echo get_post_meta($post->ID,'mixtape_link',true); ?>" id="thisdownloads" class="button small"><span>Download Now!</span></a>

<script>
    jQuery(document)ready(function() {

      jQuery(this).on('change', '#thisdownloads', function() {

        jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",

        data: {
            action: 'update_downloads',
            ID: '<?php get_the_ID(); ?>'// if within the loop you need a correct id for this to work...........
        },
        success: function (output) {}
           console.log(output);
        });


      });
    });

</script>

php:

    add_action('wp_ajax_update_downloads', 'update_downloads');
add_action('wp_ajax_nopriv_update_downloads', 'update_downloads');

function update_downloads() {

  $id= sanitize_text_fields($_POST['ID']);

  $downloads= get_post_meta($id,'_downloads',true);

  if(!$downloads):
     $downloads=1;
  else:
     $downloads++;
  endif;

  update_post_meta($id,'_downloads', $downloads);
  echo $downloads;
  exit();

}

should be close enough, if you cant make this work you need to research the following:

jquery "on" change
2.jquery safe mode (wordpress)
jquery ajax wordpress
wordpress ajax functions add action
update_post_meta

edited Oct 12, 2014 at 11:06

answered Oct 12, 2014 at 2:28

David

5,9373 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

skapaid Over a year ago

i put the html in the template file and the php in my functions php file and made sure there was no blank spaces but i still get a blank white page now, any idea?

David Over a year ago

sorry couple of brackets missing, i updated it there. If this is a dev server, you should turn on php errors, save you a lot of headaches!

skapaid Over a year ago

i tried the updated version and the white page is gone, but when i click the download button nothing happens...... no page refresh no count up and it doesnt display any counting?...... it might be logging it in the back end im not sure but its not displaying it in the front end

David Over a year ago

console.log(output); you need to get used to using the console as well. In chrome or firefox right click on a page element and go to "inspect element", a new screen will open up and you will see console at the top. You need to handle the output in the success function above, you could have a div with the count in it etc. you can access the count with php with get_post_meta(get_the_ID(), '_downloads',true)

Collectives™ on Stack Overflow

coding ajax click counter on wordpress

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related