JuroC JuroC - 2 years ago 124
PHP Question

Variable table text in WordPress depending on discount code

I'm working on a "Rates" page on a WordPress site that should contain a table of room rates (prices) and a input field down bellow for a discount code.
Depending on one of two discount codes available, all the numbers inside the original table cell should change to a preset fixed value if one of those discount codes is entered correctly.

Basically, I'm looking for a way in WordPress to have a input field on a page that validates 2 different passwords and results in another text on the page to be changed dynamically.

I had this working on an old HTML site like this:

<form id="form1" name="form1" method="get" action="validate.php">
<input type="text" name="dcode" id="dcode" />
<input type="submit" name="button" id="button" value="Enter Promotional Code" />

This was the validate.php

<?php $struser=$_GET['dcode']; IF ($struser=="KOD1") { header( 'Location: dis_10.php'); }
ELSEIF ($struser=="KOD2") { header( 'Location: dis_15.php'); }
ELSEIF ($struser=="KOD3") { header( 'Location: dis_20.php'); }
ELSE { header( 'Location: dis_inv.html'); } ?>

And the info that's about to change is the last 3 cells in this table:

<table id="rates"> <tbody>
<tr><td>Single</td> <td>1</td> <td>140</td> </tr>
<tr><td>Double</td> <td>2</td> <td>250</td> </tr>
<tr><td>Suite</td> <td>4</td> <td>320</td> </tr>


Answer Source

Bind an event listener to your discount code input field and have it submit the value via ajax to the server on change.

Query the code in your database and return values as you see fit if the code matches.

Handle server response in your ajax call and substitue the values received from the server with the ones already displayed on your page.

So yeah, pretty easy.


I made you a wordpress plugin. Its really simple but it does what you want and hopefully demonstrates the basic concept of how to put together a plugin for wordpress.

I made a couple of changes to your HTML. I had to add a class to all the TDs which contained a price so that the jQuery could iterate over the values, and I added an input box for entering the codes, a button to submit and an empty span tag which displays the result to the user. You can change these to suit but if you change the IDs you will have to change the references to them within the javascript file.

My HTML looks like this:

<table id="rates">
            <td class="Price">
            <td class="Price">
            <td class="Price">
<input type="text" placeholder="Enter discount code" id="promocode">
<button id="discount">
    Apply discount
<span id="message"></span>

Within your Wordpress plugin directory create a new directory and call it discount-codes or something like that, then save the following as check-discount-code.php:

* Plugin Name: Check discount codes
* Plugin URI: https://www.example.com
* Description: Simple plugin that uses Ajax in WordPress to check discount codes and apply discounts
* Version: 1.0.0
* Author: miknik
* Author URI: https://www.example.com
* License: GPL2
add_action( 'wp_enqueue_scripts', 'ajax_discount_checker_script' );
function ajax_discount_checker_script() {
    if (is_page('ENTER-YOUR-PAGE-NAME/SLUG/ID-HERE')){  // Use page name/ID with the table on, so the js only loads on that page
        wp_enqueue_script( 'custom_discount_code_js', plugins_url( '/custom_discount_code.js', __FILE__ ), array('jquery'), '1.0', 

true );
        wp_localize_script( 'custom_discount_code_js', 'checkDiscountCode', array(
            'ajax_url' => admin_url( 'admin-ajax.php' )
// Follwing two lines set the 'action' parameter you post to admin-ajax.php followed by the function which is called by that action
// wp_ajax_nopriv sets the function called if user is not logged in while wp_ajax sets the function for logged in users
add_action( 'wp_ajax_nopriv_check_discount_code', 'check_discount_code' ); 
add_action( 'wp_ajax_check_discount_code', 'check_discount_code' );
function check_discount_code() {
    $discountten = 'KOD1'; // These are the discount codes which are valid. Add more or change to suit
    $discountfifteen = 'KOD2'; // If you change or add to them make sure you use uppercase letters
    $discounttwenty = 'KOD3';
    $dcode = strtoupper(sanitize_text_field($_POST['dcode'])); // Sanitizes the POST value and converts to uppercase
    if ($dcode === $discountten) {
        $response = array('message' => 'Your 10% discount has been applied','discount' => 10);
    else if ($dcode === $discountfifteen) {  // Create arrays with a message for the user and a discount rate in percent
        $response = array('message' => 'Your 15% discount has been applied', 'discount' => 15);
    else if ($dcode === $discounttwenty) {
        $response = array('message' => 'Your 20% discount has been applied', 'discount' => 20);
    else {         //  Error message for users who submit an invalid code
        $response = array('message' => 'Sorry the discount code you have entered is not valid', 'discount' => 0);
    echo json_encode($response);  // Output the array as json to be returned to your javascript ajax call
    wp_die(); // Terminates the script - if you omit this then a 0 wil be added to the end of the output which will break your json

Then finally save the following in the same directory as custom_discount_code.js

jQuery( '#discount' ).click(function() {  // Binds this function to run when HTML element with id=discount is clicked
    var dcode = jQuery('#promocode').val();  // Sets variable dcode to the value entered in element with id=promocode
    jQuery.ajax({                         // Makes ajax call to Wordpress ajax url
        url : checkDiscountCode.ajax_url,        // checkDiscountCode is included in wp_localize_script in php file
        type : 'post',                           // this is necessary for users who are not logged in
        dataType: 'json',                        // set the expected server response type to json
        data : {
            action : 'check_discount_code',      // action value must match value defined in add_action in php file
            dcode : dcode                        // posts the dcode variable as $_POST['dcode']
            success : function( response ) {     // the response variable contains the entire json response from the server
                var discount_pct = Number(response.discount);   // adding .discount returns the value of that key in the array
                jQuery('#message' ).text(response.message);   // insert the message into the empty span
                if ( discount_pct > 0) {                      // Only update the prices if the discount is above 0
                    jQuery( '.Price' ).each(function( i ) {   // Iterate over all the prices
                        var price = jQuery( this ).text();    // Get the current price
                        var discount = -(price * discount_pct/100);   // Calculate the discount amount
                        var total = Number(price) + Number(discount);  // Subtract the discount from original price
                        jQuery( this ).text(total.toFixed(0));  // Display the discounted price as a whole number
                    jQuery( '#discount' ).off();  // Disable the button once a discount has been applied

Make sure that in the php file you have set the name/ID of the page on your site where the table is, then activate the plugin in your wordpress dashboard and you should be good to go. Tested and working on one of my wordpress installs.

Have fun.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download