CSS JS Loader [Support Thread]

[Danielle]

Or just use the original Zen Cart html_header which already loads jQuery from CDN with a localized fallback if the CDN fails.
It's too bad this plugin mangles that immediately out of the box.

Yes, I just don't understand why I can get it working with the default template and not with the responsive classic. I honestly would rather not use the plugin at all, but I am installing FEC and it says CSS/JS Loader is a prerequisite.

[carlwhat]

danielle you have removed the code for loading of the jquery library. that's why you can't get it to work. the previous comments should give you where to look to get it to load.

i like the FEC plugin, but from what i remember that one will require a bit of work as well to get it working and styled the way you want it.

if you are still having problems let me know and i provide some more help when i'm in front of my computer.

[Design75]

Better use the One Page Checkout from lat9. Less complicated, and easier to maintain.

[Danielle]

danielle you have removed the code for loading of the jquery library. that's why you can't get it to work. the previous comments should give you where to look to get it to load.

i like the FEC plugin, but from what i remember that one will require a bit of work as well to get it working and styled the way you want it.

if you are still having problems let me know and i provide some more help when i'm in front of my computer.

Thank you, I have the CSS Loader working now. I have styled FEC to be responsive before, so hopefully will be able to do something similar within the Responsive Classic template.

[Danielle]

Better use the One Page Checkout from lat9. Less complicated, and easier to maintain.

I will check this one out, thank you!

[simon1066]

I'm adapting a third party template to work with a zen cart site (or should it be the other way round) and some of the css uses

height: calc(3em + 2px);

The loader removes the spaces making the code invalid. Is there around this?

edit: the spaces around the + that is.

[simon1066]

Ah yes, or course there is. Put the code in its own stylesheet and leave it out of the minifying process. Although would be nice if there was a way to substitue the spaces with code - similar to   in HTML

[simon1066]

Does anyone have a working example of

'call_backs' => array('is_logged_in','class_name,method_name')

that I can use as a guide.

I'm attempting to customise this original code to load js on product listing pages only (I don't think I can use 'pages') but am not sure what 'class_name,method_name' denotes.

[simon1066]

It's ok. A moment of clarity told me I can use 'is_logged_in' OR 'class_name, method_name'. I should be able to complete it now.

[giancalr]

hi all, then my question is this, the css js loader, does not minimize the css and js files that are loaded with an external call, for example, in my html_header file there are:
/**
* 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') || $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') || $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') . ' -->';
?>
All these external css how do you minimize them?
<!--CSS Files-->
<!--Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/bootstrap.css'?>" type="text/css" />
<link rel="stylesheet" href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/bootstrap-theme.css'?>" type="text/css" />
<!--Bootstrap CSS Ends -->
<!-- Owl Transitions CSS -->
<link rel="stylesheet" href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/owl.transitions.css'?>" type="text/css" media="screen" />
<!--Owl Transitions CSS Ends -->
<!-- Shopfast Template CSS -->
<link href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/templatecss.css'?>" rel="stylesheet" type="text/css" />
<!-- Shopfast Template CSS Ends -->
<!-- Animation CSS on Scroll -->
<link rel="stylesheet" href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/animate.css'?>" type="text/css" media="screen" />
<!-- Animation CSS on Scroll Ends -->
<!-- Font Awesome CSS -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<!-- Font Awesome CSS Ends -->
<!-- Dropdown Select Menu CSS -->
<link rel="stylesheet" href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/select2.css'?>" type="text/css" media="screen" />
<!-- Dropdown Select Menu CSS -->
<!-- MailChimp CSS -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css" />
<!--Mail Chimp CSS Ends -->
<!-- Responsive CSS for Device -->
<link href="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'css').'/devicecss.css'?>" rel="stylesheet" type="text/css" />
<!-- Responsive CSS for Device Ends -->
<!-- Shopfast Theme File for Color -->
<?php
require($template->get_template_dir('tpl_shopfast_custom_css.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_shopfast_custom_css.php');
?>
<!-- Shopfast Theme File for Color -->
<!--CSS files Ends-->
<!--Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<!--Google Fonts Ends-->

then in the file footer.php there are all these js files:

<!-- Shopfast JS Files -->
<!-- Google Jquery -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/jquery.min.js'?>" type="text/javascript"></script>
<!-- Google Jquery Ends -->
<?php if ($this_is_home_page) { ?>
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/jquery.easing.1.3.js'?>" type="text/javascript"></script>
<?php }?>

<!-- BOF Mainmenu JS New Update-->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/menumaker.js'?>" type="text/javascript"></script>
<!-- EOF Mainmenu JS New Update-->

<!-- Select Dropdown JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/select2.js'?>" type="text/javascript"></script>
<!-- Select Dropdown JS Ends -->
<!-- Bootstrap JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/bootstrap.js'?>" type="text/javascript"></script>
<!-- Bootstrap JS Ends -->
<!-- Browser Selector JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/css_browser_selector.js'?>" type="text/javascript"></script>
<!-- Browser Selector JS Ends -->
<!-- Nice Scroll JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/jquery.nicescroll.min.js'?>" type="text/javascript"></script>
<!-- Nice Scroll JS Ends -->
<!-- Shopfast Custom JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/shopfast_custom.js'?>" type="text/javascript">
</script>
<!-- Shopfast Custom JS Ends -->
<!-- Tab JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/tabcontent.js'?>" type="text/javascript"></script>
<!-- Tab JS Ends -->
<!--Owl Slider-->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/owl.carousel.js'?>" type="text/javascript"></script>
<!--Owl Slider Ends-->
<!-- WOW JS -->
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/wow.min.js'?>" type="text/javascript"></script>
<script type="text/javascript">
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: false // trigger animations on mobile devices (true is default)
}
);
wow.init();
</script>
<!-- WOW JS Ends -->
<!-- JQuery Lightbox JS and Cloud Zoom JS-->
<?php if (in_array($current_page_base,explode(",",'product_info,product_reviews_info,prod uct_reviews,product_reviews_write'))) { ?>
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/jscript_jquery_1-4-4.js'?>" type="text/javascript"></script>
<script src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'jscript').'/cloud-zoom.1.0.3.js'?>" type="text/javascript"></script>
<script type="text/javascript">
//Cloud Zoom
var cld = jQuery.noConflict();
cld('#zoom01, .cloud-zoom-gallery').CloudZoom();
</script>
<?php } ?>
<!-- JQuery Lightbox JS and Cloud Zoom JS Ends-->

Grazie