WordPress中的可变表格文本取决于折扣代码

在ajax调用中处理服务器响应,并用页面上已经显示的值替换从服务器接收到的值。

是的,很简单。

编辑

<table id="rates">
    <tbody>
        <tr>
            <td>
                Single
            </td>
            <td>
                1
            </td>
            <td class="Price">
                140
            </td>
        </tr>
        <tr>
            <td>
                Double
            </td>
            <td>
                2
            </td>
            <td class="Price">
                210
            </td>
        </tr>
        <tr>
            <td>
                Suite
            </td>
            <td>
                4
            </td>
            <td class="Price">
                320
            </td>
        </tr>
    </tbody>
</table>
<input type="text" placeholder="Enter discount code" id="promocode">
<button id="discount">
    Apply discount
</button> 
<span id="message"></span>

在Wordpress插件目录中创建一个新目录,并将其命名为折扣代码或类似的东西,然后将以下内容保存为检查折扣代码。php:

<?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
}

然后,最后将以下内容保存在与custom\u discount\u 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
                }
            }
    });
});

确保在php文件中设置了表所在站点的页面名称/ID,然后激活wordpress仪表板中的插件,就可以开始了。在我的一个wordpress安装上进行了测试和工作。