ワードプレスの可変テーブルテキスト

Question

WordPressサイトの「料金」ページでは、客室料金（価格）のテーブルと割引コードの入力フィールドを含むはずです。 利用可能な2つのディスカウントコードのいずれかに応じて、元のテーブルセル内のすべての番号が、そのディスカウントコードの1つが正しく入力されていれば、あらかじめ設定された固定値に変更されます。

基本的には、2つの異なるパスワードを検証し、ページ上の別のテキストの結果が動的に変更されるような入力フィールドをページに持つようWordPressで探しています。

<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個の細胞で変わろうとしていた情報：

は、私がこのように古いHTMLサイトに取り組んでいました表：

<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呼び出しでサーバーの応答を処理し、サーバーから受け取った値をページにすでに表示されている値で置き換えます。

だから、かなり簡単です。

編集

私はあなたのワードプレスのプラグインを作りました。その本当にシンプルですが、それはあなたが欲しいものを行い、うまくいけば、ワードプレスのためのプラグインを組み立てる方法の基本的なコンセプトを実証しています。

私はあなたのHTMLをいくつか変更しました。私は価格を含むすべてのTDにクラスを追加して、jQueryが値を反復できるようにしなければなりませんでした。コードを入力するための入力ボックス、送信するボタン、および空のスパンタグを追加しました。ユーザー。これらを変更することはできますが、IDを変更する場合は、javascriptファイル内のIDへの参照を変更する必要があります。ディレクトリはチェックイン割引-code.phpとして以下を保存し、新しいディレクトリを作成し、値引き・コードまたはそのような何かそれを呼び出すプラグインあなたのWordpressの中

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

：

私のHTMLは次のようになります。

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

そして、最終的には

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 
       } 
      } 
    }); 
}); 

custom_discount_code.jsと同じディレクトリに次を保存

phpファイルで、テーブルのあるページの名前/ IDを設定していることを確認してから、wordpressダッシュボードでプラグインを有効にしてください。私のwordpressのインストールの1つをテストし、働いています。

楽しんでください。