How to have Download button with download counter?

  • Hi,

    I am building a download website and I want display a download button in my theme, the download button should display click counter too.

    Example: Click to download (505)

    It must has a shortcode to place into the content.

    Please advice!
    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can update the count using jQuery. Paste below code in your shortcode output.

    
<button id="download-btn" type="button">Download</button>
<div id="show-count"></div>

    and below code in your js file.

    
jQuery( document ).ready( function() {
	jQuery('#download-btn').click(function() {
	    jQuery('#show-count').html(function(i, val) {
	    	return val*1+1 
	   	});
	});
});

    Via jQuery we can count the number of times Download button has been clicked and we can display that near button.

    Thread Starter whateverfree2

    (@whateverfree2)

    Thanks for your help
    Here is my code:

    // Link button
function quicklinkbutton( $atts) {
    extract(shortcode_atts(array( 
                'link' => '',
                'content' =>'',
		'a' => "'"               
                ), $atts));
   return '<a href="javascript:void(0)" target="_blank" onclick="window.open('.$a.''.$link.''.$a.');" class="quick-button">'.$content.'</a>';
}
add_shortcode( 'quicklink', 'quicklinkbutton' );
?>

    And the shortcode I used in my content is:

    [quicklink link="https://downloadlink.com/files.zip" content="download"]

    How to merger your code with mine to have a download button with counter?

    Thanks

    
// Link button
function quicklinkbutton( $atts) {
    extract(shortcode_atts(array( 
                'link' 		=> '',
                'content'	=>'',
				'a' 		=> "'"               
                ), $atts));
    $html = '<a href='.$atts["link"].' id="download-btn" download>';
	$html .= '<div id="show-count"></div>';
	return $html;
}
add_shortcode( 'quicklink', 'quicklinkbutton' );

    Place above jQuery code in your js code and you can change css as per you want.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to have Download button with download counter?’ is closed to new replies.