How to use enqueue()->localize() in vite/sage11

vite
1

I have an implementation in sage10 which is using the following code to pass some variables to a javascript:

bundle('foo')->enqueue()->localize('fooAjax', ['ajaxurl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('foo_check_nonce')]);

Is there a way to achieve that with vite?

2
2 Likes
3

I would go with a different approach.

I enqueue my scripts in a separate file/s, based on the volume of the project. There i would do something like that:

add_action(ā€˜wp_enqueue_scriptsā€™, function () {

    $style = Vite::asset('resources/css/survey/survey.css');
    $script = Vite::asset('resources/js/survey/survey.js');

    wp_enqueue_style( 'survey', $style, false, '1.0.0' );
    wp_enqueue_script( 'survey', $script, false, '1.0.0', [
        'in_footer' => true,
        'strategy' => 'defer'
    ]);

    wp_localize_script( 'survey', 'surveyData', [
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'nonce'   => wp_create_nonce( 'survey_nonce' ),
    ] );

}, 100);

Thus you are getting the most out of both worlds. And you do not inline scripts, as your CSP would like that.

You may also consider using the bundle() helper.

4

Iā€™m still not clear on this solution. The link seems to suggest moving the enqueue out of admin_head filter, but Iā€™m fairly new to Vite, so could someone provide more details? As with the original question, Iā€™m trying to get Ajax working on the front end of my WP site.

5

The REST API has been in WordPress for almost a decade. Yā€™all really shouldnā€™t be using admin-ajaxā€¦

As far as ā€œlocalizingā€ scripts goes in Sage 11/Vite ā€“ just output the JS you need. Several approaches have been shown.

What have you tried?

6

Thanks for responding. In app.js, I have the AJAX call, so it is loaded automatically by Sage:

$.ajax({
                type: 'POST',
                url: frontend_ajax_object.ajaxUrl,
                data: {action: 'event_month'},
                dataType:"json",
                success: function (data) {
                    console.log(data);
                },
            });

My actual php function called by this jquery function is in ajax.php (which is loaded through functions.php), which also includes:

<?php
namespace App;
class Ajax {
    public function __construct() {
        add_action('wp_ajax_event_month', [$this, 'event_month']);
        add_action('wp_ajax_nopriv_event_month', [$this, 'event_month']);
    }
    public function event_month() {
        wp_send_json_success('Month test');
}

Before Vite, I would use the bundle (as described in the initial question). But the following does not work (this is in add_action(ā€˜wp_enqueue_scriptsā€™ ā€¦):

    wp_localize_script( 'app', 'frontend_ajax_object', [
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        
    ] );

When I run it, I get frontend_ajax_object is not defined. I could pull the AJAX code into a separate js file, enqueue and localize it separately, but it seems to me there should be a way to incorporate the ā€œwp_localize_scriptā€ using the Sage infrastructure

7

There arenā€™t any enqueued assets in Sage 11. wp_localize_script requires using a handle that is enqueued.

Personally I would ignore @hristolaskovā€™s post on this topic.

Follow the solution in this topic for your answer. Just output the JS you need on the front-end ā€” thereā€™s several different ways to do it.

And againā€¦ itā€™s 2025, seriously stop using admin-ajax. Use the REST API.

Iā€™m locking this topic because it already has a linked solution that shows a couple of different approaches you can use.

If you need more hands on support, consider hiring someone from the community.

1 Like