CSS JS Loader [Support Thread]

[llmcdonald]

I'm going to assume that you are using a template other than classic.
many of the templates out there load files in the html_header.php although this is frowned upon

In the include/YOUR_TEMPLATE/common/html_header.php.

Did you merge the files?
or
Build Auto-loaders for those files that were called in that file previously?

I am using the responsive Sheffield blue template. I did not merge files. I just followed the instructions in the readmehtml page. There was no mention of having to merge files. I don't code so building auto loaders is beyond me. Thank you for your response.

[bislewl]

I am using the responsive Sheffield blue template. I did not merge files. I just followed the instructions in the readmehtml page. There was no mention of having to merge files. I don't code so building auto loaders is beyond me. Thank you for your response.

You are correct, it doesn't mention that, in version 3.0.5 it has been clarified. However as a general rule, anytime you are overwriting files (if if it doesn't say to) you will need to merge files.

[llmcdonald]

You are correct, it doesn't mention that, in version 3.0.5 it has been clarified. However as a general rule, anytime you are overwriting files (if if it doesn't say to) you will need to merge files.

So do I just need to merge the files, or do I need the autoloader as well?

[bislewl]

Ideally...

You would do merge everything but the CSS/JS of the "old" html_header.php.

You can do which ever you choose.

I'll give a a quick overview of building an auto_loader, many others have difficulty with this.
So it may be a good idea.

Create a file for every different scenario you would need different CSS / JS files loaded.

put this file in the catalog/includes/templates/YOUR_TEMPLATE/auto_loaders/

start the file with "loader_", the end is best for something to make your life easier like lets call our loader_featured.php

you will need to know 3 things:
1.) Pages you want to load these files on
2.) JS files you want to load (and their location)
2.) CSS files you want to load (and their location)

Example
1.)
Lets say you wanted a loader for the new products and featured and the pages.
Those constants go in the pages array below, you can also just use one (then you don't need the comma)

2.)
we want to load the following javascript files (relative to the includes/templates/YOUR_TEMPLATE/jscript) in this order
//code.jquery.com/jquery-1.11.3.min.js (note the double slashes is used to use http/https depending on the current.)
jquery/jquery-migrate-1.2.1.min.js
jquery/jquery-ui-1.10.2.custom.min.js
jquery/index.js

add the files in the jscript_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1

3.)
we want to load the following CSS files(relative to the includes/templates/YOUR_TEMPLATE/css) in this order
stylesheet_master.css
featured_products.css
add the files in the css_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1

We would get the following result.

<?php

$loaders[] = array('conditions' => array('pages' => array(FILENAME_PRODUCTS_NEW, FILENAME_FEATURED_PRODUCTS)),
                      'jscript_files' => array(
                        '//code.jquery.com/jquery-1.11.3.min.js' => 1,
                        'jquery/jquery-migrate-1.2.1.min.js' => 2,
                        'jquery/jquery-ui-1.10.2.custom.min.js' => 3,
                        'jquery/index.js' => 5
                      ),
                      'css_files' => array(
                          'stylesheet_master.css' => 1,
                          'featured_products.css' => 2
                      )
                  );

if you want to load on all pages, the pages array would look like:
array('pages' => array('*')).

This avoids duplicate loading of jQuery

TIP: Many modules may put additional js files in: includes/modules/pages/PAGE_NAME/
and those will need to be moved to the includes/templates/YOUR_TEMPLATE/jscript and then added to the respective auto_loader

NOTE: You can have multiple auto-loaders for a single page, basically they CAN overlap.

[llmcdonald]

Ideally...

You would do merge everything but the CSS/JS of the "old" html_header.php.

You can do which ever you choose.

I'll give a a quick overview of building an auto_loader, many others have difficulty with this.
So it may be a good idea.

Create a file for every different scenario you would need different CSS / JS files loaded.

put this file in the catalog/includes/templates/YOUR_TEMPLATE/auto_loaders/

start the file with "loader_", the end is best for something to make your life easier like lets call our loader_featured.php

you will need to know 3 things:
1.) Pages you want to load these files on
2.) JS files you want to load (and their location)
2.) CSS files you want to load (and their location)

Example
1.)
Lets say you wanted a loader for the new products and featured and the pages.
Those constants go in the pages array below, you can also just use one (then you don't need the comma)

2.)
we want to load the following javascript files (relative to the includes/templates/YOUR_TEMPLATE/jscript) in this order
//code.jquery.com/jquery-1.11.3.min.js (note the double slashes is used to use http/https depending on the current.)
jquery/jquery-migrate-1.2.1.min.js
jquery/jquery-ui-1.10.2.custom.min.js
jquery/index.js

add the files in the jscript_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1

3.)
we want to load the following CSS files(relative to the includes/templates/YOUR_TEMPLATE/css) in this order
stylesheet_master.css
featured_products.css
add the files in the css_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1

We would get the following result.

<?php

$loaders[] = array('conditions' => array('pages' => array(FILENAME_PRODUCTS_NEW, FILENAME_FEATURED_PRODUCTS)),
                      'jscript_files' => array(
                        '//code.jquery.com/jquery-1.11.3.min.js' => 1,
                        'jquery/jquery-migrate-1.2.1.min.js' => 2,
                        'jquery/jquery-ui-1.10.2.custom.min.js' => 3,
                        'jquery/index.js' => 5
                      ),
                      'css_files' => array(
                          'stylesheet_master.css' => 1,
                          'featured_products.css' => 2
                      )
                  );

if you want to load on all pages, the pages array would look like:
array('pages' => array('*')).

This avoids duplicate loading of jQuery

TIP: Many modules may put additional js files in: includes/modules/pages/PAGE_NAME/
and those will need to be moved to the includes/templates/YOUR_TEMPLATE/jscript and then added to the respective auto_loader

NOTE: You can have multiple auto-loaders for a single page, basically they CAN overlap.

I just need fast and easy checkout to work. Right now fast and easy checkout gets hung up on the processing order, please wait.... screen. I was told it was not working because I didn't have css/js loader installed.

[bislewl]

What credit module are you using? Have you tried with check/money order?

[DML73]

How can I check/confirm that this module is actually working properly and has an effect on my webiste?

I have installed the module and my website still seems to work fine, however I validated my CSS file and it does not validate correctly, it has about 10 errors; but still the website and module seems to work fine. I thought it would not work if the CSS file does not validate correctly (?).

[bislewl]

How can I check/confirm that this module is actually working properly and has an effect on my webiste?

I have installed the module and my website still seems to work fine, however I validated my CSS file and it does not validate correctly, it has about 10 errors; but still the website and module seems to work fine. I thought it would not work if the CSS file does not validate correctly (?).

It will work without valid css, but many times it will break if it isn't when compressed. Also it may break if some one comments in css with // versus /* */ as it is normally one line when compressed

[DML73]

Thanks. How can I check/confirm that this module is actually working properly and has an effect on my webiste?

[bislewl]

If your minifing data, when you look in your <head> of the website you should see a long string (containing the files names usually) for the CSS & JS files.

***PRO TIP**
After setting up CSS/JS Loader to load ALL of your CSS & JS files.
Move it from the html_header to the tpl_footer, to reduce the render blocking CSS & JS, for better page speeds on google insights