Script load & files in custom element

How To
1

I have been trying to load JS script and CSS stylesheet into a custom element but is not working so I have looked at the example of the counter.php file and from what I understand it uses the front which says in docs (defined in frontend.min.js ).

I am a bit confused about how you load the scripts, here is my example, I tried it a different way, my js file is called test-file.js and is in the child theme root, can anyone guide me please? Thanks

image
image1678×658 77.8 KB

2

So the reason why your script won’t load, is because you set a dependency for bricks-frontend.
bricks-frontend is a style and not a script. Since WordPress can’t find a script called bricks-frontend, that your script is dependend on, it won’t load your script.

class Prefix_Element_Test  extends \Bricks\Element
{
    public $category     = 'pixelyze';
    public $name         = 'pxl';
    public $icon         = 'fa-solid fa-heading';
    public $scripts      = ['testFile']; // executes the function "testFile()" inside test-file.js once the element is (re)loaded inside the canvas or on the frontend

    public function enqueue_scripts()
    {
        if (bricks_is_builder_main()) return; // Only enqueue scripts inside the canvas or on the frontend and not for the builder (the UI for bricks)
        $path = get_template_directory_uri() . '/test-file.js';
        wp_enqueue_script('test-script', $path, ['bricks-scripts'], filemtime($path), true); // set true to enqueue in footer (load after content)
    }

I added a couple more tipps as comments.

Hope this helps
Cheers Suat

3

Hi Suat,

Thanks for your reply, it’s not working and I am not sure why, here is a screenshot of my VSCode plus I am getting an error on the front-end

Warning : filemtime(): stat failed for https://custom-elements-bb.local/wp-content/themes/bricks/test-file.js

I am using child-theme from bricks as been advised but I can’t figure out how to get the js scripts to load or CSS files.

image
image1909×1017 182 KB
r

4

I managed to load the js file script using get_stylesheet_directory

  // Enqueue element styles and scripts
  public function enqueue_scripts()
  {
    if (bricks_is_builder_main()) return; // Only enqueue scripts inside the canvas or on the frontend and not for the builder (the UI for bricks)
    $path = get_stylesheet_directory() . '/test-file.js'; // Absolute path for filemtime
    $url = get_stylesheet_directory_uri() . '/test-file.js'; // URL for enqueueing

    var_dump($path);
    wp_enqueue_script('test-script', $url, ['bricks-scripts'], filemtime($path), true);
  }

I just thought I would let you know

1 Like
5

yeah sorry my bad, I just copied your code and didn’t check twice.

get_stylesheet_directory_uri returns child-theme folder as url, and get_template_directory_urireturns bricks-theme folder as url.

1 Like