Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

Combining JS, CSS and background images

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 02-03-2010, 04:16 AM
  ARW VISIONS's Avatar 
ARW VISIONS ARW VISIONS is offline
 

X-Man
  
Join Date: Jan 2007
Location: Pensacola, FL
Posts: 2,536
 

Default Combining JS, CSS and background images

Ok, I already know how to do the background image sprites, but I am less sure about the javascript.

Can you really just put all of your javascript in one big file and call just one script?

Will this cause any conflicts?

Also, with all of the CSS conditional statements, is there really a way to combine all CSS into one file?
__________________
xcart 5.1.2
Reply With Quote
  #2  
Old 02-03-2010, 04:56 AM
  gizmo's Avatar 
gizmo gizmo is offline
 

X-Adept
  
Join Date: Jan 2005
Location: Crawley : UK
Posts: 618
 

Default Re: Combining JS, CSS and background images

I could maybe help a little here Ash.
As for java, All my added JS I include in one file and call it js_all.tpl I put it in a folder, then use an include in home.tpl this way it calls it all up from there, so far works a treat, but this is only for my added JS for my tabs, accordions, and other mainly JQuerry js I have not tried us of yet to do what you are saying.

Give it a go on a test site and see how it works.

As to css, If you can get your head around sorting it all out (Maybe) I think the IE css fixes compatibilities would have to be kept different
__________________
Thank You - Alan
Don't be like me, and keep saying "Nearly did it" go do it!!
Version: 4.4.4 Gold -
Reply With Quote
  #3  
Old 02-03-2010, 05:55 AM
 
dwpers dwpers is offline
 

Senior Member
  
Join Date: Aug 2009
Location: Washington D.C.
Posts: 136
 

Default Re: Combining JS, CSS and background images

If you have a lot of javascript variables, make sure none conflict (as in assigning variables with the same name in 2 different scripts).

Other than that, yes, you can combine and even minify them to save space.

Regarding CSS, yes, you can combine CSS into all one stylesheet, however, whether it's possible with X-Cart, no idea.
__________________
X-Cart Pro 4.2.2
Reply With Quote
  #4  
Old 02-03-2010, 05:59 AM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default Re: Combining JS, CSS and background images

Don't call it as a .tpl or it will actually include the code in the source, thus pushing your content too far down the page (not friendly for SEO). Call it as a .js file, and not with Smarty, but with a <script> link.
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #5  
Old 02-03-2010, 09:48 AM
  ARW VISIONS's Avatar 
ARW VISIONS ARW VISIONS is offline
 

X-Man
  
Join Date: Jan 2007
Location: Pensacola, FL
Posts: 2,536
 

Default Re: Combining JS, CSS and background images

ok cool... thanks a bunch!!

What about all the CSS?
__________________
xcart 5.1.2
Reply With Quote
  #6  
Old 02-03-2010, 09:55 AM
 
dwpers dwpers is offline
 

Senior Member
  
Join Date: Aug 2009
Location: Washington D.C.
Posts: 136
 

Default Re: Combining JS, CSS and background images

Embed the condensed CSS file like you would do normally for stylesheets. Depending on which files call it, edit those tpl files to call just 1 CSS file. If the header is constant on all your pages, then your life is made easy and you can just edit that header file to call the single CSS file.
__________________
X-Cart Pro 4.2.2
Reply With Quote
  #7  
Old 02-03-2010, 02:47 PM
  gizmo's Avatar 
gizmo gizmo is offline
 

X-Adept
  
Join Date: Jan 2005
Location: Crawley : UK
Posts: 618
 

Default Re: Combining JS, CSS and background images

Quote:
Originally Posted by balinor
Don't call it as a .tpl or it will actually include the code in the source, thus pushing your content too far down the page (not friendly for SEO). Call it as a .js file, and not with Smarty, but with a <script> link.


Sorry to step over you topic Ash:

It only has estension .tpl all the rest of code within it, is links to js files, so I have this included within home.tpl as it creats no clashes > {include file="abeez_sources/templates/jquerry_all.tpl"}

so > jquerry_all.tpl has stuff like following >

Code:
<link type="text/css" href="{$SkinDir}/abeez_sources/css/sky_blue/xxxx.css" rel="stylesheet" /></style> <script type="text/javascript" src="{$SkinDir}/abeez_sources/files/js/xxxxx.js"></script> <script type="text/javascript" src="{$SkinDir}/abeez_sources/files/sky_blue/js/xxxxxxxx.js"></script> {literal}<script type="text/javascript"> $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); // Tabs $('#tabs').tabs(); // Dialog $('#dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); // Dialog Link $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return false; }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> {/literal}

Doing it other ways gave me some conflicts, this solution works for calling yes, but you are saying call the file estension .js or something? For SEO Purposes?
__________________
Thank You - Alan
Don't be like me, and keep saying "Nearly did it" go do it!!
Version: 4.4.4 Gold -
Reply With Quote
  #8  
Old 02-03-2010, 04:14 PM
  ARW VISIONS's Avatar 
ARW VISIONS ARW VISIONS is offline
 

X-Man
  
Join Date: Jan 2007
Location: Pensacola, FL
Posts: 2,536
 

Default Re: Combining JS, CSS and background images

But that doesn't solve the issue of multiple HTTP requests.

Ash
__________________
xcart 5.1.2
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 03:33 PM.

   

 
X-Cart forums © 2001-2020