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

Question

我正在研究一个WordPress网站上的“费率”页面，该页面应该包含房价（价格）表和折扣代码下方的输入栏。 根据可用的两种折扣代码之一，如果其中一个折扣代码输入正确，则原始表格单元格内的所有数字应更改为预设的固定值。

基本上，我在寻找一种方法在WordPress上在页面上有一个输入字段，验证2个不同的密码，并导致页面上的另一个文本动态更改。

我有这个工作的一个旧的HTML这样的网站：

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

这是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'); } ?> 

这就是即将改变是最后3个细胞在这个信息表：

<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> 
</tbody></table> 

感谢

Answer 1

将事件侦听器绑定到您的折扣代码输入字段，并通过ajax将该值提交给发生更改的服务器。

查询数据库中的代码，并在代码匹配时按照您认为合适的方式返回值。

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

所以是的，很容易。

编辑

我给你做一个WordPress插件。它非常简单，但它做你想做的，并希望展示如何把一个插件的wordpress的基本概念。

我对您的HTML进行了一些更改。我不得不为所有包含价格的TD添加一个类，以便jQuery可以迭代这些值，并且我添加了一个用于输入代码的输入框，一个提交按钮和一个空的span标签，它将结果显示给用户。您可以更改这些以适应，但如果您更改ID，您将不得不在JavaScript文件中更改对它们的引用。

我的HTML看起来像这样：

<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插件目录下新建一个目录，并把它称为折扣码或类似的东西，那么以下内容作为检查的折扣，code.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_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 
       } 
      } 
    }); 
}); 

确保在php文件中已经在表格所在的站点上设置了页面的名称/ ID，然后在wordpress仪表板中激活插件，您应该很好。经过测试，并在我的一个WordPress的安装工作。

玩得开心。