- forget old ajax wp, now use fetch wp

- trying js files without imports
This commit is contained in:
asus
2024-02-26 13:18:19 +01:00
parent 5794e4cafe
commit 0177531924
11 changed files with 65 additions and 42 deletions

View File

@@ -20,7 +20,7 @@ if (!defined('ABSPATH')) {
/**
* plugin dir root
*/
include_once( plugin_dir_path(__FILE__) . '/utils/plugin_tools.php');
include_once( plugin_dir_path(__FILE__) . '/utils/plgntls_class.php');
PLGNTLS_class::set_root_dir( plugin_dir_path(__FILE__), plugin_dir_url(__FILE__) );
/**
@@ -369,7 +369,7 @@ function fipfcard_ajax_handler()
wp_send_json_success( array
(
'It works',
"data_received" => $_POST['postid'],
"data_received" => $_POST,
),
200
);

View File

@@ -2,13 +2,16 @@ const inputElement = document.getElementById('mytext');
const sendButton = document.getElementById('mybutton');
sendButton.addEventListener('click', () => {
const inputValue = inputElement.value;
let inputValue = inputElement.value;
inputValue = {
key1: 'value1',
key2: 'value2'
};
inputValue = JSON.stringify(inputValue);
console.log("inputValue:");
console.log(inputValue);
//PLGNTLS_ajax('get_data', inputValue)
PLGNTLS_fetch('get_data', {
body: {inputValue},
})
PLGNTLS_ajax('get_data', inputValue)
//PLGNTLS_fetch('get_data', {body: {inputValue}})
.then((response) => response.json())
.then((data) => {
console.log("dataaa: ");

View File

@@ -1,18 +1,20 @@
import { resultMessage } from './result_message.js';
//import { resultMessage } from './result_message.js';
/**
* @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
*/
export async function createOrder() {
//export async function createOrder() {
async function createOrder() {
try {
const fetch_create_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders";
console.log("fetch_create_url:", fetch_create_url);
const response = await fetch(fetch_create_url, {
//const fetch_create_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders";
//console.log("fetch_create_url:", fetch_create_url);
//const response = await fetch(fetch_create_url, {
const response = await PLGNTLS_fetch('/fipf_plugin/api/v1/orders', {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": PLGNTLS_data.rest_nonce,
//"X-WP-Nonce": PLGNTLS_data.rest_nonce,
},
// use the "body" param to optionally pass additional order information
// like product ids and quantities

View File

@@ -1,18 +1,20 @@
import { resultMessage } from './result_message.js';
//import { resultMessage } from './result_message.js';
/**
* @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
*/
export async function onApprove(data, actions) {
//export async function onApprove(data, actions) {
async function onApprove(data, actions) {
try {
const fetch_approve_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders/" + data.orderID + "/capture";
console.log("fetch_approve_url:", fetch_approve_url);
const response = await fetch(fetch_approve_url, {
//const response = await fetch(fetch_approve_url, {
const response = await PLGNTLS_fetch('/fipf_plugin/api/v1/orders/' + data.orderID + '/capture', {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": PLGNTLS_data.rest_nonce,
//"X-WP-Nonce": PLGNTLS_data.rest_nonce,
},
});
@@ -39,14 +41,14 @@ export async function onApprove(data, actions) {
const transaction =
orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
resultMessage(
`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
);
// to show a message on page
//resultMessage(`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,);
console.log(
"Capture result",
orderData,
JSON.stringify(orderData, null, 2),
);
actions.redirect('https://local_fipfcard_plugin.com/');
}
} catch (error) {
console.error(error);

View File

@@ -1,5 +1,5 @@
import { createOrder } from './create_order.js';
import { onApprove } from './on_approve.js';
//import { createOrder } from './create_order.js';
//import { onApprove } from './on_approve.js';
window.paypal.Buttons({

View File

@@ -1,6 +1,7 @@
// Example function to show a result to the user. Your site's UI library can be used instead.
export function resultMessage(message) {
//export function resultMessage(message) {
function resultMessage(message) {
const container = document.querySelector("#result-message");
container.innerHTML = message;
}

View File

@@ -56,6 +56,9 @@ function fipf_paypal_shortcode_content()
$added_to_front = $fipfcard_paypal->add_to_front(
array(
$pp_sdk_src,
'js/paypal/result_message.js',
'js/paypal/create_order.js',
'js/paypal/on_approve.js',
"js/paypal/paypal.js",
"html/paypal/paypal.html",
),

View File

@@ -14,7 +14,6 @@ class PLGNTLS_class
private static $_root_path;
private static $_root_url;
private static $_ajax_already_there;
private $_first_script;
private $_prefix;
private $_js_dependencies;
@@ -23,8 +22,6 @@ class PLGNTLS_class
/**
*/
public function __construct() {
if (! isset( self::$_ajax_already_there ))
self::$_ajax_already_there = false;
$this->_prefix = "PLGNTLS";
$this->_first_script = null;
$this->_js_dependencies = array();
@@ -56,20 +53,16 @@ class PLGNTLS_class
$vars = array();
if (!is_null($scripts_arr))
{
// add ajax file at beginning of files list
array_unshift($scripts_arr, "utils/plugin_ajax.js");
$ajax_nonce = array("ajax_nonce" => wp_create_nonce('wp-pageviews-nonce'));
// add fetch script at beginning of scripts list
array_unshift($scripts_arr, "utils/plgntls_fetch.js");
// for the custom endpoints in rest api to work
// they need to have a nonce named 'wp_rest'
// see : https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/
$rest_nonce = array("rest_nonce" => wp_create_nonce('wp_rest'));
$ajax_url = array("ajax_url" => admin_url('admin-ajax.php'));
$vars = array_merge($vars, $ajax_nonce);
$vars = array_merge($vars, $rest_nonce);
$vars = array_merge($vars, $ajax_url);
$fetch_nonce = array("fetch_nonce" => wp_create_nonce('wp_rest'));
$fetch_url = array("fetch_url" => get_site_url() . "/wp-json");
$vars = array_merge($vars, $fetch_nonce);
$vars = array_merge($vars, $fetch_url);
}
$fetch_url = array("fetch_url" => get_site_url() . "/wp-json");
$vars = array_merge($vars, $fetch_url);
$scripts = array();
foreach($scripts_arr as $key => $script_name) {
@@ -203,10 +196,10 @@ class PLGNTLS_class
}
/*
* uncomment to print all enqueued scripts, can be usefull
*/
global $wp_scripts;
error_log("wp_scripts->queue:");
error_log(json_encode($wp_scripts->queue));
*/
}
private function check_dependencies(&$script, $previous_basename)

View File

@@ -0,0 +1,12 @@
function PLGNTLS_fetch(url, options = {}) {
console.log("inside PLGNTLS_fetch");
url = PLGNTLS_data.fetch_url + url;
options.headers = options.headers || {};
options.headers['X-WP-Nonce'] = PLGNTLS_data.fetch_nonce,
console.log("options:", options);
return fetch(url, options);
}

View File

@@ -8,20 +8,25 @@
// OLD VERSION
console.log("PLGNTLS_data");
console.log(PLGNTLS_data);
*/
function PLGNTLS_ajax(action, data_obj) {
const data = new FormData();
data.append("action", action);
data.append("_ajax_nonce", PLGNTLS_data.ajax_nonce);
for (const key in data_obj)
data.append(key, data_obj[key]);
// for (const key in data_obj)
// {
// data.append(key, data_obj[key]);
// }
// console.log("data:", data);
data.append(data_obj);
return fetch(PLGNTLS_data.ajax_url, {
method: "POST",
credentials: "same-origin",
body: data,
hedears: {"Content-Type": "application/json"},
body: JSON.stringify(data),
});
}
*/
// https://stackoverflow.com/q/52657814/9497573
function is_plain_object(obj)
@@ -35,6 +40,7 @@ function is_plain_object(obj)
return true;
}
/*
function PLGNTLS_fetch(src = null, options = null)
{
if (src === null)
@@ -108,3 +114,4 @@ function PLGNTLS_fetch(src = null, options = null)
return fetch(PLGNTLS_data.ajax_url, options);
}
*/

Submodule private updated: 20b675aa38...4d4c187fe5