X-Cart forums - Combining JS, CSS and background images

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Combining JS, CSS and background images (https://forum.x-cart.com/showthread.php?t=52123)

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?

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

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.

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.

Re: Combining JS, CSS and background images

ok cool... thanks a bunch!!

What about all the CSS?

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.

Re: Combining JS, CSS and background images

Quote:

Originally Posted by balinor

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?

Re: Combining JS, CSS and background images

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

Ash