CSS JS Loader seems difficult to install

[lankeeyankee]

Here's a more basic file, it defines the pages to load on, which files to load, and in what order:

$loaders[] = array('conditions' => array('pages' => array('product_info', 'product_reviews', 'product_reviews_info', 'product_reviews_write')),
                      'jscript_files' => array(
                                        'jquery/jquery-1.9.1.min.js' => 1,
                                        'jquery/jquery.facebox.js' => 32,
                                        'jquery/jquery.form.js' => 33,    
                                        'jquery/jquery.bgiframe.min.js' => 34,
                                        'jquery/jquery.rbajax.js' => 35,    
                                        'tell_a_friend.js' => 36,
                                        'jquery/jquery.colorbox.js' => 37,
                                        'jqlightbox.php' => 38
                        ),
                      'css_files' => array(
                                        'facebox.css' => 31,
                                        'colorbox.css' =>32
                        )
                                ); 

I usually just copy one of the auto loader files, edit and rename to create a new one. It's a great feature to be able to have everything listed in one file instead of spread all over different directories. Lat's file is more complex and shows just how flexible this excellent module can be. You can specify all pages using *, and also use pages defined in the admin config with the explode() function. For the simple file that I posted, you just need to change the array that lists the pages like 'product_info' to whatever page(s) you want the js and css to load on. The jscript files are in the template's jscript directory (and subdirectories if there are any like in my example) and the css is in the template's css directory. It's pretty straightforward and quite powerful.

[DivaVocals]

Let me be clear.. I am not doubting the usefulness or power of this add-on.. but let's be realistic here.. USING it is NOT something the AVERAGE DIY shopowner is going to grasp easily.. There has NEVER been an EASY TO UNDERSTAND how-to or user guide included with this module.. So powerful or not, it's not going to be useful to the AVERAGE shopowner if they don't know HOW to use it.. (again the reason WHY I removed it from being bundled in with TPP -- there were NOTHING but issues in that support thread after the introduction of the CSS/JS Loader into the core codebase)

That said I still don't get how to use it with page specific CSS or JS, but I suspect somewhere in the code that has been posted here I might be able to figure that out.. (or not.. **shrugs**)

[dw08gm]

Here's a more basic file, it defines the pages to load on, which files to load, and in what order:

$loaders[] = array('conditions' => array('pages' => array('product_info', 'product_reviews', 'product_reviews_info', 'product_reviews_write')),
                      'jscript_files' => array(
                                        'jquery/jquery-1.9.1.min.js' => 1,
                                        'jquery/jquery.facebox.js' => 32,
                                        'jquery/jquery.form.js' => 33,    
                                        'jquery/jquery.bgiframe.min.js' => 34,
                                        'jquery/jquery.rbajax.js' => 35,    
                                        'tell_a_friend.js' => 36,
                                        'jquery/jquery.colorbox.js' => 37,
                                        'jqlightbox.php' => 38
                        ),
                      'css_files' => array(
                                        'facebox.css' => 31,
                                        'colorbox.css' =>32
                        )
                                ); 

I usually just copy one of the auto loader files, edit and rename to create a new one. It's a great feature to be able to have everything listed in one file instead of spread all over different directories. Lat's file is more complex and shows just how flexible this excellent module can be. You can specify all pages using *, and also use pages defined in the admin config with the explode() function. For the simple file that I posted, you just need to change the array that lists the pages like 'product_info' to whatever page(s) you want the js and css to load on. The jscript files are in the template's jscript directory (and subdirectories if there are any like in my example) and the css is in the template's css directory. It's pretty straightforward and quite powerful.

How do the numbers in blue at the end of each line correspond to the jscript_files and css_files entries? Should they correspond at all?

In other words, why is 'facebox.css' => 31 when 'jquery/jquery.facebox.js' => 32,

Thanks

[Design75]

How do the numbers in blue at the end of each line correspond to the jscript_files and css_files entries? Should they correspond at all?

In other words, why is 'facebox.css' => 31 when 'jquery/jquery.facebox.js' => 32,

Thanks

The numbers are the sequence the files are loaded in. This is separate for the js and css files

[DivaVocals]

The numbers are the sequence the files are loaded in. This is separate for the js and css files

Ahhh good question by dw08gm... I would have never guessed at this being the answer.. Thanks for the explanation..

And this makes the original point the OP was making and the point I made earlier.. USING using the CSS/JS Loader is NOT something the AVERAGE DIY shopowner is going to grasp easily.. There has NEVER been an EASY TO UNDERSTAND how-to or user guide included with this module.. This is ALL that's included in the user documents in the way of "usage" instructions for creating an auto-loader file.

If you had embedded JavaScript, CSS, or meta data into your backed-up html_header.php file, either move these lines of code to includes/templates/YOUR_TEMPLATE/jscript/jscript_sitewide.php (name of file can be anything and will load site-wide by Zen Cart), or build an auto loader for CSS JS Loader in includes/templates/YOUR_TEMPLATES/auto_loaders/ (recommended if using shared libraries like jQuery).

The author's support forum for this module is not terribly useful either as it is ONE PAGE long and contains one post with a pretty vague (IMHO) response.

Anyway.. the info posted here has been way more helpful than anything posted on the author's support forum or in the user docs. Perhaps if others are willing to share their code then this will serve as a BETTER set of user docs for others..

[lankeeyankee]

Sorry, guess I didn't make myself clear when I said "in what order"(they load in). Yes, the numbers after the file names are the loading order so you can make sure that the jquery library file is loaded before other dependent files, etc. The CSS is in a separate array so the numbers do not correspond between the js and css load order. You'll notice in my example there is a php file that reside in the jscript directory. It contains some js code that is the "controller" of the js file with settings, etc.

I didn't realize that there was such a problem with this module, I hadn't noticed this thread before otherwise I would have chimed in sooner. I have created a number of custom autoloaders and it is pretty straightforward, especially when copying and changing an existing one. It really helps pinpoint very tightly when js and css files are loaded to keep unnecessary file loads and thus page file size down. I am more than happy to help anyone that needs advice or assistance. Maybe I should rewrite the readme, there is a new version of minify so the module needs updating anyway. In my opinion, this is the way the js and css should be loaded by default since it's so much more organized with a granular control.

There are quite a few things that will be difficult for your average DIY shop owner that has no coding experience (like I was when I first started). This is a perfect example and ties in to the other thread in the Other Business forum about the template market and other carts. The other carts probably don't require so much hands-on coding and hacking of files. I think OC has a true plugin system similar to Wordpress. While that is not a big deal for me since I am pretty comfortable with coding after almost 7 years with zen cart, for a new user it can be pretty daunting. Many threads in these forums are related to errors from incorrect code changes. I understand the legacy code issue, it is what it is, but it's still a valid point when comparing to other systems. I personally love zen cart for it's stability and extreme flexibility, it's very easy to customize due to being almost all procedural PHP.

[DivaVocals]

Sorry, guess I didn't make myself clear when I said "in what order"(they load in). Yes, the numbers after the file names are the loading order so you can make sure that the jquery library file is loaded before other dependent files, etc. The CSS is in a separate array so the numbers do not correspond between the js and css load order. You'll notice in my example there is a php file that reside in the jscript directory. It contains some js code that is the "controller" of the js file with settings, etc.

I didn't realize that there was such a problem with this module, I hadn't noticed this thread before otherwise I would have chimed in sooner. I have created a number of custom autoloaders and it is pretty straightforward, especially when copying and changing an existing one. It really helps pinpoint very tightly when js and css files are loaded to keep unnecessary file loads and thus page file size down. I am more than happy to help anyone that needs advice or assistance. Maybe I should rewrite the readme, there is a new version of minify so the module needs updating anyway. In my opinion, this is the way the js and css should be loaded by default since it's so much more organized with a granular control.

There are quite a few things that will be difficult for your average DIY shop owner that has no coding experience (like I was when I first started). This is a perfect example and ties in to the other thread in the Other Business forum about the template market and other carts. The other carts probably don't require so much hands-on coding and hacking of files. I think OC has a true plugin system similar to Wordpress. While that is not a big deal for me since I am pretty comfortable with coding after almost 7 years with zen cart, for a new user it can be pretty daunting. Many threads in these forums are related to errors from incorrect code changes. I understand the legacy code issue, it is what it is, but it's still a valid point when comparing to other systems. I personally love zen cart for it's stability and extreme flexibility, it's very easy to customize due to being almost all procedural PHP.

It would be AWESOME if you did write up a DETAILED user document.. the current user docs aren't just out of date.. they are VAGUE and practically non-existent.. I've learned more here in the last few days from this forum about this module than I have from the 5 minutes it takes to read the author's forum and existing user docs..

My issue with CSS/JS Loader always has been the LACK of informative instructions.. I just don't have time to decipher vague instructions nor the patience to deal with a non-responsive author..

So let me be the first to ENCOURAGE you to write, update, and PLEASE SHARE! There's no place better for support than THIS forum.. This module is practically unknown except by those who happen to install a Numinix module.. IMHO it should have been submitted as a separate module instead of being hammered into another one (TPP). On this last point, I believe even Kuroi made this same point..

[Green Books]

Hmmm, I've a problem with installation.

I tried to install the CSS/JS Loader, no css error but the "CSS/JS LOADER CONFIGURATION" didn't appear in my admin. As the installation step 3 mentions "automatically added" (like below), suppose it means I don't need to do anything to activate it, however, nothing shown up in my admin.

INSTALLATION
Step 3. Login to your and the configuration menu should be automatically added to CONFIGURATION->CSS/JS LOADER CONFIGURATION

If not, which part of the installing code is related to this?
Any reply would be appreciate. Since I'm working on the FEC module, I'll never complete the installation of FEC without CSS/JS Loader.

Thanks,
Eva

[bislewl]

please try to copy your files from ADMIN into your admin folder this should automatically load just like Numinix's FEC module, also they also (with the last 3 days) have updated both mods.

[Green Books]

please try to copy your files from ADMIN into your admin folder this should automatically load just like Numinix's FEC module, also they also (with the last 3 days) have updated both mods.

Sorry, I just don't get what you mean.
Below is my admin...



Thanks for you reply anyway.