CSS JS Loader [Support Thread]

**khejit** · 24 Oct 2014, 03:13 PM

I got the answer. Problem was with proper merging in includes/templates/MYTEMPLATE/common/html_header.php

After replacing this file with html_header from css js loader, I had to add little line of code just before closing tag ?> :

PHP Code:


if (COLUMN_WIDTH == '0') {
    echo '';
} else {
    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive.css' . '" />';
}

After this everything works just fine!

(Before that, I tried to include all code from new and old html_header, but my css's was loaded twice this way

slowing down my site)
Cheers, thanks for help!

**bislewl** · 24 Oct 2014, 03:23 PM

That won't use the full benefits of CSS/JS loader you SHOULD add an auto-loader lets call it loader_responsive.php
as
includes/templates/MYTEMPLATE/common/loader_responsive.php

it should look something like this:

PHP Code:


<?php
if (COLUMN_WIDTH == '0') {                                                            
$loaders[] = array('conditions' => array('pages' => array('*')),
                                        'css_files' => array(
                                'responsive.css' => 1)
                                ); 
}

Then it will minify (if properly validated)

**khejit** · 6 Nov 2014, 01:06 PM

I have some problems with responsive design on my site.
I will need to merge this html_header properly this time, probably build this auto-loaders. I have never done this so far, for now I'm not even sure what lines of code should I attach in this loaders. Any tips?

**bislewl** · 6 Nov 2014, 04:17 PM

Originally Posted by khejit

I have some problems with responsive design on my site.
I will need to merge this html_header properly this time, probably build this auto-loaders. I have never done this so far, for now I'm not even sure what lines of code should I attach in this loaders. Any tips?

This is typically what i do, typically I can do all of this in +/- 1 hour and get all the JS working properly, but that's with a lot of practice, I have probably built/modified 4-500 of these autoloaders.

1.) Take all the lines of code in the html_header.php that direct to css/js files remove them and then add the css/js loader code, from the sample.

2.) Then take all the js files and move them into a sub directory of /jscript
for this example I will move them to /jquery this will prevent them from loading automatically.

Use the loader to load each of the files, you would only want to load 1 jquery library.
Right now I'm using jquery-1.11.0.min.js, and jquery-migrate-1.2.1.min.js
Here is the link to download the 3 files you will need http://jquery.com/download/

3.) add these files to your includes/templates/YOUR_TEPLATE/jscript/jquery/
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
jquery-1.11.0.min.map (you don't need to reference this in the loader)

4.) In your includes/.htaccess add "map" as an allowed filetype.
just add the | and than map like this here:

PHP Code:


# but now allow just *certain* necessary files:
<FilesMatch ".*\.(js|JS|css|CSS|jpg|JPG|gif|GIF|png|PNG|swf|SWF|xsl|XSL|eot|otf|svg|ttf|woff|cur|map)$">
  Order Allow,Deny
  Allow from all
</FilesMatch>

5.) Create a site wide autoloader

PHP Code:


  $loaders[] = array(
    'conditions' => array('pages' => array('*')),
    'jscript_files' => array(
        'jquery/jquery-1.11.0.min.js' => 1,
        'jquery/jquery-migrate-1.2.1.min.js' => 2,
        'jquery/jscript_templatefile.js' => 3,
        'jquery/jscript_anotherfile.php' => 4
    ),
    'css_files' => array(
        'stylesheet.css' => 1,
        'style_imagehover.css' => 2,
        'stylesheet_css_buttons.css' => 3,
        'stylesheet_layout.css' => 4,
        'stylesheet_template.php' => 5
    )
  );

You will want to make sure that all the js files are loaded in the correct order:
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
than pretty much everything else.

6.) Load the page and look in your <head> to find out which ones are still loading outside of a css/js auto-loader, many times especially theme forest & template monster templates, will load these from functions & classes files. Some load them from includes/modules/pages/THIS_PAGE/ others form an init file, and there are a few others that load them weird, so you will need to move those files to the /jquery and then remove their references. T

NOTE: to minimize the amount of css/js that is loaded is one of the great benefits of css/js loader. And many templates just load all css/js files no matter what. So for example a homepage slider doesn't need those css/js files loaded on the product_info page. so you can make a separate auto-loader file, like this loader.

PHP Code:


$loaders[] = array('conditions' => array('pages' => array('index_home')),
    'jscript_files' => array(
        'jquery/jquery-1.11.0.min.js' => 1,
        'jquery/jquery-migrate-1.2.1.min.js' => 2,
        'jquery/jquery.blockUI.js' => 3,
        'jquery/jquery.jcarousel.js' => 4,
        'jquery/jquery_index_carousel.js' => 5
    ),
    'css_files' => array(
        'jcarousel.css' => 3
    )
);

Hopefully that helps make things a little clearer.

**McLovin** · 26 Dec 2014, 04:04 PM

Merry Christmas everyone!

I was wondering whether someone could help me with the following.

I am trying to install CSS/JS Loader as a first step to installing Fast and Easy Checkout, but I'm not sure whether I've installed everything correctly. I am running Zen Cart version 1.5.1 with PHP 5.4.

At the moment my html_header.php file looks like this:

Code:

<?php
/**
 * Common Template
 *
 * outputs the html header. i,e, everything that comes before the \</head\> tag <br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2012 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version GIT: $Id: Author: DrByte  Tue Jul 17 16:02:00 2012 -0400 Modified in v1.5.1 $
 */
/**
 * load the module for generating page meta-tags
 */
require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));
/**
 * load the module which retrieves data from the database
 */
require(DIR_WS_MODULES . zen_get_module_directory('main_page.php'));
/**
 * output main page HEAD tag and related headers/meta-tags, etc
 */
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js gt-ie8"> <!--<![endif]-->
<head>
<title><?php echo META_TAG_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />
<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
<meta http-equiv="imagetoolbar" content="no" />

<!-- ===================== Fonts ===================== -->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    
<!-- ===================== Touch Icons ===================== -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="includes/templates/mars/images/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="includes/templates/mars/images/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="includes/templates/mars/images/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="includes/templates/mars/images/apple-touch-icon-precomposed.png">

 <!-- ===================== Facebook "like" Meta Tags ===================== --> 
<meta property="og:title" content="<?php echo META_TAG_TITLE; ?>" />
<meta property="og:url" content="http://<?php echo $_SERVER["SERVER_NAME"]?><?php echo $_SERVER['REQUEST_URI'];?>" />
<?php if(META_TAG_PRODUCT_IMAGE=="META_TAG_PRODUCT_IMAGE"){?>
<meta property="og:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>includes/templates/mars/images/logo.png";  />
<?php }else{ ?>
<meta property="og:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>images/<?php echo META_TAG_PRODUCT_IMAGE;?>" />
<meta property="og:type" content="product" />
<?php } ?>

<meta property="og:site_name" content="<?php echo META_TAG_TITLE; ?>"/>
<meta property="og:description" content="<?php echo META_TAG_DESCRIPTION; ?>"/>
<meta property="og:locale" content="en_US" />  

<!-- <meta name="author" content="The Zen Cart&reg; Team and others" /> -->
<!-- <meta name="generator" content="shopping cart program by Zen Cart&reg;, http://www.zen-cart.com eCommerce" /> -->

<?php if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($current_page_base,explode(",",constant('ROBOTS_PAGES_TO_SKIP'))) || $current_page_base=='down_for_maintenance' || $robotsNoIndex === true) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<?php if (defined('FAVICON')) { ?>
<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<?php } //endif FAVICON ?>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ); ?>" />
<?php if (isset($canonicalLink) && $canonicalLink != '') { ?>
<link rel="canonical" href="<?php echo $canonicalLink; ?>" />
<?php } ?>

<?php
/**
 * load all template-specific stylesheets, named like "style*.css", alphabetically
 */
  $site_theme = $general_site_options->fields['general_site_theme'];

  if(isset($site_theme)){

    $site_theme_file = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $site_theme . '.css';
    if (file_exists($site_theme_file)) {
      echo '<link rel="stylesheet" type="text/css" href="' . $site_theme_file .'" />'."\n";
    }else{
      $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";
      }
    }
  }else {
    $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";
  }
?>

<?php 
  /**
   * load the Mars custom css file, you can edit the content by going to Tools -> Define Pages Editor -> define_custom_css.php
   */    
    require(zen_get_file_directory(DIR_WS_LANGUAGES . $_SESSION['language'] . '/html_includes/', FILENAME_DEFINE_CUSTOM_CSS, 'false'));     
?>

<?php 
/**
 * 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";
  }

// DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';

?>

<?php 
/**
 * load the necessary custom Mars theme script files
 */      
  require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_JS_HEADER));
?>


</head>
<?php // NOTE: Blank line following is intended: ?>

I've merged the CSS JS Loader html_header.php, which looks like this:

Code:

<?php
/**
 * Common Template
 *
 * outputs the html header. i,e, everything that comes before the \</head\> tag <br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2010 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: html_header.php 6 2012-05-07 21:43:01Z numinix $
 */
/**
 * load the module for generating page meta-tags
 */
require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));
/**
 * output main page HEAD tag and related headers/meta-tags, etc
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
<head>
<title><?php echo META_TAG_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />
<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="The Zen Cart&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, http://www.zen-cart.com eCommerce" />
<?php if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($current_page_base,explode(",",constant('ROBOTS_PAGES_TO_SKIP'))) || $current_page_base=='down_for_maintenance' || $robotsNoIndex === true) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<?php if (defined('FAVICON')) { ?>
<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<?php } //endif FAVICON ?>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ); ?>" />
<?php if (isset($canonicalLink) && $canonicalLink != '') { ?>
<link rel="canonical" href="<?php echo $canonicalLink; ?>" />
<?php } ?>

<?php
/**
* load the loader files
*/

if($RI_CJLoader->get('status') && (!isset($Ajax) || !$Ajax->status())){
	$RI_CJLoader->autoloadLoaders();
	$RI_CJLoader->loadCssJsFiles();
	$files = $RI_CJLoader->header();	
	
	foreach($files['css'] as $file)
		if($file['include']) {
      include($file['src']);
    } else if (!$RI_CJLoader->get('minify_css') || $file['external']) {
      echo '<link rel="stylesheet" type="text/css" href="'.$file['src'].'" />'."\n";
    } else {
      echo '<link rel="stylesheet" type="text/css" href="min/?f='.$file['src'].'&amp;'.$RI_CJLoader->get('minify_time').'" />'."\n";
    }
		
	foreach($files['jscript'] as $file)
		if($file['include']) {
      include($file['src']);
    } else if(!$RI_CJLoader->get('minify_js') || $file['external']) {
      echo '<script type="text/javascript" src="'.$file['src'].'"></script>'."\n";
    } else {
      echo '<script type="text/javascript" src="min/?f='.$file['src'].'&amp;'.$RI_CJLoader->get('minify_time').'"></script>'."\n";
    }
}
//DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';
?>
</head>
<?php // NOTE: Blank line following is intended: ?>

With my current html_header.php, to look like this:

Code:

<?php
/**
 * Common Template
 *
 * outputs the html header. i,e, everything that comes before the \</head\> tag <br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2012 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version GIT: $Id: Author: DrByte  Tue Jul 17 16:02:00 2012 -0400 Modified in v1.5.1 $
 */
/**
 * load the module for generating page meta-tags
 */
require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));
/**
 * load the module which retrieves data from the database
 */
require(DIR_WS_MODULES . zen_get_module_directory('main_page.php'));
/**
 * output main page HEAD tag and related headers/meta-tags, etc
 */
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js gt-ie8"> <!--<![endif]-->
<head>
<title><?php echo META_TAG_TITLE; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />
<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
<meta http-equiv="imagetoolbar" content="no" />

<!-- ===================== Fonts ===================== -->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    
<!-- ===================== Touch Icons ===================== -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="includes/templates/mars/images/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="includes/templates/mars/images/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="includes/templates/mars/images/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="includes/templates/mars/images/apple-touch-icon-precomposed.png">

 <!-- ===================== Facebook "like" Meta Tags ===================== --> 
<meta property="og:title" content="<?php echo META_TAG_TITLE; ?>" />
<meta property="og:url" content="http://<?php echo $_SERVER["SERVER_NAME"]?><?php echo $_SERVER['REQUEST_URI'];?>" />
<?php if(META_TAG_PRODUCT_IMAGE=="META_TAG_PRODUCT_IMAGE"){?>
<meta property="og:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>includes/templates/mars/images/logo.png";  />
<?php }else{ ?>
<meta property="og:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG ?>images/<?php echo META_TAG_PRODUCT_IMAGE;?>" />
<meta property="og:type" content="product" />
<?php } ?>

<meta property="og:site_name" content="<?php echo META_TAG_TITLE; ?>"/>
<meta property="og:description" content="<?php echo META_TAG_DESCRIPTION; ?>"/>
<meta property="og:locale" content="en_US" />  

<!-- <meta name="author" content="The Zen Cart&reg; Team and others" /> -->
<!-- <meta name="generator" content="shopping cart program by Zen Cart&reg;, http://www.zen-cart.com eCommerce" /> -->

<?php if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($current_page_base,explode(",",constant('ROBOTS_PAGES_TO_SKIP'))) || $current_page_base=='down_for_maintenance' || $robotsNoIndex === true) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php } ?>
<?php if (defined('FAVICON')) { ?>
<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<?php } //endif FAVICON ?>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ); ?>" />
<?php if (isset($canonicalLink) && $canonicalLink != '') { ?>
<link rel="canonical" href="<?php echo $canonicalLink; ?>" />
<?php } ?>

<?php
/**
* load the loader files
*/

if($RI_CJLoader->get('status') && (!isset($Ajax) || !$Ajax->status())){
  $RI_CJLoader->autoloadLoaders();
  $RI_CJLoader->loadCssJsFiles();
  $files = $RI_CJLoader->header();  
  
  foreach($files['css'] as $file)
    if($file['include']) {
      include($file['src']);
    } else if (!$RI_CJLoader->get('minify_css') || $file['external']) {
      echo '<link rel="stylesheet" type="text/css" href="'.$file['src'].'" />'."\n";
    } else {
      echo '<link rel="stylesheet" type="text/css" href="min/?f='.$file['src'].'&amp;'.$RI_CJLoader->get('minify_time').'" />'."\n";
    }
    
  foreach($files['jscript'] as $file)
    if($file['include']) {
      include($file['src']);
    } else if(!$RI_CJLoader->get('minify_js') || $file['external']) {
      echo '<script type="text/javascript" src="'.$file['src'].'"></script>'."\n";
    } else {
      echo '<script type="text/javascript" src="min/?f='.$file['src'].'&amp;'.$RI_CJLoader->get('minify_time').'"></script>'."\n";
    }
}
//DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';
?>

<?php 
/**
 * load the necessary custom Mars theme script files
 */      
  require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_JS_HEADER));
?>
</head>
<?php // NOTE: Blank line following is intended: ?>

Everything seems to be in working order, but I have the feeling that I might be overlooking something. Before I go live, could someone perhaps take a quick look and point out any obvious errors I might be overlooking?

**toyseller** · 11 Jan 2015, 05:57 PM

I installed CSS/JS Loader to improve the load speed of the responsive template Sheffield Blue
(which is a free responsive template offered on the forum).

It threw the look of the template out completely ... but luckily Id stored away the html_header.php file before the CSS/JS Loader version overwrote it.

Ive been trying to follow what is going on in this forum and Im wondering if I can be helped to piece together a new html_header.php and get this product to work (or is there more to it than just merging the coding). Or should I just sit tight and wait for a new version of CSS/JS Loader?.

I have just gone live with the new site using v1.5.4 of Zen Cart and havent installed Fast and Easy checkout. (www.tidytoys.co.uk) I dont have any php coding experience or knowledge of what the code is doing.

The coding that is currently in the html_header.file is this ...

PHP Code:


<?php

/**

 * Common Template

 *

 * outputs the html header. i,e, everything that comes before the \</head\> tag <br />

 *

 * @package templateSystem

 * @copyright Copyright 2003-2012 Zen Cart Development Team

 * @copyright Portions Copyright 2003 osCommerce

 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0

 * @version GIT: $Id: Author: DrByte  Tue Jul 17 16:02:00 2012 -0400 Modified in v1.5.1 $

 */

/**

 * load the module for generating page meta-tags

 */

require(DIR_WS_MODULES . zen_get_module_directory('meta_tags.php'));

/**

 * output main page HEAD tag and related headers/meta-tags, etc

 */

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>

<head>

<title><?php echo META_TAG_TITLE; ?></title>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />

<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />

<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />

<meta http-equiv="imagetoolbar" content="no" />

<meta name="author" content="The Zen Cart&reg; Team and others" />

<meta name="generator" content="shopping cart program by Zen Cart&reg;, http://www.zen-cart.com eCommerce" />



<meta name="viewport" content="width=device-width, initial-scale=1.0"/>



<?php if (defined('ROBOTS_PAGES_TO_SKIP') && in_array($current_page_base,explode(",",constant('ROBOTS_PAGES_TO_SKIP'))) || $current_page_base=='down_for_maintenance' || $robotsNoIndex === true) { ?>

<meta name="robots" content="noindex, nofollow" />

<?php } ?>

<?php if (defined('FAVICON')) { ?>

<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />

<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />

<?php } //endif FAVICON ?>

<link rel="apple-touch-icon-precomposed" href="images/apple touch icon.png" />

<link rel="apple-touch-icon-precomposed" href="images/touch-icon-iphone-60x60.png">

<link rel="apple-touch-icon-precomposed" sizes="60x60" href="images/touch-icon-ipad-76x76.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch-icon-iphone-retina-120x120.png">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch-icon-ipad-retina-152x152.png">

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/apple-touch-icon-180x180.png">

            



<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER . DIR_WS_HTTPS_CATALOG : HTTP_SERVER . DIR_WS_CATALOG ); ?>" />

<?php if (isset($canonicalLink) && $canonicalLink != '') { ?>

<link rel="canonical" href="<?php echo $canonicalLink; ?>" />

<?php } ?>



<?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";

  }



// DEBUG: echo '<!-- I SEE cat: ' . $current_category_id . ' || vs cpath: ' . $cPath . ' || page: ' . $current_page . ' || template: ' . $current_template . ' || main = ' . ($this_is_home_page ? 'YES' : 'NO') . ' -->';



if (COLUMN_WIDTH == '0') {

    echo '';

} else {

    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive.css' . '" />';

}

?>



<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript') . '/css_browser_selector.js' ?>" type="text/javascript"></script>





</head>

<?php // NOTE: Blank line following is intended: ?>

**SignTorch** · 11 Jan 2015, 07:40 PM

Originally Posted by toyseller

...It threw the look of the template out completely ...

your description/question is not clear, but if you are referring to the opaque black and white spots on the ribbons where there should be transparent shadows, then you just need to revert back to the original images, and preserve their transparency when attempting to change their color. that's all I can see wrong. not sure if that's what your question is about.... I don't see any script/css/loading errors off hand....

**toyseller** · 12 Jan 2015, 05:41 PM

There are currently no problems with my live webite at the moment because I cant use CSS/JS Loader on it.

I cant argue my case because I dont understand the coding. I had this module running on my old 1.3.9h website but it doesnt work on my new 1.5.4 site with its new Sheffield Blue template. It wasnt just a minor glitch. It rendered the whole website visually unusable.

I am not the only person who found that this template and CSS/JS Loader are incompatable. My understanding is that it is because the coding in the html_header.php varies between the 2 products (Im sorry I really really cant argue my case). All I know is that I could get my website back to looking good by putting the coding above for html_header.php back into my website and it worked again. Hence why I posted the code above. I thought someone would understand why the coding isnt compatable for this template.

This is another posting on the Sheffield Blue website of someone with the same issues ..
http://www.zen-cart.com/showthread.p...ld-Blue/page28

**picaflor-azul** · 12 Jan 2015, 05:55 PM

Originally Posted by toyseller

There are currently no problems with my live webite at the moment because I cant use CSS/JS Loader on it.

I cant argue my case because I dont understand the coding. I had this module running on my old 1.3.9h website but it doesnt work on my new 1.5.4 site with its new Sheffield Blue template. It wasnt just a minor glitch. It rendered the whole website visually unusable.

I am not the only person who found that this template and CSS/JS Loader are incompatable. My understanding is that it is because the coding in the html_header.php varies between the 2 products (Im sorry I really really cant argue my case). All I know is that I could get my website back to looking good by putting the coding above for html_header.php back into my website and it worked again. Hence why I posted the code above. I thought someone would understand why the coding isnt compatable for this template.

This is another posting on the Sheffield Blue website of someone with the same issues ..
http://www.zen-cart.com/showthread.p...ld-Blue/page28

There is no incompatibility between the Responsive Sheffield Blue template and the css/js loader plugin. My guess is that you are not merging the html_header.php file correctly. Any stable, correctly installed plugin will work with the template. If you do not have the skills to merge the files you may need to contract professional help.

Thanks,

Anne

**toyseller** · 26 Jan 2015, 04:15 PM

I simply downloaded the CSS/JS Loader add-on and switched it on.

Am I supposed to merge the coding ... that is what I am trying to find out.

I thought that on a normal situation you downloaded a plug-in installed it, turned it on and if you had installed it correctly it worked.

The CSS/JS Loader didnt work for me ... and Im trying to understand from this forum whether I need to pull out the coding to get it to work.

What is increasingly frustrating me is that the people with the knowledge are expecting me to be at their level
I have no knowledge of PHP, CSS or HTML. I do have knowledge of Cobol.

Thread: CSS JS Loader [Support Thread]

Thread Tools

Search Thread

Display

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Re: CSS JS Loader [Support Thread]

Similar Threads

v150 CSS Buttons for Admin [Support Thread]

v151 CSS/JS Loader installation question

css/js loader !!

CJ Loader (CSS/Javascript Loader) plugin function is not loaded by zen cart?

[support thread] Javascript loader

Bookmarks

Bookmarks

Posting Permissions