Processwire doesn't read certain classes/link-file css-js. Why?

[franciccio-ITALIANO]

Hi, today I uploaded some .php template files in the "templates" folder.
However, Processwire doesn't read them well. It's as if it forgot some classes, or didn't read links to css and js files.
But the html file of the template with all the links and classes works great!
I don't understand by which principle it sometimes reads some parts of html code, other times it ignores it.
For example:
In html file I write:

 

IN HEAD


	<link rel="icon" href="favicon-extra.png" type="image/png">	
	
	
    <!--REQUIRED STYLE SHEETS-->
    <!-- BOOTSTRAP CORE STYLE CSS -->
    <link href="styles/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLE CSS -->
    <link href="styles/assets/css/font-awesome.min.css" rel="stylesheet" />
    <!--ANIMATED FONTAWESOME STYLE CSS -->
    <link href="styles/assets/css/font-awesome-animation.css" rel="stylesheet" />
    <!-- VEGAS STYLE CSS -->
    <link href="styles/assets/css/jquery.vegas.min.css" rel="stylesheet" />
    <!-- SIDE MENU STYLE CSS -->
    <link href="styles/assets/css/component.css" rel="stylesheet" />
    <!-- CUSTOM STYLE CSS -->
    <link href="styles/assets/css/style.css" rel="stylesheet" />
    <link href="styles/assets/css/pw-img.css" rel="stylesheet" />	


    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
    <script src="styles/assets/plugins/jquery-1.10.2.js"></script>
    <!-- BOOTSTRAP CORE SCRIPT   -->
    <script src="styles/assets/plugins/bootstrap.js"></script>
    <!-- SIDE MENU SCRIPTS -->
    <script src="styles/assets/js/modernizr.custom.js"></script>
    <script src="styles/assets/js/classie.js"></script>
    <!-- VEGAS SLIDESHOW SCRIPTS -->
    <script src="styles/assets/plugins/vegas/jquery.vegas.min.js"></script>
    <!-- CUSTOM SCRIPTS -->
    <script src="styles/assets/js/custom-root.js"></script>
     <!-- BA -->
    <script src="styles/assets/plugins/BA.js"></script>  
	<!-- WOW ANIMATED RITARDO -->
	<script src='styles/assets/js/wow.js'></script>
	<script src='styles/assets/js/wow-markup.js'></script>

IT WORK VERY WELL.

Then I copied the same code on a .php file, I uploaded it on "templates", set as template on processwire, but it DOES NOT READ A JS FILE THAT CONTROLS THE BACKGROUND.
I wrote this:

 

IN HEAD	

	<link rel="icon" href="<?php echo $config->urls->templates?>favicon-extra.png" type="image/png">	
	
	
    <!--REQUIRED STYLE SHEETS-->
    <!-- BOOTSTRAP CORE STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/font-awesome.min.css" rel="stylesheet" />
    <!--ANIMATED FONTAWESOME STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/font-awesome-animation.css" rel="stylesheet" />
    <!-- VEGAS STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/jquery.vegas.min.css" rel="stylesheet" />
    <!-- SIDE MENU STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/component.css" rel="stylesheet" />
    <!-- CUSTOM STYLE CSS -->
    <link href="<?php echo $config->urls->templates?>styles/assets/css/style.css" rel="stylesheet" />
    <link href="<?php echo $config->urls->templates?>styles/assets/css/pw-img.css" rel="stylesheet" />	


    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
    <script src="<?php echo $config->urls->templates?>styles/assets/plugins/jquery-1.10.2.js"></script>
    <!-- BOOTSTRAP CORE SCRIPT   -->
    <script src="<?php echo $config->urls->templates?>styles/assets/plugins/bootstrap.js"></script>
    <!-- SIDE MENU SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/js/modernizr.custom.js"></script>
    <script src="<?php echo $config->urls->templates?>styles/assets/js/classie.js"></script>
    <!-- VEGAS SLIDESHOW SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/plugins/vegas/jquery.vegas.min.js"></script>
    <!-- CUSTOM SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/js/custom-root.js"></script>
     <!-- BA -->
    <script src="<?php echo $config->urls->templates?>styles/assets/plugins/BA.js"></script>  
	<!-- WOW ANIMATED RITARDO -->
	<script src='<?php echo $config->urls->templates?>styles/assets/js/wow.js'></script>
	<script src='<?php echo $config->urls->templates?>styles/assets/js/wow-markup.js'></script>

I think the problem is the processwire bee:

<"php echo $config->urls->templates>?

Is there a way to avoid and replace it with simple html code?

The file that processwire doesn't read is:

    <!-- CUSTOM SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/js/custom-root.js"></script>

On top of that, the style.css file contains classes.
The html file reads everything, but if you linko the same file with <"php echo $config->urls->templates>, the style.css file seems to be defective, i.e. some classes read them, others ignore them. I don't understand.
I write my pages in pure html-css first, and they work. When I transfer them to processwire, processwire chooses what to make work and what not... I can't change the code to processwire!

Translated with www.DeepL.com/Translator (free version)

[qtguru]

What does the error in Google Chrome console say, Processwire $config->urls->templates works, there must be an error message and if you are on a unix system, what is your permission level too ? 

[dotnetic]

If you could post a link to the online site, that would be helpful.

[franciccio-ITALIANO]

The site is www.permaculturaorganica.info
When you click on it, you see a green background. After a few seconds, however, it becomes dark. And it stays dark.
The background is controlled by this js files:
 

    <!-- VEGAS SLIDESHOW SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/plugins/vegas/jquery.vegas.min.js"></script>
    <!-- CUSTOM SCRIPTS -->
    <script src="<?php echo $config->urls->templates?>styles/assets/js/custom-root.js"></script>

The html files work perfectly, and if I click the background changes, it doesn't get dark but they change and repeat a series of images in sequence. Instead loaded the corresponding .php file on processwire, cloned from the html file, you see only one image, which however I think is the one controlled by another simpler css code.
In short, the original js file is not read. But it is read locally on the html file.

I also tested it with other templates.
Always the same problem: the animated background doesn't work (but it works perfectly locally) and some classes contained on style.css are completely ignored! 

Google inspection doesn't report errors, it just doesn't show the classes it doesn't read.
Unfortunately, I don't know anything about the Unix system and its permission levels... 

Translated with www.DeepL.com/Translator (free version)

 

[horst]

I cannot see any place where you want to load the mentioned js scripts.

But I spotted something in your js file, the only one that gets loaded (http://www.permaculturaorganica.info/site/templates/styles/assets/js/po-home.js).

There you use a bunch of bg-images with relative (sub) pathes. Have you tried to use absolute URLs instead?

	// Slideshow Background.
		(function() {
			// Settings.
				var settings = {
					// Images (in the format of 'url': 'alignment').
						images: {
							'styles/assets/img/sfondi/po-index/bg0.jpg': 'center',
							'styles/assets/img/sfondi/po-index/bg1.jpg': 'center',	
...

the above with absolute URLs for the images:

					// Images (in the format of 'url': 'alignment').
						images: {
							'/site/templates/styles/assets/img/sfondi/po-index/bg0.jpg': 'center',
							'/site/templates/styles/assets/img/sfondi/po-index/bg1.jpg': 'center',	
...

 

[kongondo]

It doesn't seem to be a files' permission issue. For instance, when the following files are accessed directly, they show up: classie.js, bootstrap.js, jquery-1.10.2.js,custom-root, vegas.min.js, bootstrap.css and vegas.min.css.

I suspect there's an issue with the template file itself or the page we are seeing (the home page) is actually reading/using a different template file from the one you think it should use. For instance, in your code above, there is no markup for po-home.js yet it is getting loaded when we view your site (unless you just left it out in your first post).

1. Are you able to copy and paste your entire .php (template) file here? (the one with all the markup in your first post).
2. Confirm if the home page is supposed to use that template file.
3. Your ProcessWire version.

 

[dotnetic]

As @horst already said, the paths to your images in your JavaScript file seem to be wrong. If you open Chrome Dev Tools Network Tab, then you see that a lot of 404 errors occur for the background images.

[kongondo]

4 minutes ago, dotnetic said:

As @horst already said, the paths to your images in your JavaScript file seem to be wrong. If you open Chrome Dev Tools Network Tab, then you see that a lot of 404 errors occur for the background images.

That's only part of the problem though. The main(?) issue is echo'ed scripts and styles are not getting output on the page.