X-Cart:CSS and JavaScript optimization - Revision history

Seyfin: /* Adding JS and CSS code to X-Cart templates */

2012-10-11T06:34:24Z

‎Adding JS and CSS code to X-Cart templates

Seyfin: /* Adding JS and CSS code to X-Cart templates */

2012-10-11T06:11:46Z

‎Adding JS and CSS code to X-Cart templates

Seyfin at 15:08, 23 November 2011

2011-11-23T15:08:56Z

Show changes

Seyfin: /* Adding JS and CSS code to X-Cart templates */

2011-11-23T13:02:29Z

‎Adding JS and CSS code to X-Cart templates

Seyfin: /* General info */

2011-11-21T10:26:31Z

‎General info

Seyfin: /* Assembling JS and CSS code */

2011-11-21T10:25:18Z

‎Assembling JS and CSS code

Seyfin: /* Assembling JS and CSS code */

2011-11-21T09:55:02Z

‎Assembling JS and CSS code

Seyfin: /* General info */

2011-11-21T09:50:28Z

‎General info

Seyfin at 09:49, 21 November 2011

2011-11-21T09:49:03Z

Seyfin at 08:44, 20 November 2011

2011-11-20T08:44:30Z

@@ Line 22: / Line 22: @@
 # 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:
+In the first case, you should pass the 'file' parameter, which is the path to the JS or CSS file to be included. For example:
 <pre>
@@ Line 34: / Line 34: @@
 </pre>
-In the second case, you should pass the 'direct_info' parameter, which contains the code to be assembled. For example:
+In the second case, you should include your JS/CSS code between {capture}...{/capture} tags , and pass the additional 'direct_info' parameter, which contains the code to be assembled. For example:
 <pre>

@@ Line 25: / Line 25: @@
 <pre>
 {load_defer file="js/popup_open.js" type="js"}
 </pre>
 <pre>
-{load_defer file="css/`$smarty.config.CSSFilePrefix`.IE`$ie_ver`.css" type="css"}
+{load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
 </pre>

@@ Line 25: / Line 25: @@
 <pre>
 {load_defer file="js/popup_open.js" type="js"}
 </pre>
@@ Line 37: / Line 41: @@
 {load_defer file="admin_preview_js" direct_info=$smarty.capture.admin_preview_js type="js"}
 </pre>
 == CSS code optimization ==

@@ Line 10: / Line 10: @@
 * [[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==

@@ Line 14: / Line 14: @@
 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).
-== Assembling JS and CSS code ==
+== Adding JS and CSS code to X-Cart templates==
-Code can be assembled in two ways:
+JS and CSS code can be added to X-Cart templates in two ways:
-# Contained in an external file.
+# Included from an external file.
 # Entered directly in a template.
-In the first case, you pass the 'file' parameter, which is the path from the skin to the file (JavaScript or CSS). For example:
+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:
 <pre>
@@ Line 27: / Line 27: @@
 </pre>
-In the second case, you pass the 'direct_info' parameter, which contains the code to be passed to the optimizer. For example:
+In the second case, you should pass the 'direct_info' parameter, which contains the code to be assembled. For example:
 <pre>

@@ Line 6: / Line 6: @@
 * <tt>load_defer_code</tt>
-Both these tags handle the operations of assembling and displaying of code for JavaScript and CSS. The logic of the tags depends on the store configuration variables:
+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:
 * [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for CSS]]
 * [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]]

@@ Line 1: / Line 1: @@
-To optimize operations with CSS and JavaScript, we have added new Smart tags - 'load_defer' and 'load_defer_code'. Both these tags handle the operations of assembling and displaying of code for JavaScript and CSS:
+== General info ==
-* <tt>load_defer</tt> - assembles code
+To optimize operations with CSS and JavaScript, we have added new Smarty tags:
-The logic of the tags depends on the store configuration variables: [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for CSS]] and [[X-Cart:General_Options#CSS_and_JavaScript_optimization_tools | Use speed-up tool for Javascript]].
+* <tt>load_defer</tt>
-If these variables are disabled, load_defer displays the entered code immediately and load_defer_code doesn't do anything.
+Both these tags handle the operations of assembling and displaying of code for JavaScript and CSS. The logic of the tags depends on the store configuration variables:
 Code can be assembled two ways:
@@ Line 30: / Line 38: @@
 </pre>
-<tt>'load_defer'</tt> – accumulates code of a certain type in the global stream for the optimizer.
+== CSS code optimization ==
-<tt>'load_defer_code'</tt> – registers accumulated code of a certain type with optimizer, connects the entry point of an optimizer with a registered identifier by the place in the code and clears the global stream for this type.
+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.
-Script – optimizer’s point of entry to its own queue – selects code for this type and this identifier – checks its relevance (if necessary, rebuilds code cache) and returns the code as an external file (with the respective headers).
+That is why <tt>/skin/common_files/customer/service_head.tpl</tt> includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in <tt>{include file="/skin/common_files/customer/service_css.tpl"}</tt>.
-That is why <tt>/skin/common_files/customer/service_head.tpl</tt> includes the {load_defer_code type="css"} tag, and the entire CSS is included earlier, in <tt>{include file="/skin/common_files/customer/service_css.tpl"}</tt>. For example:
+For example:
 /skin/common_files/customer/service_head.tpl
@@ Line 51: / Line 57: @@
 {load_defer file="lib/cluetip/jquery.cluetip.css" type="css"}
 </pre>
 Regarding JavaScript, assembling and registering JavaScript code goes in two stages:
-* Immediately before the <tt></body></tt> tag.
+# Immediately before the <tt></body></tt> tag.
-* Before the <tt><body></tt> tag (specifically, between the <head> and </head> tags).
+# Before the <tt><body></tt> tag (specifically, between the <head> and </head> tags).
 In the first case, the {load_defer_code type="js"} tag is included into <tt>/skin/common_files/customer/home.tpl</tt>, and all the JS is included earlier in other files. For example:
@@ Line 94: / Line 110: @@
 Besides that, with the current functionality, it is not always possible to use the 'load_defer' tags, so sometimes JavaScript code is included directly.
-'''<tt>queue</tt> parameter'''
+== "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.
@@ Line 103: / Line 119: @@
 </pre>
-When using the
+== Caching for buy_now.tpl and other templates ==
 {{XC 4.4}}
@@ Line 126: / Line 138: @@
 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 <tt>/var/cache</tt> 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.
 [[Category:X-Cart user manual]]
 [[Category:X-Cart developer guide]]
@@ Line 131: / Line 147: @@
 [[Category:X-Cart developer guide]]
 [[Category:X-Cart user manual]]
 [[Category:X-Cart developer guide]]
 [[Category:X-Cart user manual]]
 [[Category:X-Cart developer guide]]