Custom template javascript

[matteo_maria_ambrogi]

Hello everyone,

tryed to figure it out also by reviewing from here, but ended up with nothing useful.

I cannot get the right way to name files.

Apart from Wordpress convention, let’s say I have a custom template "about.

I’d rename it as page-about.blade.php and in cascade:
• _page-about.scss
• PageAbout.php (controller)
• pageAbout.js

BUT NO WAY TO HAVE JAVASCRIPT loading!!!

why??

tyvm

[alwaysblank]

I don’t understand your question. Are you asking about naming conventions? Templates have naming requirements because they have to be recognized by the WordPress template hierarchy. Controllers have naming requirements because they’re matched against template names. So far as I know there’s no naming convention for JavaScript or styles: you can name them whatever you like, and if you want them separated on a per-page/template/etc basis you need to do that manually.

[matteo_maria_ambrogi]

I am saying I cannot have javascript file loaded at all for the custom template called, i.e. page-about.blade.php

how the heck should I name it, in order to have correctly loaded in my page-about.blade.php?

[alwaysblank]

Sage doesn’t automatically load particular JavaScript files on a per-template basis. There’s nothing you can name a file that will trigger this behavior. It combines all JavaScript files and loads the resulting script on every template. If you want different behavior, you would need to build it yourself, by setting up other files to be generated by the build process and conditionally loading those other files with WordPress’s tools, ie the script enqueue functions.

[matteo_maria_ambrogi]

man it doesn’t seem I can’t explain myself.

i have a custom template right?

page-about.blade.php

what should it be the associated javascript filename, in order to have it loaded?
someone says, just to look in the template body and use it to name the js file, but it’s not working.

then I am trying to camel case it, but the same, no way to have it loaded.

how should I do to have for this custom template, it’s own specific JS file loaded correctly, like any other components, like home, “page”, etc?

ty

EDIT: those are the classes
page-template page-template-page-about page-about page page-id-186 logged-in chi-siamo app-data index-data singular-data page-data page-186-data page-chi-siamo-data page-about-data

so I could call the file pageAbout.js and add it to main.js:

import about from './routes/page-about';
import single from './routes/single';
import archive from './routes/archive';
//import barba from './barba';


/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to about.
  about,
  single,
  archive,
});

[matteo_maria_ambrogi]

maybe I found the issue.

that one WAS NOT a “page”, but a generic template, therefore, renaming the file, from page-{something}.blade.php to just {something}.blade.phpallowed me to use that file as template, and to associated to it all the file, with the correct naming convention, for either JS, and the rest SCSS, and controller.

ty anyway