Need help in creating a click counter

I am trying to create a click counter for my Coupon Website. I am trying to count number of times each coupon is clicked.

I am receiving the value of the counter using

<?php
							$couponusers = get_field('coupon_users');
							?>

Next, I have created the coupon button,

<?php if( get_field('coupon_or_deal') == 'Coupon' ): ?>
								<p onclick="myFunction()" align="center"><a href="<?php the_field('coupon_link'); ?>" target="_blank" align="center" rel="noopener" class="wpc-button" data-click-text="<?php the_field('coupon_code'); ?>">
								 Show Coupon
								</a></p>

Next, I am displaying the number of people used this coupon:

Coupon was Used: <p id="demo"><?php echo $couponusers ?></p> Times

Now, I am incrementing the counter,

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

Till this when I click the button, the counter gets increased. But, I need to update this

Next, I added

<?php update_field('counter', $couponusers); ?>

where counter is the variable created for the javascript. But, the js ends before updating $couponusers. How to update this before js ends?

Hi @nirmalkumar1997!

Need to update what? If there some markup code missing, you’ll have to escape it by formatting it as code.

It’s actually the other way round: PHP serves the page to the client (including JS), and then the JS gets executed in the browser; at this point, the PHP script has long finished running. If you want to communicate something back to the server without leaving the page, you’ll have to send an AJAX request.

BTW, from the get_field() function I reckon this is a wordpress instance w/ ACF? In this case you might update the database entry by sending an XHR to the WP REST API…

Thanks @m3g4p0p.

As per your suggestion, I tried to send an ajax request.

To test this working, I used in this code my default coupon page,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='inc/js/jquery-1.11.2.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
    </script>
    <script type="text/javascript">
    function myFunction() {
            var currentNumber = $('#currentNumber').text();
            var postId = "<?php echo $postId ?>";
            $.ajax({
                method: 'POST',
                url: '/wp-content/themes/Divi-child/counter.php',
                data: {currentNumber : currentNumber, postId : postId}
            })
            .done(function(newNumber){
                $('#currentNumber').text(newNumber);
            })
            .fail(function(message){
                $('#currentNumber').text('there has been a problem');
            });

	}
    </script>
    <div id="currentNumber">0</div>
    <p onclick=myFunction()> Click me </p>

And I created a separate php file called counter.php. Here is the complete code,

<?php
$currentNumber = $_POST['currentNumber'];
$postId = $_POST['postId'];


function increment($currentNumber) {
    $newNumber = $currentNumber + 1;
    return $newNumber;
}

echo increment($currentNumber);
update_field('coupon_users', $currentNumber, $postId); 
?>

But, on the coupon page, when I hit click me, I get an error

1<br /> <b>Fatal error</b>: Uncaught Error: Call to undefined function update_field() in /home/onliphqt/public_html/deals/wp-content/themes/Divi-child/counter.php:12 Stack trace: #0 {main} thrown in <b>/home/onliphqt/public_html/deals/wp-content/themes/Divi-child/counter.php</b> on line <b>12</b><br />
Click me

I don’t understand, why this considers update_field as undefined function. This function used to work in all my default Wordpress pages.

Because the PHP code doesn’t seem to have a function called update_field() defined in it? Should there be an include in the PHP code to allow you to use that function? I don’t know Wordpress, but consider that when calling from Ajax, that PHP code is all there is, so to use external functions you’ll have to include a reference to them. The fact that your original page might have been drawn from PHP that included the correct stuff is not relevant, as @m3g4p0p said above, that’s all finished by the time you see the page.

1 Like

Well, is counter.php a wordpress page? Looks just like a regular PHP script so far, which happens to reside in a wordpress theme directory… anyway I’d suggest to update the counter via aforementioned the REST API. It should also work with ACF… or you might create your own counter endpoint, here’s a tutorial how to do this.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.