Enqueueing JS files

[xaykogeki]

Hi,

I am trying to enqueue a custom JS.

  wp_enqueue_script('sample.js', asset('scripts/sample.js')->uri(), false, null);

in my bud.config, I am initialising

 app.entry('sample', ['@scripts/sample', '@styles/blocks/sample'])

However, it seems like it’s not loading from the correct folder as @scripts seems to be adding it in public/js/sample.js directory, but the full path of the JS file is /themes/xyz/public/scripts/sample.js . Changing the asset path to asset('js/sample.js')->uri() doesn’t seem to work.

Any advice is appreciated. I am probably confusing myself too haha.

[Liskownik]

You have 2 ways:
Option A:

\Roots\bundle('app')->enqueue();
\Roots\bundle('sample')->enqueue();

Option B:
In public/manifest.json you can check the key to get compiled path.

wp_enqueue_script('app.js', asset('app.js'), false, null);
wp_enqueue_script('sample.js', asset('sample.js'), false, null);

[xaykogeki]

@Liskownik

\Roots\bundle('sample')->enqueue();

Thanks for the suggestions. I find it interesting that both code returns different paths for me.

use function Roots\bundle;

bundle('sample')->enqueue();
// returns public/scripts/sample.js

wp_enqueue_script('sample.js', asset('sample')->uri(), false, null);
// works and returns public/js/sample.js

Also, I am trying to get this to conditionally load only when a block is added, but doesn’t seem to work.

if ( ! wp_script_is( 'sample.js', 'enqueued' ) ) {
  ....
}

Hmm. Still needs a fair bit of investigation.

[xtieume]

public function __construct()
{
add_action(‘admin_enqueue_scripts’, [$this, ‘enqueueScripts’]);
}

/**
 * Enqueue necessary scripts for the admin interface.
 */
public function enqueueScripts($hook)
{
    global $post;
    if (($hook == 'post-new.php' || $hook == 'post.php') && isset($post) && 'application_form' === $post->post_type) {
        // Get the manifest file
        $manifest_path = get_template_directory() . '/public/manifest.json';
        if (file_exists($manifest_path)) {
            $manifest = json_decode(file_get_contents($manifest_path), true);
            
            // Load all JS files from manifest
            foreach ($manifest as $key => $value) {
                if (str_contains($key, '.js')) {
                    wp_enqueue_script(
                        str_replace('.js', '', $key), 
                        get_template_directory_uri() . '/public/' . $value,
                        [], 
                        null, 
                        true
                    );
                }
            }
        }
    }
}

This is my solution and it’s worked

[xtieume]

I found the official method here

Using ajax/wp_localize_script with Roots/bundle in Sage 10

We need to update our docs to reflect the changes made to enqueuing assets when we switched over to using Bud earlier this week, but… wp_localize_script needs to reference the handle of the enqueued asset. As of right now, app.js is built and enqueued with the handle app/1. To add a JS object to the app bundle, you’d do: wp_localize_script('app/1', 'example', ['hello' => 'world']); The result: <script id='app/1-js-extra'> var example = {"hello":"world"}; </script> <script src='http://example…

        if (($hook == 'post-new.php' || $hook == 'post.php') && isset($post) && 'application_form' === $post->post_type) {
            add_action('admin_enqueue_scripts', function () use ($post) {
                \Roots\bundle('app')->enqueue()->localize('applicationForm', [
                    'prefecture' => get_post_meta($post->ID, '_apply_prefecture', true)
                ]);
            }, 100);
        }