Difference between revisions of "X-Cart:CSS and JavaScript optimization"

From X-Cart 4 Classic
Jump to: navigation, search
(Assembling JS and CSS code)
(General info)
Line 10: Line 10:
 
* [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]]
 
* [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]]
  
If these variables are disabled, 'load_defer' outputs the code defined in templates immediately, and 'load_defer_code' doesn't do anything.
+
If these variables are disabled, 'load_defer' outputs the code added to X-Cart templates immediately, and 'load_defer_code' doesn't do anything.
  
If these variables are enabled, 'load_defer' assembles entered code to a single JS or CSS file, then 'load_defer_code' outputs the assembled code (by including the corresponding JS and CSS files to the page source).
+
If these variables are enabled, 'load_defer' assembles the code added to X-Cart templates to a single JS or CSS file, then 'load_defer_code' outputs the assembled code (by including the corresponding JS and CSS files to the page source).
  
 
== Adding JS and CSS code to X-Cart templates==
 
== Adding JS and CSS code to X-Cart templates==

Revision as of 14:26, 21 November 2011

General info

To optimize operations with CSS and JavaScript, we have added new Smarty tags:

  • load_defer
  • load_defer_code

Both these tags handle the operations of assembling and outputting of code for JavaScript and CSS. The logic of the tags depends on the store configuration variables:

If these variables are disabled, 'load_defer' outputs the code added to X-Cart templates immediately, and 'load_defer_code' doesn't do anything.

If these variables are enabled, 'load_defer' assembles the code added to X-Cart templates to a single JS or CSS file, then 'load_defer_code' outputs the assembled code (by including the corresponding JS and CSS files to the page source).

Adding JS and CSS code to X-Cart templates

JS and CSS code can be added to X-Cart templates in two ways:

  1. Included from an external file.
  2. Entered directly in a template.

In the first case, you should pass the 'file' parameter, which is the path to the JavaScript or CSS file to be included. For example:

{load_defer file="js/popup_open.js" type="js"}

In the second case, you should pass the 'direct_info' parameter, which contains the code to be assembled. For example:

{capture name=admin_preview_js}
var txt_this_form_is_for_demo_purposes = '{$lng.txt_this_form_is_for_demo_purposes|wm_remove|escape:javascript}';
var txt_this_link_is_for_demo_purposes = '{$lng.txt_this_link_is_for_demo_purposes|wm_remove|escape:javascript}';
{/capture}

{load_defer file="admin_preview_js" direct_info=$smarty.capture.admin_preview_js type="js"}

CSS code optimization

CSS is considered optimal when it is entirely declared and called prior to the <body> tag (specifically, between the <head> and </head> tags). Another recommendation is to keep it all in a single file. If these are observed, the style is not going to be rebuilt while loading DOM and the styles if they are specified below.

That is why /skin/common_files/customer/service_head.tpl includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in {include file="/skin/common_files/customer/service_css.tpl"}.

For example:

/skin/common_files/customer/service_head.tpl

{include file="customer/service_css.tpl"}
... skipped code ...
{load_defer_code type="css"}

/skin/common_files/customer/service_css.tpl

{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}

It is also recommended to use relative paths in such construction as shown below:

url(path_to_css)

Besides, make sure to have no spaces in the path_to_css parameter.

JS code optimization

Regarding JavaScript, assembling and registering JavaScript code goes in two stages:

  1. Immediately before the </body> tag.
  2. Before the <body> tag (specifically, between the <head> and </head> tags).

In the first case, the {load_defer_code type="js"} tag is included into /skin/common_files/customer/home.tpl, and all the JS is included earlier in other files. For example:

/skin/common_files/customer/home.tpl

{include file="customer/content.tpl"}
... skipped code ...
{load_defer_code type="js"}

/skin/common_files/customer/content.tpl =>

/skin/common_files/customer/right_bar.tpl =>
/skin/common_files/customer/menu_cart.tpl =>
/skin/common_files/customer/ajax.minicart.tpl
{load_defer file="js/ajax.minicart.js" type="js"}

In the second case, {load_defer_code type="js"} tag is included in /skin/common_files/customer/service_head.tpl, and all the JS is included earlier in /skin/common_files/customer/service_js.tpl"}. For example:

/skin/common_files/customer/service_js.tpl

{load_defer file="js/common.js" type="js"}

/skin/common_files/customer/service_head.tpl

{include file="customer/service_js.tpl"}
... skipped code ...
{load_defer_code type="js"}

It is highly recommended to place JavaScript code at the bottom, i.e. right above the </body> tag. In this case, the code will be loaded and executed after the browser has built the DOM.

Much of X-Cart functionality does not take this into account and place JavaScript code before the <body> tag, thus making JavaScript code run while the page is being loaded.

Besides that, with the current functionality, it is not always possible to use the 'load_defer' tags, so sometimes JavaScript code is included directly.

"queue" parameter

To improve the flexibility and define a code execution order, we are introducing the "queue" parameter for the load_defer tag (set to 0 by default), which determines the order for the execution of code within a resulting code given by optimizer.

For example, the code in /skin/common_files/onload_js.tpl

{load_defer file="onload_js" direct_info=$smarty.capture.onload_js type="js" queue="1"}

Caching for buy_now.tpl and other templates

X-Cart 4.4or above

When working on the design, you can disable caching for buy_now.tpl and other templates. Since version 4.4.3, you can do that by adjusting the 'Use cached buy_now.tpl template calls' option. In version 4.4.2, you can disable caching for buy_now.tpl by manually replacing

$smarty->caching = 2;

with $smarty->caching = 0; in /include/templater/plugins/function.include_cache.php. The older versions do not use template caching.

Also, when working on the design, you may want to turn off the 'Do not check if templates are changed (Smarty compile_check)' option. This is applicable to versions 4.4.2 and newer.

You can force rebuilding the target files by removing all the /var/cache/*.css and /var/cache/*.js files (versions 4.4.2 and newer).

To ensure the correct operation of CSS/JS optimizers, make sure that the CSS and JS files are available for reading and writing in the /var/cache directory (according to the rules set in the default /var/.htacess and var/cache/.htaccess). This also applies to versions 4.4.2 and newer.