CSS JS Loader [Support Thread]

[DML73]

Great thanks. Am I correct that there is no way to actually meassure/test if the module has an effect on my website?

[bislewl]

Great thanks. Am I correct that there is no way to actually meassure/test if the module has an effect on my website?

You are incorrect.

[DML73]

You are incorrect.

Ok, how can I meassure/test if the module have an effect on my site?

[DML73]

One more question, am I supposed to remove the following from html_header.php?:

/**
* load all template-specific stylesheets, named like "style*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^style/', '.css');
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}
/**
* load stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza.
*/
$manufacturers_id = (isset($_GET['manufacturers_id'])) ? $_GET['manufacturers_id'] : '';
$tmp_products_id = (isset($_GET['products_id'])) ? (int)$_GET['products_id'] : '';
$tmp_pagename = ($this_is_home_page) ? 'index_home' : $current_page_base;
if ($current_page_base == 'page' && isset($ezpage_id)) $tmp_pagename = $current_page_base . (int)$ezpage_id;
$sheets_array = array('/' . $_SESSION['language'] . '_stylesheet',
'/' . $tmp_pagename,
'/' . $_SESSION['language'] . '_' . $tmp_pagename,
'/c_' . $cPath,
'/' . $_SESSION['language'] . '_c_' . $cPath,
'/m_' . $manufacturers_id,
'/' . $_SESSION['language'] . '_m_' . (int)$manufacturers_id,
'/p_' . $tmp_products_id,
'/' . $_SESSION['language'] . '_p_' . $tmp_products_id
);
while(list ($key, $value) = each($sheets_array)) {
//echo "<!--looking for: $value-->\n";
$perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . $value . '.css';
if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
}

/**
* custom category handling for a parent and all its children ... works for any c_XX_XX_children.css where XX_XX is any parent category
*/
$tmp_cats = explode('_', $cPath);
$value = '';
foreach($tmp_cats as $val) {
$value .= $val;
$perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/c_' . $value . '_children.css';
if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
$perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $_SESSION['language'] . '_c_' . $value . '_children.css';
if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
$value .= '_';
}

/**
* load printer-friendly stylesheets -- named like "print*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}

/**
* load all site-wide jscript_*.js files from includes/templates/YOURTEMPLATE/jscript, alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'), '/^jscript_/', '.js');
while(list ($key, $value) = each($directory_array)) {
echo '<script type="text/javascript" src="' . $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/' . $value . '"></script>'."\n";
}

/**
* load all page-specific jscript_*.js files from includes/modules/pages/PAGENAME, alphabetically
*/
$directory_array = $template->get_template_part($page_directory, '/^jscript_/', '.js');
while(list ($key, $value) = each($directory_array)) {
echo '<script type="text/javascript" src="' . $page_directory . '/' . $value . '"></script>' . "\n";
}

/**
* load all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.php',DIR_WS_TEMPLATE, $current_page_base,'jscript'), '/^jscript_/', '.php');
while(list ($key, $value) = each($directory_array)) {
/**
* include content from all site-wide jscript_*.php files from includes/templates/YOURTEMPLATE/jscript, alphabetically.
* These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page
*/
require($template->get_template_dir('.php',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/' . $value); echo "\n";
}
/**
* include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.
*/
$directory_array = $template->get_template_part($page_directory, '/^jscript_/');
while(list ($key, $value) = each($directory_array)) {
/**
* include content from all page-specific jscript_*.php files from includes/modules/pages/PAGENAME, alphabetically.
* These .PHP files can be manipulated by PHP when they're called, and are copied in-full to the browser page
*/
require($page_directory . '/' . $value); echo "\n";
}

[numinix]

You should actually be replacing html_header.php with the file in CSS JS Loader. Backup your old file first. Then any embedded scripts need to be moved into includes/templates/YOUR_TEMPLATE/jscript/jscript_somename.php files so they auto load. This will cause them to load site-wide through Zen Cart's default system.

However, the default system does not support dependencies. So, if you have something like jQuery loading in your template, other than in CSS JS Loader supported plugins, you'll need to create auto loader files in CSS JS Loader to load those libraries. Otherwise you are going to have multiple versions of jQuery loading and in no particular order.

[bislewl]

Ok, how can I meassure/test if the module have an effect on my site?

One way to test the difference is buy using one of these tools:
https://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com/fpt/

[tk42one]

Hey all!

So I think I have a unique issue with my CSS JS Loader install. I've combed the support threads and haven't found anyone talking about it, but in case I've missed it please call me stupid and link me to it. Thanks!

Anywho, I've loaded CSS JS loader as per the instructions as well as FEC. Everyting works fine, EXCEPT that my columns are displaying correctly. My left column now appears in my center column and I'm not sure how to fix this. Here is my site: newsite.camppacs.com

Any help is greatly appreciated!

[webchills]

Hello All,
I'm running Zen 154 with TPP 1.1 and I'm now installing CSS JS Loader 3.0.2. When I turn on "css minify" in CSS JS Loader it removes the styling for TPP only.
Is there a way to get CSS JS Loader 3.0.2 and TPP 1.1 to play nicely?
Any help would be appreciated. Thank you.

TPP works just fine with Minify activated in the CSS JS Loader if you follow these steps to load it dynamically via CSS/JS Loader:

1)
Create a file called loader_tpp.php with the following content:

<?php
/**
* @package Pages
* @copyright Copyright 2003-2015 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart-pro.at/license/2_0.txt GNU Public License V2.0
* @version $Id: loader_tpp.php 2015-08-04 18:23:35Z webchills $
*/   

$loaders[] = array('conditions' => array('pages' => array('product_info','product_music_info','document_general_info','document_product_info','product_free_shipping_info')),
                    'jscript_files' => array(
	                    'tpp.js' => 5	                    
                    ),
                    'css_files' => array(
                    	'tpp/alt_tpp_tabs13.css' => 10,
                      'tpp.css'	=> 	11)
                );

Upload it to includes/templates/YOURTEMPLATE/auto_loaders

If you want to use an other Stylesheet change to alt_tpp_tabs5.css or whatever you want.

2)
Remove the following files from TPP 1.1 from your store as they are not needed anymore (do not delete them without having a look at them, maybe you have some other definitions in these stylesheets, just remove the TPP entries):
includes/templates/YOURTEMPLATE/css/document_general_info.css
includes/templates/YOURTEMPLATE/css/document_product_info.css
includes/templates/YOURTEMPLATE/css/product_free_shipping_info.css
includes/templates/YOURTEMPLATE/css/product_info.css
includes/templates/YOURTEMPLATE/css/product_music_info.css

3)
Create a Stylesheet with the following content:

.alignright {
  display:inline;
  float:right;
  margin-bottom:4px;
  margin-left:10px;
  overflow:hidden;
  border: 1px solid black;
}

.alignleft {
  display:inline;
  float:left;
  margin-bottom:4px;
  margin-right:10px;
  overflow:hidden;
}

Save it as tpp.css and upload it to includes/templates/YOURTEMPLATE/css

4)
Look at includes/modules/pages/product_info
TPP 1.1 has placed a javascript called jscript_tpp.js in this folder
Download the file, rename it to tpp.js and upload it to
includes/templates/YOURTEMPLATE/jscript

Then you can safely remove the jscript_tpp.js from the following folders:

includes/modules/pages/document_general_info
includes/modules/pages/document_general_info
includes/modules/pages/document_product_info
includes/modules/pages/product_free_shipping_info
includes/modules/pages/product_info
includes/modules/pages/product_music_info

[lat9]

Just a note for new installations. I just downloaded v3.0.5 from the plugins and, on inspection, the file /YOUR_ADMIN/includes/installers/css_js_loader/new_install.php will wipe out all settings in configuration_group_id = 0:

<?php
$configuration = $db->Execute("SELECT configuration_group_id FROM " . TABLE_CONFIGURATION_GROUP . " WHERE configuration_group_title = 'CSS/JS Loader' OR configuration_group_title = 'CSS/JS Loader Configuration';");
if ($configuration->RecordCount() > 0) {
  while (!$configuration->EOF) {
    $db->Execute("DELETE FROM " . TABLE_CONFIGURATION . " WHERE configuration_group_id = " . $configuration->fields['configuration_group_id'] . ";");
    $db->Execute("DELETE FROM " . TABLE_CONFIGURATION_GROUP . " WHERE configuration_group_id = " . $configuration->fields['configuration_group_id'] . ";");
    $configuration->MoveNext();
  }
}
$db->Execute("DELETE FROM " . TABLE_CONFIGURATION . " WHERE configuration_group_id = 0;");
$db->Execute("DELETE FROM " . TABLE_CONFIGURATION . " WHERE configuration_key = '';");

$db->Execute("INSERT INTO " . TABLE_CONFIGURATION_GROUP . " (configuration_group_id, configuration_group_title, configuration_group_description, sort_order, visible) VALUES (NULL, 'CSS/JS Loader Configuration', 'Set CSS/JS Loader Options', '1', '1');");
$configuration_group_id = $db->Insert_ID();

$db->Execute("UPDATE " . TABLE_CONFIGURATION_GROUP . " SET sort_order = " . $configuration_group_id . " WHERE configuration_group_id = " . $configuration_group_id . ";");

This doesn't affect the operation of any Zen Cart v1.5.3 (or later) sites since the ZC development team took a pro-active step in that release to move those items into the "Modules" configuration group (id=6). For new installs on previous Zen Cart installations, the line highlighted above should be deleted prior to copying to your store.

Note: This issue was reported in the very first post on this thread. Neither of the two issues reported there have been corrected.

[Freddiec2385]

One way to test the difference is buy using one of these tools:
https://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com/fpt/

Hello,
I installed CSS/ JS loader and still receive the following errors in Google insights: 'Consider Fixing:' Minify Javascript/ Minify CSS. Is my install corrupt?