Переменный текст таблицы в WordPress в зависимости от кода скидки

Я работаю над страницей «Тарифы» на сайте 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>

Спасибо

-2

Решение

Свяжите прослушиватель событий со своим полем ввода кода скидки и попросите его передать значение через ajax на сервер при изменении.

Запросите код в вашей базе данных и возвращайте значения по своему усмотрению, если код соответствует.

Обработайте ответ сервера в вашем вызове ajax и подставьте значения, полученные от сервера, значениями, уже отображенными на вашей странице.

Так что да, довольно легко.

редактировать

Я сделал вам плагин WordPress. Это действительно просто, но делает то, что вы хотите, и, надеюсь, демонстрирует базовую концепцию того, как собрать плагин для WordPress.

Я сделал пару изменений в вашем HTML. Мне пришлось добавить класс ко всем TD, которые содержали цену, чтобы jQuery мог перебирать значения, и я добавил поле ввода для ввода кодов, кнопку для отправки и пустой тег span, который отображает результат для пользователь. Вы можете изменить их так, чтобы они подходили, но если вы измените идентификаторы, вам придется изменить ссылки на них в файле 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 создайте новый каталог и назовите его discount-коды или что-то в этом роде, затем сохраните следующее как check-discount-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-файле вы установили имя / идентификатор страницы на вашем сайте, где находится таблица, затем активируйте плагин на вашей панели управления WordPress, и вам будет хорошо. Протестировано и работает на одной из моих установок WordPress.

Повеселись.

0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector