X-Cart:CSS and JavaScript optimization
To optimize working with CSS and JavaScript, smarty tags load_defer and load_defer_code have been added.
Both tags are used to organize assembling and displaying code for two data types: JavaScript and CSS.
- load_defer - code assembling tag
- load_defer_code - code displaying tag
The logic of tags depends on the store configuration variables: Optimize CSS and Optimize JS
If these variables are disabled, the tag load_defer displays the entered code immediately and the tag load_defer_code doesn't do anything.
The code is assembled in two variants:
- the code is contained in an external file
- the code is entered directly in the template
In the former case the file parameter is passed - the path from the skin to the file (JavaScript or CSS)
for example:
{load_defer file="js/popup_open.js" type="js"}
In the latter case the direct_info parameter is passed: it contains code, passed to the optimizer.
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"}
The load_defer tag accumulates code of a certain type in a global stream for the optimizer.
The load_defer_code tag registers in the optimizer all the accumulated code of a certain type, - регистрирует в оптимизаторе весь накопившийся код определенного типа, производит по месту в коде подключение точки входа оптимизатора с регистрированным идентификатором и очищает текущий глобальный поток для данного типа.
Скрипт - точка входа оптимизатора же в свою очередь - выбирает код для данного типа и данного идентификатора - проверяет его актуальность (если потребуется то перестраивает кеш кода) и отдает код как внешний файл (с соответствующими хидерами).
For example, it is best when CSS is declared and called before the <body> tag, it is also recommended that it is contained in a single file. In this case stylesheets will not be rebuilt as DOM and styles (if they are specified later) are being loaded.
That is why a {load_defer_code type="css"} tag is included into skin/common_files/customer/service_head.tpl, and all CSS is included earlier in {include file="customer/service_css.tpl"}.
Regarding JavaScript, it is best to place JavaScript code at the bottom - immediately before 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 consideration and JavaScript code is being executed during the page loading. That is why assembling and registering code for JavaScript is done in two stages: before the <body> tag and immediately before the </body> tag. Also for the current functionality it is not always possible to use load_defer tags and sometimes JavaScript code is included directly.
queue parameter
To improve flexibility and introduce code execution order, the parameter "queue" has been introduced for the load_defer tag. The parameter defaults to 0 and determines the order of execution of code within the resulting code which is given by the 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"}
