Canvas Support

Custom JS Path for V7

9 replies · opened Mar 26, 2023

CcarabsMar 26, 2023

Hello,

We are upgrading to V7 and love it.

But because of our CMS, I can not keep /js in the root of my public directory. Adding custom sym links and changing our CMS is not an option either.

In V6, you provided the following, which worked perfectly...

window.scwJsPath="/XPATH/dist/can/js/";scwDisableJsAJAX='true';

This does not seem to work in V7. functions.js loads, but no other plugins...

...com/js/plugins.swiper.js net::ERR_ABORTED 404 (Not Found)
...com/js/plugins.bootstrap.js net::ERR_ABORTED 404 (Not Found)

Thank you for any help.

CcarabsMar 26, 2023

And are there any issues with the CSS not being in the root directory? I found that as well as I change the path to the CSS files on block-slider-1.html the colors are different.

Well, to be clear, I am pointing to the "new" path to the JS and CSS files I noted above in the screenshot. But I am also using the CSS generated from your minify CSS gulp steps. Maybe that is the issue with color differences? Will need to review more today.

CcarabsMar 27, 2023

Well, I think I addressed the issue, and it was pretty simple... I removed scwDisableJsAJAX='true'; and it is now all loading. I did not make any CSS changes either.

This seems to just be a difference between my last integration with your V6 and v7. With V6, I compiled all the JS into 1 file and did not require the dynamic ajax loading. But with v7 I am just using your system As-Is for now.

SSemicolon WebSTAFFMar 27, 2023

Hello,

Thanks for your Patience!

  1. You can find the Custom JS/CSS Folder declarations in the js/functions.js File:
    [ch_pre type="js"]jsFolder:"js/",
    cssFolder:"css/",[/ch_pre]

You can simply define your Custom Path accordingly. Please note that scwDisableJsAJAX does not exist in Canvas 7. Make sure that you are using the correct version.

  1. We have already included a Combined File in the Latest Update named: js/plugins.js File. You can simply use this file to directly without the need to define any JS path. Simply use the following code replacing the existing js/functions.js JS File Linking:
    [ch_pre]
    [/ch_pre]

You can find more documentations here: https://docs.semicolonweb.com/docs/getting-started/javascript/ .

  1. Regarding the CSS Color Issues you have mentioned, it would be great if you can please provide us with a Live URL so that we can test this as the New Version of Canvas does not use any colors.css or php File. The colors are changed entirely using CSS Variables for more flexibility. Consider checking the compiled files and let us know if you are still facing issues with the same?

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcarabsMar 30, 2023

Thank you for the reply.

As I mentioned in other posts, I can not change js/functions.js since the next time I upgrade, I have to remember to change it again. It is not good practice. Especially since I use this theme on multiple sites.

I tried using <script src="PATH/TO/js/plugins.js"></script>, but plugins.js does not seem to be part of my canvas/js directory...

$ ls plugin*
plugins.bootstrap.js plugins.countdown.js plugins.fitvids.js plugins.gmap.js plugins.isotope.js plugins.packery.js plugins.stickysidebar.js plugins.youtube.js plugins.carousel.js plugins.counter.js plugins.flexslider.js plugins.hashchange.js plugins.jpaginate.js plugins.parallax.js plugins.swiper.js plugins.clipboard.js plugins.dribbble.js plugins.flickrfeed.js plugins.imagesloaded.js plugins.lazyload.js plugins.piechart.js plugins.textrotator.js plugins.cookie.js plugins.easing.js plugins.form.js plugins.infinitescroll.js plugins.lightbox.js plugins.prism.js plugins.validation.phoneUS.js

I checked the dist directory as well and nothing.

I do see on your site you have plugins.min.js, but the downloaded installation does not have that either.

This is kinda frustrating since I can not get it working. And I can not provide a live URL since I can not yet go live here.

But I can note the specific issue I see is with 2 plugin files not being loaded...

I have the slider plugin on my main page, based off of your page: html/canvas/slider-canvas.html. But the text/functionality never loads. And I see files are not being loaded:

functions.js:1 GET http://XX.com/js/plugins.swiper.js net::ERR_ABORTED 404 (Not Found)
functions.js:1 GET http://XX.com/js/plugins.bootstrap.js net::ERR_ABORTED 404 (Not Found)

They still seem to be using /js, even though I have set the scwJsPath path properly
<script>window.scwJsPath="PROPERPATH/dist/can/js/";</script>

functions.js loads fine with the same path. And I see other plugin files load without any issues An example is js/module.gototop.js.

As for the CSS, I have addressed that. It was my mistake.

CcarabsMar 30, 2023

Please note: I just downloaded the Canvas theme again, and still no plugins.js

CcarabsMar 30, 2023

I ran a quick test with the site mentioned above. I updated, defining the proper paths, and swiper and bootstrap files loaded properly.

I will consider adding a sed command to my bash script to replace this path automatically. But I would prefer not to make changes to your code like that.

SSemicolon WebSTAFFMar 30, 2023

Hello,

Apologies! We are really not sure why it does not show on your Folders. Meanwhile, we are attaching the File here in this reply.

Additionally, we really think you are using the Canvas 6 Documentation on Canvas 7 as there is no scwJSPath with Canvas 7. Consider checking this Documentation: https://docs.semicolonweb.com/docs/getting-started/javascript/ . This is the Latest!

Hope this Helps!

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

CcarabsMar 30, 2023

Thank you for the mention of no scwJSPath. Earlier, you did not mention scwJSPath and only said scwDisableJsAJAX was unavailable. That would have saved me some time. And I have reviewed the getting started note. Though you mention it is the latest info here, I have seen other recent posts saying the docs are not yet complete. Kind of confusing to a user like me.

I guess I do not understand why some js files load and some do not with the default jsFolder:"js/" directory. modules.botstrap.js loads, but plugins.bootstrap.js does not. Seems like a bug.

I have not tried the plugin JS file just yet, but I will try it shortly.

I do appreciate your time. I have 4 sites running Canvas with about 10 more to go. Will buy licenses for each, of course. They all live within my CMS, all need specific/unique paths, and they will all look great because of your hard work. Thank you.

SSemicolon WebSTAFFMar 30, 2023

Hello,

Thank you so so much for the Kind Words and considering to Purchase additional Licenses of Canvas! :)

We assure you that these issues will be resolved. The Documentations which are currently already there are applicable while we are working on adding more content with more examples and features explanations.

Modules load differently as they load from the Same Folder as the js/functions.js File by default. So it will always work regardless of whether the jsFolder has been set or not. Meanwhile, plugins.*.js Files load based on the defined JS Folders. So, if you are loading from the base js/ Folder by default, everything will work fine but if you use a different js/ Folder other than how it is provided by default with the Package, you will need to set an Absolute Path.

Regarding the JS Loading from Absolute Folders:

  1. If you are using just the js/functions.js File, find the following code in the js/functions.js File:
    [ch_pre type="js"]jsFolder:'js/',
    cssFolder:'css/',[/ch_pre]

and change these variables to set your JS Folder path according to your needs.

  1. If you are planning to use js/plugins.js File, simply use following code:
    [ch_pre]
    [/ch_pre]

That's it. This should definitely solve your issues.

Hope this Helps!

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