Develop Reference

CSP and script localization in wordpress

I want to properly use Content Security Policy on my Wordpress site, but also not hardcode URIs.
I am moving all my inline scripts to one file, and adding hashes to all script tags to use with Subresource Integrity.
The ajax localization gives me a hard time; It runs PHP to get the JS file name, and outputs it inline to an object (which gets used by ajax calls).
In order to make admin-ajax available, I have
global $wp_query;
wp_localize_script('project-js', 'ajax_object', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'some_vars' => json_encode($wp_query->query)
));
Which outputs:
<script type="text/javascript" id="project-js-js-extra">
/* <![CDATA[ */
var ajax_object = {"ajaxurl":"http:\/\/domain.tld\/wp\/wp-admin\/admin-ajax.php","some_vars":"[]"};
/* ]]> */
</script>
I need to be able to add a hash to this tag but I cannot find the right way.
I'm able to generate it in PHP like:
global $wp_scripts;
$l10n_candidate = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'some_vars' => json_encode( $wp_query->query )
);
$script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = hash('sha256', $script_content);
But I don't know how to add this to the page correctly, and also, this feels too hacky.
Without either outputting this hash, or moving this object creation to my main JavaScript file, the page will not pass my CSP and script will not run.
How do I accomplish this?

As of this moment the only way I could solve it is by using [wp_enqueue_scripts][1], which is the hook used by [wp_enqueue_script][2] when utilizing [wp_localize_script][3]
Doesn't feel like the best solution but it does work.
function abr_ajax_pagi_obj(){
global $wp_query;
$l10n_candidate = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'some_vars' => json_encode( $wp_query->query ),
);
$script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = 'sha256-' . base64_encode(hash('sha256', $script_content,true));
?><script integrity="<?php echo $script_hash?>"><?php
echo $script_content;?></script><?php
}
add_action( 'wp_enqueue_scripts', 'abr_ajax_pagi_obj', 5, 5 );
[1]: https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
[2]: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
[3]: https://developer.wordpress.org/reference/functions/wp_localize_script/

PHP variables resetting after passing javascript variables through AJAX post

I'm trying to make some SQL queries using PHP in Wordpress, to auto populate and check values on a gravity form against the existing database.
To do that however, I'm going to need to pass some javascript variables to php, then use that to interact and pull that data back to the form. As someone with minimal web dev background, easier said then done.
My main issue is with an AJAX call that properly carries over a value, but only to the action function. All other calls will show null (I assume due to scoping, but globals don't seem to help).
The main relevant PHP is in a custom plugin as follows:
$address = 0;
function my_enqueue() {
wp_register_script( 'lead-scheduler', null);
wp_enqueue_script( 'lead-scheduler', plugins_url( '/lead_ajax.js', __FILE__ ), array('jquery') );
wp_localize_script( 'lead-scheduler', 'leadajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'jquery' );
wp_register_script( 'lead_ajax', null);
wp_enqueue_script( 'lead_ajax' );
}
add_action( 'init', 'my_enqueue' );
function handle_request(){
//Check post address, then apply to global variable
echo $_POST['address'] . "\n";
global $address;
$address = $_POST['address'];
echo $address . "\n";
wp_die("RIP");
}
add_action( 'wp_ajax_handle_request', 'handle_request' );
add_action( 'wp_ajax_nopriv_handle_request', 'handle_request' );
function functionCaller() {
if (is_page ('')) {
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(function(){
var addressField = document.getElementById('input_22_2');
var temp;
//Set up event listener
addressField.onchange = addressCheck;
function addressCheck(){
//Get foreign script
$.getScript("/wp-content/plugins/lead-scheduler/lead_ajax.js", function(){
//Wait until done to execute console.log
$.when(adrCheck()).done(function(){
console.log("Logging: " + "<?php global $address; echo $address ?>");
});
});
}
});
});
</script>
<?php
}
}
add_action('wp_head', 'functionCaller'); ?>
The AJAX call comes from a JS file that I call to:
//AJAX
function adrCheck(){
jQuery(document).ready( function() {
console.log("called")
var addressField = document.getElementById('input_22_2').value;
jQuery.ajax({
type : "post",
url : leadajax.ajax_url,
data : {action: "handle_request", address: addressField},
success: function(response) {
console.log(response)
},error: function(response){
console.log(response);
}
})
})
}
The call seems to work, as the echo in handle_request() works fine. But calling that variable anywhere else returns null. $.when.done doesn't seem to do much, nor does anything synchronous.
I'm sure there's something super elementary that I'm missing, but I can't seem to find it.

Adding javascript to php (wordpress)? [duplicate]

This question already has answers here:
How to get JavaScript variable value in PHP
(10 answers)
Closed 5 years ago.
So I am helping my friend with his woocommerce WordPress site. He has some short javascript code that needs to be added to the thank you page for the site.
The javascript code takes three variables (totalCost, orderId and setProductId). I can not get to the HTML. So how do I add this code to the PHP and also, how do I access the variables from the PHP and write them into the javascript?
And where in the already existing code should I add it? Is it in the functions.php file for the theme?
I would be super thankful for help!
EDIT:
So would this work?
add_action( 'studentkortet_tracking', 'my_custom_tracking' );
function studentkortet_tracking($order_id){
?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo ($order->order_total - $order->order_shipping); ?>');
sale.setOrderID('<?php echo $order->id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}

Here is some working code, answered here
<script>
var p1 = "success";
</script>
<?php
echo "<script>document.writeln(p1);</script>";
?>

Here's the correct way of accessing PHP variables within a script. It utilises the function wp_localize_script() so that PHP variables are accessible in a script file. First include this file in your functions.php file
function example_enqueue_scripts() {
if( is_checkout() ) {
$args = array( 'total_cost' => 443, 'order_id' => 4567, 'set_product_id' => 123 );
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js' );
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
}
add_action( 'wp_enqueue_scripts', 'example_enqueue_scripts' );
Then include this javascript in a file under your theme folder called checkout-script.js for example.
(function( $ ) {
'use strict';
$(function() {
var totalCost = checkout_script.total_cost;
var orderId = checkout_script.order_id;
var setProductId = checkout_script.set_product_id;
exampleFunction( totalCost, orderId, setProductId );
function exampleFunction( totalCost, orderId, setProductId ) {
//Do something in here
//alert(totalCost);
}
});
})( jQuery );

I don't know what setProductId is meant to be as a variable, but the hook you are looking for is woocommerce_thankyou. The $order_id is passed by default, which you can then use to grab the order object. Pretty much all the info related to the order can be accessed through the setter/getter methods on the order object.
/**
* Print Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id ); ?>
<script id="pap_x2s6df8d" src="http://URL_TO_PostAffiliatePro/scripts/trackjs.js" type="text/javascript">
</script>
<script type="text/javascript">
PostAffTracker.setAccountId(’xxxxxx’);
var sale = PostAffTracker.createSale();
sale.setTotalCost('<?php echo $order->get_total() - $order->get_shipping_
(); ?>');
sale.setOrderID('<?php echo $order_id; ?>');
sale.setCurrency('<?php echo $order->get_order_currency(); ?>');
PostAffTracker.register();
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );
Editing to add an alternative for enqueuing the scripts as suggested by #Andrew-Schultz. Using the woocommerce_thankyou hook gets you easy access to the $order_id, which would otherwise need to be retrieved from the URL. You will still access the javascript variables as he's shown in his answer.
/**
* Enqueue Javascript on Thankyou page.
* #param int $order_id
*/
function so_47117329_thankyou( $order_id ){
$order = wc_get_order( $order_id );
$args = array(
'total_cost' => $order->get_total(),
'order_id' => $order_id,
'set_product_id' => 123
);
wp_register_script( 'checkout-script', get_stylesheet_directory_uri() . '/checkout-script.js', array(), false, true ); // Last parameter loads script in footer
wp_localize_script( 'checkout-script', 'checkout_script', $args );
wp_enqueue_script( 'checkout-script' );
}
add_action( 'woocommerce_thankyou', 'so_47117329_thankyou' );

Execute a short code on a image click?

Not sure to post here or webmasters, I apologize if I got wrong.
Does anyone know of a way to execute a short code on a image click?
I can not find anything on how to do this
Edit: My apologizes
Yes Shortcode means wordpress shortcode

==== Template page ====
<script>
function executeShortCode() {
var url="<?php echo get_template_directory_uri(); ?>/yourAjaxPage.php";
jQuery.post(url,function(data){
console.log(data);
});
}
</script>
==== Ajax page ====
//yourAjaxPage.php
<?php echo do_shortcode('[yourshortcode]'); ?>

Because I just couldn't find answers online to my own question on this, I thought I'd post my solution. Using wp_localize_script to load my shortcodes, here is my example:
// PHP (in functions.php)
<?php
add_action( 'wp_enqueue_scripts', 'custom_add_scripts' );
function custom_add_scripts() {
wp_register_script( 'my_new_js_callname', plugins_url( '/js/filename.js' , __FILE__ ), array(), '1.0.0', true );
wp_enqueue_script( 'my_new_js_callname' );
}
add_action ('template_hook', 'custom_function_name');
function custom_function_name() {
// Because I used if/else statements in my JS, I loaded individual IDs into the array.
$examplea = do_shortcode('[add_to_cart id="118"]');
$exampleb = do_shortcode('[add_to_cart id="119"]');
$examplec = do_shortcode('[add_to_cart id="120"]');
$array = array(
'examplea' => $examplea,
'exampleb' => $exampleb,
'examplec' => $examplec,
);
wp_localize_script( 'my_new_js_callname', 'callword', $array );
Then, on image click or any other JS event you are using do:
// JS (in filename.js)
<script>
document.getElementById('myImg').onclick = function (){
$("#show").html( callword.examplea );
}
</script>
Then the shortcode is executed on my HTML page in there area where I have:
<div id="show"></div>

Get image element by it's id and attach the handler at onclick event something like
html
<img id="myImg" src="" />
JS
<script>
document.getElementById('myImg').onclick = function (){
//execute your short code here.
}
</script>

Undefined Constant WP_PLUGIN_URL

I'm creating Wordpress plugin and I start to working with some js files. In order to use php in js file, I'm using php header("Content-type: text/javascript") and start to insert the rest of the javascript codes at bottom. When I tried to use WP_PLUGIN_URL, it tells me is not defined. How to define WP_PLUGIN_URL in this way ?
Myscript.js turns out to be myscript.php.
<?php
header("Content-type: text/javascript");
$bigStarsPath = WP_PLUGIN_URL.'/horoscope-plugin/js/icons/star.png';
$smallStarsPath = WP_PLUGIN_URL.'/horoscope-plugin/js/icons/small.png';
?>
/* JS Start Here*/
(function($) {
$.fn.jRating = function(op) {
var defaults = {
/** String vars **/
bigStarsPath : '<?php echo $bigStarsPath; ?>', // path of the icon stars.png
smallStarsPath : '<?php echo $smallStarsPath; ?>', // path of the icon small.png
...
Plugin index page :
function myscript() {
wp_enqueue_script('jquery');
/*REGISTER ALL JS FOR SITE*/
wp_register_script('jRating', WP_PLUGIN_URL.'/horoscope-plugin/js/jRating.jquery.php');
/*REGISTER ALL CSS FOR SITE*/;
wp_register_style('stylesheet',WP_PLUGIN_URL.'/horoscope-plugin/css/style.css');
/*CALL ALL CSS AND JS SCRIPT*/
wp_enqueue_style('stylesheet');
wp_enqueue_script('jRating');
}
add_action('wp_enqueue_scripts','myscript');

You can do something like this,
First add this code to your theme's functions.php file,
function mycustomjs_init()
{
wp_enqueue_script( 'mycustomjs', "JS_FILE_PATH");
$bigStarsPath = WP_PLUGIN_URL.'/horoscope-plugin/js/icons/star.png';
$smallStarsPath = WP_PLUGIN_URL.'/horoscope-plugin/js/icons/small.png';
wp_localize_script( 'mycustomjs', 'bigStarsPath', array('url' => $bigStarsPath));
wp_localize_script( 'mycustomjs', 'smallStarsPath', array('url' => $smallStarsPath));
}
add_action( 'wp_print_scripts', 'mycustomjs_init' );
Replace JS_FILE_PATH with your js file path...
Now in your js file, use your defined variables like this bigStarsPath.url & smallStarsPath.url...
Hope it work...

try using
plugins_url()
Source::
https://codex.wordpress.org/Function_Reference/plugins_url