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的安裝工作。

玩得開心。