JS and CSS Compression is Breaking Added JS Functionality

Developers Frontend
1

I am using Fancybox and JW Player for some popups and videos on my site. With JS and CSS compression off it works fine. With the compression turned on they stop working.



Should I include the additional calls to the JS files in scripts.post.tpl and css file to styles.css under my_changes? If not, where is the best place to put them?



Thanks.

2

Actually, the problem is that any calls to a script file that I put into scripts.post.tpl are not called once I turn off Javascript Debug Mode. I know this by viewing the source then looking at the link which calls the script cache. The other content in the scripts.post.tpl is loaded fine. The line is



Does v4 require calls to script files to be somewhere other than /design/mytemplate/templates/addons/my_changes/hooks/index/scripts.post.tpl?



Thanks.

3

You might try getting rid of the leading '/' in '/media' in your tpl file which will probably make the path expand to 'design/themes//media/…

4

Actually the media folder this refers to is in my root folder where I keep video, audio etc, not the one that comes with the theme. I've tried the leading slash and the full url with no success. I'm sure it is something obvious, just can see what it is.

5

Don't know then. All of this is different for V4 and I'm sure that a simple case was tested/verified but anything else was probably not.

Are you saying that when you view source of the page, you see other script references (from your scripts.post.tpl file) but not this one? If so, I'd assume that you are not getting the cached flushed due to permissions or wrong cache clearing parameter. Use “?cc&ctpl” to clear templates and registry caches. The css/js cache is (don't ask me why) cleared with the 'cc' and not with the 'ctpl'.

6

Yes, tried clearing the cache, the templates etc.



With debug is off I looked at the source then clicked on the JS cache link to see what script was being loaded. Everything from the common/scripts.tpl was being loaded.



Here is the content of /design/themes/mytheme/templates/addons/my_changes/hooks/index/scripts.post.tpl.



These lines were not loaded into the JS cache:


{script src="http://www.site.com/media/jwplayer/jwplayer.js"}
{script src="http://www.site.com/media/fancybox215/source/jquery.fancybox.pack.js?v=2.1.5"}
{script src="http://www.site.com/media/fancybox215/source/helpers/jquery.fancybox-media.js?v=1.0.6"}
{script src="http://www.site.com/media/middleboxlinks/js/middlebox.js"}




These lines were loaded onto the html page but not the JS cache:```php

```

I put my {script src=...} lines into common/scripts.tpl and they were loaded in to the JS cache. Has anyone else tried putting {script src==} into scripts.post.tpl?

I opened a ticket and will let you know what support says.
7

Not sure if it is by design or a problem but to load a script file into the cache, the file must be in the themes/my-template/media folder.

8

JS should go in /js/addons/my_changes/*.js (from what I see anyway)

I think you're taking advantage of a bug that it is getting included from the media theme folder.

JS should not be theme dependent. However one could argue that it should be backend/frontend dependent.

9

That makes sense and I agree that it should not be theme dependent. I've not looked in the JS folder and did not know there was an addons folder there. I'm in the process of taking the store live so once that is done, I'll give your suggestion a try.