Loading the javascript correctly in wordpress

3 replies · opened Jul 7, 2023

AallcasemanagementJul 7, 2023

Hi there,

I referenced your theme's functions.js on a wordpress child theme page template at the bottom of the page like so:

<script src="<?php bloginfo('stylesheet_directory'); ?>/barber/js/functions.js"></script>

and I have copied all the Canvas JS files from canvas 7 files/js into that folder (barber/js)

They generally seem to work, however, on page inspection I get a few 404 errors, so I have to manually reference the correct .js files one by one at the bottom of the same page like so:

&lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/barber/js/functions.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/barber/js/plugins.parallax.js"&gt;&lt;/script&gt;
    &lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/barber/js/plugins.bootstrap.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/barber/js/fn.onepage.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/barber/js/module.onepage.js"&gt;&lt;/script&gt;

I think this is because the Canvas functions.js file, which should just launch all the required scripts as and when necessary is making the browser search in the wrong place for the individual js files.

Is there an easy way to make the functions.js file pull the files from the correct location e.g:

"<?php bloginfo('stylesheet_directory'); ?>/barber/js"

without having to find out which ones are being used on the page by trial and error and referencing each of the required scripts manually?

Please let me know.

SSemicolon WebSTAFFJul 7, 2023

Hello,

Yes, this is an issue especially when integrating with CMS and we are already working on a Solution for this. Meanwhile, consider find the following code in the js/functions.js File:
[ch_pre]jsFolder: 'js/',
cssFolder: 'css/',[/ch_pre]

and replace it with:
[ch_pre]get jsFolder() {
return typeof CNVS_VARS !== 'undefined' ? CNVS_VARS.jsFolder : 'js/';
},
get cssFolder() {
return typeof CNVS_VARS !== 'undefined' ? CNVS_VARS.cssFolder : 'css/';
},[/ch_pre]

Then you can use something like this:
[ch_pre]
var CNVS_VARS = {
jsFolder: "/barber/js/",
cssFolder: "/barber/css/",
};

/barber/js/functions.js">[/ch_pre]

This should fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AallcasemanagementJul 8, 2023

Dear Canvas Team,

Many thanks for your prompt and expert response!!!

Your solution worked a treat and I will now be able to use your theme whenever I am integrating to a WordPress website without having to think too hard !! haha

Is there somewhere I can leave a good review for you by way of thanks? Please send me a link, privately if you wish.

Kind regards,

Pete

SSemicolon WebSTAFFJul 8, 2023

Hello,

Thats amazing! :) We are very Happy to Help! Thanks so much for the Kind Words! :)

Well, you will never have to think hard because we are just a question away and more than happy to resolve your issues so feel free.

Thanks so much for considering. You can consider going to https://themeforest.net/downloads and there is an Option to Give a Rating/Review.

Do let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard